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

前言

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

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

原理

  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等方式来做。详情可以看下这位老哥的文章新手引导动画的4种实现方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

23270
来自专栏技术墨客

React Forwarding高阶组件传递Refs

通常情况下,我们想获取一个组建或则一个HTML元素的实例通过 Ref特性 就可以实现,但是某些时候我们需要在子父级组建中传递使用实例,Forwarding Re...

12340
来自专栏瓜大三哥

matlab GUI基础2

GUIDE编程开发 matlab可视化姐买你的设计,一般有两种方法,一是直接通过编辑M脚本文件产生GUI,二是通过MATLAB图形用户界面开发环境GUIDE来建...

26570
来自专栏www.96php.cn

Discuz后台常用函数详解

当您在编写后台时,需要对几个常用后台显示函数进行详细的了解  下面的函数讲解按照重要性、常用性进行排序 目录 ---- showsetting()表单显示  c...

80550
来自专栏Flutter知识集

Flutter实现雨滴动画

写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。同...

1.2K50
来自专栏非著名程序员

基础篇章:关于 React Native 之 ViewPagerAndroid 组件的讲解

今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。而且每一个 ViewPagerAndroid 的子容器会被视作一个单独...

23350
来自专栏前端儿

React 基础实例教程

首先,需要核心库react.js与React的DOM操作组件react-dom.js

19220
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

48740
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

15520
来自专栏DannyHoo的专栏

两步设置状态栏字体颜色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

28710

扫码关注云+社区

领取腾讯云代金券