1. 程式人生 > >CSS3動畫與JS動畫的優缺點?

CSS3動畫與JS動畫的優缺點?

閃爍 畫的 動畫效果 工作 控制 任務 情況下 主線程 不能

JS動畫:

  缺點:1.JS在瀏覽器的主線程中運行,而主線程還有其他的js腳本,樣式布局,繪制任務等,對其幹擾可能導致線程出現阻塞,從而造成丟幀的情況。

     2.JS動畫代碼復雜度高於CSS3動畫。

  優點:1.JS動畫控制能力很強,可以在動畫播放過程中對動畫進行控制,使其開始或停止。

     2.動畫效果比CSS3動畫豐富,有些動畫只有JS動畫才能實現,比如曲線運動,沖擊閃爍等。

     3.CSS3有兼容性問題,而JS大多時候沒有兼容性問題。

CSS3動畫:

  缺點:

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

     2.代碼冗長。想用CSS3實現稍微復雜一點的動畫,最後CSS代碼都會變得特別笨重。

  優點:

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

結論:

  如果動畫只是簡單的狀態切換,不需要中間過程控制,在這種情況下,CSS3動畫是優先選擇方案。它可以讓你將動畫邏輯放在樣式文件裏面,而不會讓你的頁面充斥JS庫。然而如果你在設計很復雜的富客戶端界面或者開發一個有著復雜UI狀態的APP,那麽你應該使用JS動畫,這樣你的動畫可以保持高效,並且你的工作流也更可控。所以,在實現一些小的交互動效的時候,就多多考慮CSS3動畫,對於一些復雜控制的動畫,使用JS動畫比較可靠。  

CSS3動畫與JS動畫的優缺點?