新手引導動畫的4種實現方式

前言

前一陣子忙着找工做,面試過程當中,碰到一個感受比較有意思的問題,儘可能多的列舉出新手引導動畫的實現方式, 昨天稍微總結了一下, 實現了4種.源碼在最後,若是想直接看結果的,能夠拉到最後去看.

這裏假設全部的彈出層都是基於頁面上原有的元素

實現一 複製目標內容

具體步驟:

1. 用 getBoundingClientRect 獲取目標內容的顯示位置
2. 複製一個目標內容,而且設置相對定位, 定位的數據在上一步有獲取到,還要把 z-index 稍微設置高一點
3. 在複製內容下面,加一層半透明的遮罩層.

核心代碼:

let target = document.querySelector('.mid-center')
let pos = target.getBoundingClientRect()

let clone = target.cloneNode(true)

clone.style.position = 'fixed'
clone.style.left = pos.left
clone.style.top = pos.top
clone.style.width = pos.width
clone.style.height = pos.height
clone.style.zIndex = 100

document.body.appendChild(clone)

優缺點
比較平凡的實現方式,普普統統的,沒啥特點.

實現二 利用box-shadow

具體步驟:

1. 設置目標對象的 box-shadow 爲一個比較大的,半透明的值
2. 設置目標對象的 position 爲 relative

核心代碼:

let target = document.querySelector('.mid-center')
target.style.boxShadow = '0 0 0 4000px rgba(0, 0, 0, 0.85)'
target.style.position = 'relative'

這裏設置 position:relative 是爲了讓 box-shadow 陰影不被父容器所擋住. 若是沒有設置, box-shadow 會顯示不全

優缺點

優勢: 實現方式簡單易懂

缺點: box-shadow 是個比較耗性能的屬性, 並且依靠 position:relative 不知道會不會出現沒法覆蓋的問題

實現三 利用 html2canvas 將目標內容繪製的一個底色半透明的 canvas 裏面

具體步驟:

1. 用 getBoundingClientRect 獲取目標內容的顯示位置
2. 用 html2canvas 將目標內容繪製到上一步獲取的指定位置和大小

核心代碼:

let target = document.querySelector('.mid-center')
let pos = target.getBoundingClientRect()
let w = ~~pos.width
let h = ~~pos.height

let canvas = document.querySelector('#canvas')
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
let ctx = canvas.getContext("2d");
canvas.style.display = 'block'

html2canvas(target, {
    width: w,
    height: h,
}).then( (cvs) => {
    ctx.drawImage(cvs, pos.left, pos.top)
})

須要注意的是 這裏 canvas.width 和 canvas.height 要手動設置,不然默認是 300 * 150,這樣若是在樣式裏設置寬高的話,會致使畫布被拉伸.

優缺點

優勢: 性能應該相對會比較好一點(若是html2canvas性能內有太差的話), 用 canvas 實現, 也比較不容易碰到各類層級遮擋或顯示不全的問題.

缺點: 實現方式相對繁瑣一點,並且須要藉助外部工具

實現四 把其餘元素都設成半透明的.而後給 body 加一個黑色的底色

具體步驟:

1. 給整個文檔最外層的元素,設置一個黑色的底色
2. 遍歷整個文檔,把非目標內容,和非目標內容的父容器,都設成半透明的

核心代碼:

function showGuidance() {
    let main = document.querySelector('.main')
    main.className += ' darkBackGround'
    setOpticity(main)
}

function setOpticity (element) {
    let doms = Array.from(element.children) || []
    let hasMatched = false
    for (let el of doms) {
        if (!el.className.match(/mid-center/i) && el.children.length) {
            hasMatched = setOpticity(el)
        if (!hasMatched) el.className += ' halfTransparent'
        } else if(el.className.match(/mid-center/i)) {
            hasMatched = true
        } else {
            el.className += ' halfTransparent'
        }
    }
return hasMatched
}

若是不當心把目標元素的父元素也設置成半透明的,那麼就算目標元素沒有設置半透明,也會變透明,由於父元素裏面的全部內容,都會透明

優缺點

優勢: 感受沒有優勢哈

缺點: 批量操做 dom, dom 元素多的狀況下,性能極差

最後

以上全部實現方式,均按最簡單的實現方式來,未考慮一些特殊狀況(如:resize, 有動畫等)
附上 源碼