前言
最近看了一些文章,知道了實現引導動畫的基本原理,所以決定來自己親手做一個通用的引導動畫類。
我們先來看一下具體的效果:點這裏
原理
- 通過維護一個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種實現方式。