更新時間:2021-01-22 來源:黑馬程序員 瀏覽量:
JS動畫
缺點(diǎn):
1)JavaScript在瀏覽器的主線程中運(yùn)行,而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對其干擾導(dǎo)致線程可能出現(xiàn)阻塞,從而造成丟幀的情況。
2)代碼的復(fù)雜度高于CSS動畫
優(yōu)點(diǎn):
1)JavaScript動畫控制能力很強(qiáng), 可以在動畫播放過程中對動畫進(jìn)行控制:開始、暫停、回放、終止、取消都是可以做到的。
2)動畫效果比css3動畫豐富,有些動畫效果,比如曲線運(yùn)動,沖擊閃爍,視差滾動效果,只有JavaScript動畫才能完成
3)CSS3有兼容性問題,而JS大多時候沒有兼容性問題
CSS動畫
缺點(diǎn):
1)運(yùn)行過程控制較弱,無法附加事件綁定回調(diào)函數(shù)。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點(diǎn),不能在半路反轉(zhuǎn)動畫,不能變換時間尺度,不能在特定的位置添加回調(diào)函數(shù)或是綁定回放事件,無進(jìn)度報(bào)告
2)代碼冗長。想用 CSS 實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動畫,最后CSS代碼都會變得非常笨重。
優(yōu)點(diǎn):
瀏覽器可以對動畫進(jìn)行優(yōu)化。
瀏覽器使用與 requestAnimationFrame 類似的機(jī)制,requestAnimationFrame比起setTimeout,setInterval設(shè)置動畫的優(yōu)勢主要是:
A)requestAnimationFrame 會把每一幀中的所有DOM操作集中起來,在一次重繪或回流中就完成,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率,一般來說,這個頻率為每秒60幀。
B)在隱藏或不可見的元素中requestAnimationFrame不會進(jìn)行重繪或回流,這當(dāng)然就意味著更少的的cpu,gpu和內(nèi)存使用量。
強(qiáng)制使用硬件加速 (通過 GPU 來提高動畫性能)
猜你喜歡:
CSS3盒子模型邊框怎樣實(shí)現(xiàn)圓角效果?