CSS動(dòng)畫(huà)和JS動(dòng)畫(huà)有什么區(qū)別？

JS動(dòng)畫(huà)

缺點(diǎn)：
1）JavaScript在瀏覽器的主線程中運(yùn)行，而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對(duì)其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況。
2）代碼的復(fù)雜度高于CSS動(dòng)畫(huà)

優(yōu)點(diǎn)：
1）JavaScript動(dòng)畫(huà)控制能力很強(qiáng), 可以在動(dòng)畫(huà)播放過(guò)程中對(duì)動(dòng)畫(huà)進(jìn)行控制：開(kāi)始、暫停、回放、終止、取消都是可以做到的。
2）動(dòng)畫(huà)效果比css3動(dòng)畫(huà)豐富,有些動(dòng)畫(huà)效果，比如曲線運(yùn)動(dòng),沖擊閃爍,視差滾動(dòng)效果，只有JavaScript動(dòng)畫(huà)才能完成
3）CSS3有兼容性問(wèn)題，而JS大多時(shí)候沒(méi)有兼容性問(wèn)題

CSS動(dòng)畫(huà)

缺點(diǎn)：
1）運(yùn)行過(guò)程控制較弱,無(wú)法附加事件綁定回調(diào)函數(shù)。CSS動(dòng)畫(huà)只能暫停,不能在動(dòng)畫(huà)中尋找一個(gè)特定的時(shí)間點(diǎn)，不能在半路反轉(zhuǎn)動(dòng)畫(huà)，不能變換時(shí)間尺度，不能在特定的位置添加回調(diào)函數(shù)或是綁定回放事件,無(wú)進(jìn)度報(bào)告
2）代碼冗長(zhǎng)。想用 CSS 實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動(dòng)畫(huà),最后CSS代碼都會(huì)變得非常笨重。

優(yōu)點(diǎn)：
瀏覽器可以對(duì)動(dòng)畫(huà)進(jìn)行優(yōu)化。
瀏覽器使用與 requestAnimationFrame 類(lèi)似的機(jī)制，requestAnimationFrame比起setTimeout，setInterval設(shè)置動(dòng)畫(huà)的優(yōu)勢(shì)主要是：
A）requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來(lái)，在一次重繪或回流中就完成,并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率,一般來(lái)說(shuō),這個(gè)頻率為每秒60幀。
B）在隱藏或不可見(jiàn)的元素中requestAnimationFrame不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的的cpu，gpu和內(nèi)存使用量。
強(qiáng)制使用硬件加速 （通過(guò) GPU 來(lái)提高動(dòng)畫(huà)性能）



猜你喜歡：

JS中的對(duì)象是什么？它有哪些屬性和變量？

CSS3盒子模型邊框怎樣實(shí)現(xiàn)圓角效果？

HTML/CSS/Javascript分別是什么？【卡其漫畫(huà)1】

黑馬程序員web前端培訓(xùn)課程