JavaScript動畫和CSS3動畫有什么區(qū)別？

1、CSS3動畫優(yōu)缺點

優(yōu)點：

(1)瀏覽器可以對動畫進行優(yōu)化。

·瀏覽器使用與 requestAnimationFrame 類似的機制，requestAnimationFrame比起setTimeout，setInterval設置動畫的優(yōu)勢主要是:
1)requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率,一般來說,這個頻率為每秒60幀。
2)在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內存使用量。

·強制使用硬件加速 (通過 GPU 來提高動畫性能)

(2)代碼相對簡單,性能調優(yōu)方向固定

(3)對于幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外代碼

缺點：

(1)運行過程控制較弱,無法附加事件綁定回調函數。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數或是綁定回放事件,無進度報告。

(2)代碼冗長。想用 CSS 實現稍微復雜一點動畫，最后CSS代碼都會變得非常笨重。

2、JS動畫優(yōu)缺點

優(yōu)點：

(1)JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。

(2)動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,沖擊閃爍,視差滾動效果，只有JavaScript動畫才能完成。

(3)CSS3有兼容性問題，而JS大多時候沒有兼容性問題。

缺點：

(1)JavaScript在瀏覽器的主線程中運行，而主線程中還有其它需要運行的JavaScript腳本、樣式計算、布局、繪制任務等,對其干擾導致線程可能出現阻塞，從而造成丟幀的情況。

(2)代碼的復雜度高于CSS動畫

總結：如果動畫只是簡單的狀態(tài)切換，不需要中間過程控制，在這種情況下，css動畫是優(yōu)選方案。它可以讓你將動畫邏輯放在樣式文件里面，而不會讓你的頁面充斥 Javascript 庫。然而如果你在設計很復雜的富客戶端界面或者在開發(fā)一個有著復雜UI狀態(tài)的APP。那么你應該使用js動畫，這樣你的動畫可以保持高效，并且你的工作流也更可控。所以，在實現一些小的交互動效的時候，就多考慮考慮CSS動畫。

對于一些復雜控制的動畫，使用javascript比較可靠。

3、css動畫和js動畫的差異

(1)代碼復雜度：js動畫代碼相對復雜一些 。

(2)動畫運行時：對動畫的控制程度上，js能夠讓動畫，暫停，取消，終止，css動畫不能添加事件。

(3)動畫性能看：js動畫多了一個js解析的過程，性能不如css動畫好。

猜你喜歡：

CSS3相比CSS有哪些優(yōu)勢？

CSS是什么意思？史上最詳細介紹

Js中深拷貝與淺拷貝的區(qū)別

什么是Vue？Vue的工作原理是什么？

傳智教育HTML&JS+前端培訓課程