首頁 > web前端 > 前端問答 > js動畫和css動畫的差別是什麼

js動畫和css動畫的差別是什麼

青灯夜游
發布: 2021-11-18 16:32:30
原創
4665 人瀏覽過

區別:1、js是逐幀動畫,每一幀都是由程式碼控制,程式碼複雜度高;而css是關鍵影格動畫,補間動畫部分由瀏覽器完成,程式碼複雜度低。 2、js的動畫執行在主線程,容易引發阻塞和等待;css的動畫執行在合成線程,專事專幹,不阻塞主線程。

js動畫和css動畫的差別是什麼

本教學操作環境:windows7系統、CSS3&&javascript1.8.5版、Dell G3電腦。

js動畫和css動畫的區別

#區別一:

##js是逐幀動畫,每一幀都是由程式碼控制,操作不當,極易引發回流

css是關鍵影格動畫,補間動畫部分由瀏覽器完成,便於瀏覽器進行最佳化,動畫執行過程控制的更好

js動畫的程式碼複雜度高於CSS動畫

區別二:

js的動畫執行在主線程,主線程還有其他任務要執行,容易引發阻塞和等待,降低動畫執行效率

css的動畫執行在合成線程,專事專幹,不阻塞主線程,合成線程的動畫也不會觸發回流和重繪

CSS動畫

#優點:

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

(2)程式碼相對簡單,效能調優方向固定

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

缺點:

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

2、  程式碼冗長。想用 CSS 實作稍微複雜一點動畫,最後CSS程式碼都會變得非常笨重。

JS動畫

優點:

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

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

(3)CSS3有相容性問題,而JS大多時候沒有相容性問題

缺點:

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

(2)程式碼的複雜度高於CSS動畫

小結

如果動畫只是簡單的狀態切換,不需要中間製程控制,在這種情況下,css動畫是優選方案。

它可以讓你將動畫邏輯放在樣式檔案裡面,而不會讓你的頁面充斥 Javascript 函式庫。

然而如果你在設計很複雜的富客戶端介面或是在開發一個有著複雜UI狀態的 APP。那你應該使用js動畫,這樣你的動畫可以保持高效,你的工作流程也更可控。

所以,在實現一些小的交互動效的時候,就多考慮考慮CSS動畫。對於一些複雜控制的動畫,使用javascript比較可靠。

更多程式相關知識,請造訪:

程式設計影片! !

以上是js動畫和css動畫的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板