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

前言最近看了一些文章，知道了实现引导动画的基本原理，所以决定来自己亲手做一个通用的引导动画类。我们先来看一下具体的效果：点这里原理通过维护一个Modal实例，使用Modal的mask来隐藏掉页面的其他元素。根据用户传入的需要引导的元素列表，依次来展示元素。展示元素的原理：通过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);当用户点击了当前展示的元素时，则展示下一个元素。原理听起来是不是很简单？但是其实真正实现起来，还是有坑的。比如说，当需要展示的元素不在页面的可视范围内如何处理。当要展示的元素不在页面可视范围内，主要分为三种情况：展示的元素在页面可视范围的上边。展示的元素在页面可视范围的下边。展示的元素在可视范围内，可是展示不全。由于我是通过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种实现方式。本文地址在->本人博客地址, 欢迎给个 start 或 follow