前端動畫效果實現的簡單比較

合適的動畫不只更能吸引人們的眼球，也能讓你的應用體驗更爲流暢，而將動畫的效果作到極致，才能讓用戶感到使用你的應用是一種享受，而不是以爲生硬和枯燥。本文旨在探討各類前端動畫效果實現方式的異同，具體應用中如何實現，以及實現的效果還得根據自身的狀況進行考量。

Javscript 動畫

由於沒有其它可用的實現方式，最初的前端動畫都是JS來實現，實現上就是經過一個定時器setInterval 每隔必定時間來改變元素的樣式，動畫結束時clearInterval便可。早期的類庫包括 jquery、prototype、mootools 等等都是這種方式。

儘管這種方式動畫的可控性很強，可是問題也很明顯：

• 性能不佳，由於須要不斷獲取和修改Dom的佈局，因此致使了大量頁面重排（repaint）
• 缺少標準，不一樣的庫使用了不一樣的API，致使即便是簡單的動畫也有各不相同的實現方式，調整起來比較耗時
• 帶寬消耗，相對豐富的動畫庫代碼量都很大，結果就是增長了http請求的大小，下降了頁面的載入時間

css3 動畫

css3 加了兩種動畫的實現方式，一種是 transition， 一種是 animation。

transition 包含4種屬性：transition-delay transition-duration transition-property transition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函數，

transform 包含7種屬性：animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state，它們能夠定義動畫名稱，持續時間，緩動函數，動畫延遲，動畫方向，重複次數，填充模式。

總的來書，css 動畫相比與JS更輕量，性能更好，更易於實現，同時也沒必要擔憂缺少標準和增長帶寬消耗的問題。animation 相比 transtion 使用起來更爲複雜，但也提供了更多的控制，其中最重要的就是 frame 的支持，不過經過一些簡單的JS庫，例如 TJ 的 move.js, 咱們也能在JS中經過 transition 來實現更復雜的控制。

html5 動畫

html5 定義了三種繪圖的方式，canvas svg webgl，其中svg作爲一種可縮放矢量圖形的實現是基於xml標籤訂義的，它有專門的 animate 標籤來定義動畫。而爲 canvas 或者 webgl 實現動畫則須要經過 requestAnimationFrame (簡稱 raf) 來按期刷新畫布。 儘管說 raf 的方式會讓代碼變得複雜，可是由於不須要那麼多的文檔對象（一般瀏覽器只須要管理一個畫布），它的性能也好不少，尤爲是在內存吃緊的移動端上面。

經過新的 raf 接口以及一些改進手段咱們也能夠用JS來實現高性能的動畫。主要手段以下：
1. 減小 Dom 樣式屬性查詢，Dom 樣式屬性的查詢會致使頁面重排，從而消耗性能，經過將屬性保存在JS變量中就能夠避免在動畫時去查詢，從而減小卡頓。
2. 使用性能更好的 css transform 替代改變絕對定位元素的定位屬性
3. 在移動設備上使用 3d 硬件加速，最簡單辦法就是添加 -webkit-transform: translateZ(0)，緣由是移動端的顯卡有很強的圖形渲染能力，而每一個應用的 webview 內存倒是極其有限的。

使用JS的動畫可控性更好，好比說經過事件捕捉能夠很容易的設定不一樣參數。這方面作的最全面的有 Velocity.js，它可作爲jquery 插件使用，對於初學者很友好，我我的會傾向於使用 tween.js，由於它只專一與動畫的數值計算，不只僅只適用與 Dom 操做。