欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-13 08:55:18
前言 最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。 我们先来看一下具体的效果: "点这里" 原理 1. 通过维护一个Modal实例,使用Modal的mask来隐藏掉页面的其他元素。 2. 根据用户传入的需要引导的元素列表,依次来展示元素。展示元素的原理: ......

前言

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

我们先来看一下具体的效果:

原理

  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)来将页面滚动到展示元素的顶部即可。

而对于第二、三种情况,我们可以看下图

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

从图片我们可以看出来,当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等方式来做。详情可以看下这位老哥的文章。

本文地址在->, 欢迎给个 start 或 follow