前言最近看了一些文章，了解了实现引导动画的基本原理，所以决定自己做一个通用的引导动画类。先来看看具体效果：点击此处维护一个Modal实例，使用Modal遮罩隐藏页面其他元素。根据用户传入的需要引导的元素列表，依次显示元素。显示元素的原理：通过cloneNode复制一份当前要显示的元素，通过当前元素的位置信息显示副本，通过z-index属性显示在ModalMask之上。大致代码如下：constnewEle=target.cloneNode(true);constrect=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);当用户单击当前显示的元素时，将显示下一个元素。原理听起来是不是很简单？但实际上，还是有陷阱的。比如当需要显示的元素不在页面可见范围内时怎么办。当要显示的元素不在页面可见范围内时，主要有三种情况：显示的元素在页面可见范围之上。显示的元素低于页面的可见范围。显示的元素在可见范围内，但没有完全显示。因为我是通过getBoundingClientRectapi获取元素的位置和大小信息的。该API获取的位置信息是相对于视口左上角的位置（如下图所示）。对于第一种情况，该接口获取的top值为负值，比较好办，调用window.scrollBy(0,rect.top)将页面滚动到显示元素的顶部即可。对于第二种和第三种情况，我们可以看下图。从图中我们可以看出，当rect.top+rect.height>window.innerHeight时，说明显示的元素不在视野范围内，或者显示不完整。这种情况下，我们也可以调用window.scrollBy(0,rect.top)让显示元素尽可能的在顶部。针对上述情况的调整代码如下：//如果被引导元素不在页面范围内，则将页面滚动到被引导元素的视图范围内adapteView(ele){constrect=ele.getBoundingClientRect();constheight=window.innerHeight;如果(rect.top<0||rect.top+rect.height>height){window.scrollBy(0,rect.top);}}接下来我们一起来实现这个开机动画类。第一步：Modal功能的实现我们先忽略具体的显示逻辑实现，先实现一个简单的Modal功能。类指南{constructor(){this.modal=null;这个.eleList=[];}//入口函数showGuidences(eleList=[]){//允许在this.eleList=eleListinstanceofArray中传递单个元素？eleList：[eleList]；//如果之前创建过Modal实例，则不会重复创建this.modal||这个.createModel();}//创建模态实例createModel(){constmodalContainer=document.createElement('div');constmodalMask=document.createElement('div');this.setMaskStyle(modalMask);modalContainer.style.display='无';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='固定';电。样式.top=0;ele.style.right=0;ele.style.bottom=0;ele.style.left=0;}hideModal(){this.modal.style.display='none';.removeChild(this.modalBody);this.modalBody=n空;}showModal(){this.modal.style.display='块';}}第二步：实现显示引导元素的功能复制一份待显示元素的副本，根据待显示元素的位置信息放置Copy，并将副本显示为Modal的主要内容类指南{constructor(){this.modal=null;这个.eleList=[];}//允许传入单个元素showGuidences(eleList=[]){this.eleList=eleListinstanceofArray?eleList：[eleList]；这个。模态||这个.createModel();this.showGuidence();}//显示引导页showGuidence(){if(!this.eleList.length){returnthis.hideModal();}this.modalBody&&this.modal.removeChild(this.modalBody);constele=this.eleList.shift();//当前要显示的元素constnewEle=ele.cloneNode(true);//复制this.modalBody=newEle;这。initModalBody(ele);这个.showModal();}createModel(){//...}setMaskStyle(ele){//...}initModalBody(target){this.adapteView(target);constrect=目标。getBoundingClientRect();this.modalBody.style.zIndex='1001';this.modalBody.style.position='固定';this.modalBody.style.width=`${rect.width}px`;这个.modalBody。style.height=`${rect.height}px`;这个.modalBody.style.left=`${rect.left}px`;this.modalBody.style.top=`${rect.top}px`;this.modal.appendChild(this.modalBody);//当用户点击Guidance元素时，则显示下一个要引导的元素this.modalBody.addEventListener('click',()=>{this.showGuidence(this.eleList);});}//如果引导元素不在页面范围内，则将页面滚动到引导元素的视图范围内adapteView(ele){constrect=ele.getBoundingClientRect();constheight=window.innerHeight;如果(rect.top<0||rect.top+rect.height>height){window.scrollBy(0,rect.top);}}hideModal(){//...}showModal(){//...}}完整代码可以调用这里constguidances=newGuidences();functionshowGuidences(){consteles=Array.from(document.querySelectorAll('.demo'));guidances.showGuidences(eles);}showGuidences();总结可以使用box-shadow、canvas等来做细节。新手引导动画的4种实现方法可以看这位老哥的文章。本文地址为->我的博客地址，欢迎开始或关注
