前言
最近看了一些文章董饰，知道了實現(xiàn)引導(dǎo)動畫的基本原理，所以決定來自己親手做一個通用的引導(dǎo)動畫類洼冻。
我們先來看一下具體的效果：點這里
原理
通過維護一個Modal實例瞧毙，使用Modal的mask來隱藏掉頁面的其他元素骤宣。
-
根據(jù)用戶傳入的需要引導(dǎo)的元素列表秦爆，依次來展示元素。展示元素的原理：通過cloneNode來復(fù)制一個當(dāng)前要展示元素的副本憔披，通過當(dāng)前元素的位置信息來展示副本等限，并且通過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); 當(dāng)用戶點擊了當(dāng)前展示的元素時，則展示下一個元素望门。
原理聽起來是不是很簡單形娇？但是其實真正實現(xiàn)起來，還是有坑的筹误。比如說桐早，當(dāng)需要展示的元素不在頁面的可視范圍內(nèi)如何處理。
當(dāng)要展示的元素不在頁面可視范圍內(nèi)厨剪，主要分為三種情況：
- 展示的元素在頁面可視范圍的上邊哄酝。
- 展示的元素在頁面可視范圍的下邊。
- 展示的元素在可視范圍內(nèi)祷膳，可是展示不全陶衅。
由于我是通過getBoundingClientRect這個api來獲取元素的位置、大小信息的直晨。這個api獲取的位置信息是相對于視口左上角位置的（如下圖）搀军。
對于第一種情況，這個api獲取的top值為負(fù)值勇皇，這個就比較好處理罩句，直接調(diào)用window.scrollBy(0, rect.top)來將頁面滾動到展示元素的頂部即可。
而對于第二儒士、三種情況的止，我們可以看下圖
從圖片我們可以看出來，當(dāng)rect.top+rect.height > window.innerHeight的時候着撩，說明展示的元素不在視野范圍內(nèi)，或者展示不全匾委。對于這種情況拖叙，我們也可以通過調(diào)用window.scrollBy(0, rect.top)的方式來讓展示元素盡可能在頂部。
對上述情況的調(diào)節(jié)代碼如下：
// 若引導(dǎo)的元素不在頁面范圍內(nèi)赂乐，則滾動頁面到引導(dǎo)元素的視野范圍內(nèi)
adapteView(ele) {
const rect = ele.getBoundingClientRect();
const height = window.innerHeight;
if (rect.top < 0 || rect.top + rect.height > height) {
window.scrollBy(0, rect.top);
}
}
接下來薯鳍，我們就來一起實現(xiàn)下這個引導(dǎo)動畫類。
第一步：實現(xiàn)Modal功能
我們先不管具體的展示邏輯實現(xiàn)挨措，我們先實現(xiàn)一個簡單的Modal功能挖滤。
class Guidences {
constructor() {
this.modal = null;
this.eleList = [];
}
// 入口函數(shù)
showGuidences(eleList = []) {
// 允許傳入單個元素
this.eleList = eleList instanceof Array ? eleList : [eleList];
// 若之前已經(jīng)創(chuàng)建一個Modal實例，則不重復(fù)創(chuàng)建
this.modal || this.createModel();
}
// 創(chuàng)建一個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';
}
}
第二步：實現(xiàn)展示引導(dǎo)元素的功能
復(fù)制一個要展示元素的副本浅役，并且根據(jù)要展示元素的位置信息來放置該副本斩松，并且將副本當(dāng)成Modal的主體內(nèi)容展示。
class Guidences {
constructor() {
this.modal = null;
this.eleList = [];
}
// 允許傳入單個元素
showGuidences(eleList = []) {
this.eleList = eleList instanceof Array ? eleList : [eleList];
this.modal || this.createModel();
this.showGuidence();
}
// 展示引導(dǎo)頁面
showGuidence() {
if (!this.eleList.length) {
return this.hideModal();
}
this.modalBody && this.modal.removeChild(this.modalBody);
const ele = this.eleList.shift(); // 當(dāng)前要展示的元素
const newEle = ele.cloneNode(true); // 復(fù)制副本
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);
// 當(dāng)用戶點擊引導(dǎo)元素觉既，則展示下一個要引導(dǎo)的元素
this.modalBody.addEventListener('click', () => {
this.showGuidence(this.eleList);
});
}
// 若引導(dǎo)的元素不在頁面范圍內(nèi)惧盹，則滾動頁面到引導(dǎo)元素的視野范圍內(nèi)
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() {
// ...
}
}
完整的代碼可以在點擊這里
調(diào)用方式
const guidences = new Guidences();
function showGuidences() {
const eles = Array.from(document.querySelectorAll('.demo'));
guidences.showGuidences(eles);
}
showGuidences();
總結(jié)
除了使用cloneNode的形式來實現(xiàn)引導(dǎo)動畫外乳幸，還可以使用box-shadow、canvas等方式來做钧椰。詳情可以看下這位老哥的文章新手引導(dǎo)動畫的4種實現(xiàn)方式粹断。
本文地址在->本人博客地址, 歡迎給個 start 或 follow
