一行代码教你学会制作新手引导

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

前言

Hello 大家好！ 我是前端 无名,

新手引导教学

大家做各种H5应用经常会遇到做一个新手引导的需求，作为小白的我，以前的处理方案：

1. 直接搞个弹窗浮层（0.8的透明度），弹窗浮层上直接用UI的框选图即可，但是这样框选出来的图形，有一层半透明的蒙层，效果不是很理想。勉强能用！

2. 前两天刚学了一种css属性，简简单单一行代码帮你搞定：

 box-shadow:0 0 0 9999px rgba(0,0,0,0.7);

看下实现效果：

上代码：

import React from 'react';
import BaseComponent from '@/components/BaseComponent';

import './index.scss';
import Button from '@/components/Button';

interface INewPersonGuidanceProps {}

const overCount = 2;
interface INewPersonGuidanceState {
  guideIndex: number;
}

/**
 *
 * 新手引导
 * @export
 * @class NewPersonGuidance
 * @extends {BaseComponent<INewPersonGuidanceProps>}
 */
export default class NewPersonGuidance extends BaseComponent<
  INewPersonGuidanceProps,
  INewPersonGuidanceState
> {
  constructor(props) {
    super(props);
    this.state = {
      guideIndex: 1,
    };
  }
  
  /**
   * 
   * 
   * 点击改变引导位置
   * @memberOf NewPersonGuidance
   */
  onClick = () => {
    const { guideIndex } = this.state;
    const nextGuideIndex = guideIndex + 1;
    this.setState({
      guideIndex: nextGuideIndex,
    });
  };

  render() {
    const { guideIndex } = this.state;
    if (guideIndex > overCount) return null;
    return (
      <Button className="new-person-guidance" onClick={this.onClick}>
        <div className={`guideOverlap guide-${guideIndex}`}>
          <div className="guide-img" />
        </div>
      </Button>
    );
  }
}

.new-person-guidance {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: transparent;
    z-index: 100;

    .guideOverlap {
        position: absolute;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
        transition: all 0.3s ease 0s;
    }

    .guide-img {
        position: absolute;
        bottom: -100px;
    }
    
    //引导1的位置
    .guide-1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 100px;
        left: 130px;
        border-radius: 50%;
        .guide-img {
            width: 204px;
            height: 94px;
            left: -100px;
            @include bgFill("guide-1.png");
        }
    }
    //引导2的位置
    .guide-2 {
        position: absolute;
        width: 200px;
        height: 400px;
        top: 250px;
        right: 100px;
        border-radius: 50%;
        .guide-img {
            width: 172px;
            height: 94px;
            @include bgFill("guide-4.png");
            left: -80px;
        }
    }
}

实现原理

我们来了解一下box-shadow属性的值：box-shadow:inset 0 0 0 9999px rgba(0,0,0,0.7);

第一个值：inset 表示内阴影，不写的话，默认是外阴影。

第二个值：水平偏移 （长度值）

第三个值：垂直偏移 （长度值）

第三个值：模糊大小，模糊半径 （长度值）

第四个值：扩展半径，主要应用场景就是轮廓模拟 （长度值）

第五个值：颜色值

box-shadow支持无限个阴影效果不断叠加，因此理论上box-shadow可以画出任何图形。

这里我们主要说一下模糊大小和扩展半径的区别，我们如果设置模糊大小的话，模糊的范围值是渐变模糊的。扩展半径是轮廓扩展，因此是做新手引导的绝佳属性。

结语：

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章