手把手教你实现一个引导动画

本文由云+社区发表

做者：陈纪庚

前言

最近看了一些文章，知道了实现引导动画的基本原理，因此决定来本身亲手作一个通用的引导动画类。

咱们先来看一下具体的效果：点这里

原理

1. 经过维护一个Modal实例，使用Modal的mask来隐藏掉页面的其余元素。
2. 根据用户传入的须要引导的元素列表，依次来展现元素。展现元素的原理：经过cloneNode来复制一个当前要展现元素的副本，经过当前元素的位置信息来展现副本，而且经过z-index属性来让其在ModalMask上方展现。大体代码以下： const newEle = target.cloneNode(true); const rect = target.getBoundingClientRect(); newEle.style.zIndex = '1001'; newEle.style.position = 'fixed'; newEle.style.width = ${rect.width}px; newEle.style.height = ${rect.height}px; newEle.style.left = ${rect.left}px; newEle.style.top = ${rect.top}px; this.modal.appendChild(newEle);
3. 当用户点击了当前展现的元素时，则展现下一个元素。

原理听起来是否是很简单？可是其实真正实现起来，仍是有坑的。好比说，当须要展现的元素不在页面的可视范围内如何处理。

当要展现的元素不在页面可视范围内，主要分为三种状况：

1. 展现的元素在页面可视范围的上边。
2. 展现的元素在页面可视范围的下边。
3. 展现的元素在可视范围内，但是展现不全。

因为我是经过getBoundingClientRect这个api来获取元素的位置、大小信息的。这个api获取的位置信息是相对于视口左上角位置的（以下图）。

对于第一种状况，这个api获取的top值为负值，这个就比较好处理，直接调用window.scrollBy(0, rect.top)来将页面滚动到展现元素的顶部便可。

而对于第2、三种状况，咱们能够看下图

从图片咱们能够看出来，当rect.top+rect.height < window.innerHeight的时候，说明展现的元素不在视野范围内，或者展现不全。对于这种状况，咱们也能够经过调用window.scrollBy(0, rect.top)的方式来让展现元素尽量在顶部。

对上述状况的调节代码以下：

// 若引导的元素不在页面范围内，则滚动页面到引导元素的视野范围内
adapteView(ele) {
    const rect = ele.getBoundingClientRect();
    const height = window.innerHeight;
    if (rect.top < 0 || rect.top + rect.height > height) {
        window.scrollBy(0, rect.top);
    }
}
复制代码

接下来，咱们就来一块儿实现下这个引导动画类。

第一步：实现Modal功能

咱们先无论具体的展现逻辑实现，咱们先实现一个简单的Modal功能。

class Guidences {
  constructor() {
    this.modal = null;
    this.eleList = [];
  }
  // 入口函数
  showGuidences(eleList = []) {
    // 容许传入单个元素
    this.eleList = eleList instanceof Array ? eleList : [eleList];
    // 若以前已经建立一个Modal实例，则不重复建立
    this.modal || this.createModel();
  }
  // 建立一个Modal实例
  createModel() {
    const modalContainer = document.createElement('div');
    const modalMask = document.createElement('div');
    this.setMaskStyle(modalMask);
    modalContainer.style.display = 'none';
    modalContainer.appendChild(modalMask);
    document.body.appendChild(modalContainer);
    this.modal = modalContainer;
  }

  setMaskStyle(ele) {
    ele.style.zIndex = '1000';
    ele.style.background = 'rgba(0, 0, 0, 0.8)';
    ele.style.position = 'fixed';
    ele.style.top = 0;
    ele.style.right = 0;
    ele.style.bottom = 0;
    ele.style.left = 0;
  }
 
  hideModal() {
    this.modal.style.display = 'none';
    this.modal.removeChild(this.modalBody);
    this.modalBody = null;
  }

  showModal() {
    this.modal.style.display = 'block';
  }
}
复制代码

第二步：实现展现引导元素的功能

复制一个要展现元素的副本，根据要展现元素的位置信息来放置该副本，而且将副本当成Modal的主体内容展现。

class Guidences {
  constructor() {
    this.modal = null;
    this.eleList = [];
  }
  // 容许传入单个元素
  showGuidences(eleList = []) {
    this.eleList = eleList instanceof Array ? eleList : [eleList];
    this.modal || this.createModel();
    this.showGuidence();
  }
  // 展现引导页面
  showGuidence() {
    if (!this.eleList.length) {
      return this.hideModal();
    }
    // 移除上一次的展现元素
    this.modalBody && this.modal.removeChild(this.modalBody);
    const ele = this.eleList.shift(); // 当前要展现的元素
    const newEle = ele.cloneNode(true); // 复制副本
    this.modalBody = newEle;
    this.initModalBody(ele);
    this.showModal();
  }

  createModel() {
    // ...
  }

  setMaskStyle(ele) {
    // ...
  }

  initModalBody(target) {
    this.adapteView(target);
    const rect = target.getBoundingClientRect();
    this.modalBody.style.zIndex = '1001';
    this.modalBody.style.position = 'fixed';
    this.modalBody.style.width = `${rect.width}px`;
    this.modalBody.style.height = `${rect.height}px`;
    this.modalBody.style.left = `${rect.left}px`;
    this.modalBody.style.top = `${rect.top}px`;
    this.modal.appendChild(this.modalBody);
    // 当用户点击引导元素，则展现下一个要引导的元素
    this.modalBody.addEventListener('click', () => {
      this.showGuidence(this.eleList);
    });
  }
  // 若引导的元素不在页面范围内，则滚动页面到引导元素的视野范围内
  adapteView(ele) {
    const rect = ele.getBoundingClientRect();
    const height = window.innerHeight;
    if (rect.top < 0 || rect.top + rect.height > height) {
      window.scrollBy(0, rect.top);
    }
  }

  hideModal() {
      // ...
  }

  showModal() {
      // ...
  }
}
复制代码

完整的代码能够在点击这里

调用方式

const guidences = new Guidences();
function showGuidences() {
    const eles = Array.from(document.querySelectorAll('.demo'));
    guidences.showGuidences(eles);
}
showGuidences();
复制代码

总结

除了使用cloneNode的形式来实现引导动画外，还可使用box-shadow、canvas等方式来作。

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，能够关注咱们腾讯云技术社区-云加社区官方号及知乎机构号