本文由云 + 社区发表作者：陈纪庚
前言
最近看了一些文章，知道了实现引导动画的基本原理，所以决定来自己亲手做一个通用的引导动画类。
我们先来看一下具体的效果：点这里
原理
通过维护一个 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 等方式来做。
此文已由腾讯云 + 社区在各渠道发布
获取更多新鲜技术干货，可以关注我们腾讯云技术社区 - 云加社区官方号及知乎机构号