摘要：前言最近看了一些文章，知道了實(shí)現(xiàn)引導(dǎo)動(dòng)畫的基本原理，所以決定來自己親手做一個(gè)通用的引導(dǎo)動(dòng)畫類。對上述情況的調(diào)節(jié)代碼如下若引導(dǎo)的元素不在頁面范圍內(nèi)，則滾動(dòng)頁面到引導(dǎo)元素的視野范圍內(nèi)接下來，我們就來一起實(shí)現(xiàn)下這個(gè)引導(dǎo)動(dòng)畫類。

最近看了一些文章，知道了實(shí)現(xiàn)引導(dǎo)動(dòng)畫的基本原理，所以決定來自己親手做一個(gè)通用的引導(dǎo)動(dòng)畫類。

我們先來看一下具體的效果：點(diǎn)這里

通過維護(hù)一個(gè)Modal實(shí)例，使用Modal的mask來隱藏掉頁面的其他元素。

根據(jù)用戶傳入的需要引導(dǎo)的元素列表，依次來展示元素。展示元素的原理：通過cloneNode來復(fù)制一個(gè)當(dāng)前要展示元素的副本，通過當(dāng)前元素的位置信息來展示副本，并且通過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);

當(dāng)用戶點(diǎn)擊了當(dāng)前展示的元素時(shí)，則展示下一個(gè)元素。

原理聽起來是不是很簡單？但是其實(shí)真正實(shí)現(xiàn)起來，還是有坑的。比如說，當(dāng)需要展示的元素不在頁面的可視范圍內(nèi)如何處理。

當(dāng)要展示的元素不在頁面可視范圍內(nèi)，主要分為三種情況：

展示的元素在頁面可視范圍的上邊。

展示的元素在頁面可視范圍的下邊。

展示的元素在可視范圍內(nèi)，可是展示不全。

由于我是通過getBoundingClientRect這個(gè)api來獲取元素的位置、大小信息的。這個(gè)api獲取的位置信息是相對于視口左上角位置的（如下圖）。

對于第一種情況，這個(gè)api獲取的top值為負(fù)值，這個(gè)就比較好處理，直接調(diào)用window.scrollBy(0, rect.top)來將頁面滾動(dòng)到展示元素的頂部即可。

而對于第二、三種情況，我們可以看下圖

從圖片我們可以看出來，當(dāng)rect.top+rect.height > window.innerHeight的時(shí)候，說明展示的元素不在視野范圍內(nèi)，或者展示不全。對于這種情況，我們也可以通過調(diào)用window.scrollBy(0, rect.top)的方式來讓展示元素盡可能在頂部。

對上述情況的調(diào)節(jié)代碼如下：

// 若引導(dǎo)的元素不在頁面范圍內(nèi)，則滾動(dòng)頁面到引導(dǎo)元素的視野范圍內(nèi)
adapteView(ele) {
    const rect = ele.getBoundingClientRect();
    const height = window.innerHeight;
    if (rect.top < 0 || rect.top + rect.height > height) {
        window.scrollBy(0, rect.top);
    }
}

接下來，我們就來一起實(shí)現(xiàn)下這個(gè)引導(dǎo)動(dòng)畫類。

我們先不管具體的展示邏輯實(shí)現(xiàn)，我們先實(shí)現(xiàn)一個(gè)簡單的Modal功能。

class Guidences {
  constructor() {
    this.modal = null;
    this.eleList = [];
  }
  // 入口函數(shù)
  showGuidences(eleList = []) {
    // 允許傳入單個(gè)元素
    this.eleList = eleList instanceof Array ? eleList : [eleList];
    // 若之前已經(jīng)創(chuàng)建一個(gè)Modal實(shí)例，則不重復(fù)創(chuàng)建
    this.modal || this.createModel();
  }
  // 創(chuàng)建一個(gè)Modal實(shí)例
  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";
  }
}

復(fù)制一個(gè)要展示元素的副本，并且根據(jù)要展示元素的位置信息來放置該副本，并且將副本當(dāng)成Modal的主體內(nèi)容展示。

class Guidences {
  constructor() {
    this.modal = null;
    this.eleList = [];
  }
  // 允許傳入單個(gè)元素
  showGuidences(eleList = []) {
    this.eleList = eleList instanceof Array ? eleList : [eleList];
    this.modal || this.createModel();
    this.showGuidence();
  }
  // 展示引導(dǎo)頁面
  showGuidence() {
    if (!this.eleList.length) {
      return this.hideModal();
    }
    this.modalBody && this.modal.removeChild(this.modalBody);
    const ele = this.eleList.shift(); // 當(dāng)前要展示的元素
    const newEle = ele.cloneNode(true); // 復(fù)制副本
    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);
    // 當(dāng)用戶點(diǎn)擊引導(dǎo)元素，則展示下一個(gè)要引導(dǎo)的元素
    this.modalBody.addEventListener("click", () => {
      this.showGuidence(this.eleList);
    });
  }
  // 若引導(dǎo)的元素不在頁面范圍內(nèi)，則滾動(dòng)頁面到引導(dǎo)元素的視野范圍內(nèi)
  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() {
      // ...
  }
}

完整的代碼可以在點(diǎn)擊這里

const guidences = new Guidences();
function showGuidences() {
    const eles = Array.from(document.querySelectorAll(".demo"));
    guidences.showGuidences(eles);
}
showGuidences();

除了使用cloneNode的形式來實(shí)現(xiàn)引導(dǎo)動(dòng)畫外，還可以使用box-shadow、canvas等方式來做。詳情可以看下這位老哥的文章新手引導(dǎo)動(dòng)畫的4種實(shí)現(xiàn)方式。

本文地址在->本人博客地址, 歡迎給個(gè) start 或 follow