10個最好的 JavaScript 動畫庫和開發框架

lhb25發表於2014-03-11

  雖然 CSS3 動畫功能能夠讓我們以簡單輕鬆的方式實現動畫效果,但是瀏覽器相容性問題讓人頭疼。不過不用擔心,我們還有另外的武器——JavaScript,它同樣可以幫助你實現各種各樣的動畫效果,而且藉助已有的動畫庫和框架,也能夠讓你快速開發。

  這篇文章挑選了個人認為最好的15個 JavaScript 動畫庫和開發框架,相信其中一定會有一款是適合你的。

 1. Tween JS

  TweenJS 是一個簡單的 JavaScript 補間動畫庫。能夠很好的和 EaselJS 庫整合,但也不依賴或特定於它。它支援漸變的數字物件屬性和 CSS 樣式屬性。API 簡單但非常強大,因此很容易通過鏈式呼叫來建立複雜的補間動畫。

 2. Snap.svg

  SVG 是一個建立互動式、解析度無關的向量圖形的很好的解決方案,讓效果在任何大小的螢幕上看起來都是高保真的。Snap.svg 這個 JavaScript 庫處理 SVG 就如你用 jQuery 操作 DOM 一樣簡單。Snap.svg 是專為現代瀏覽器設計的,支援最新的 SVG 遮罩,剪裁,模式,完整的漸變,分組等功能。

 3. Animo.js

  Animo.js 是一個用於管理 管理 CSS 動畫的小工具。它的功能包括:堆疊動畫,建立跨瀏覽器的模糊效果,設定動畫完成的回撥等。

 4. Move.js

  Move.js 是一個小的 JavaScript 庫,用於以非常簡單和優雅的方式支援 CSS3 動畫。

 5. Collie

  Collie 是一個 Javascript 庫,可以使用 HTML5 建立高度優化的動畫和遊戲。它在 PC 和移動端都能使用,使用 HTML5 Canvas 和 DOM 實現。Collie 能穩定使用渲染管道和處理多個物件支援的有用特性包括精靈動畫和使用者事件。

 6. Minified.js

minified

  Minified.js 是一個客戶端 JavaScript 庫,很輕量(<8kb),功能齊全。它提供了類似 jQuery 的特性(DOM操作、動畫、事件、HTTP請求等)和工具函式(集合,日期格式化、日期計算、模板等)與一個簡單的、一致的API。

 7. Rekapi

  Rekapi 是一個基於 JavaScript 的關鍵幀動畫庫。它為您提供了一個 API,用於定義基於幀的動畫和控制動畫的播放。

 8. Jsanim

   jsAnim 這個庫比較小眾一點,可以為你的網站新增動畫效果,大小為25KB 左右。

 9. Favico

favico

  想給你的網站新增徽章、圖片甚至視訊作為圖示嗎?Favico.js 可以幫你實現,它能夠輕鬆新增動畫效果的網站徽章。

 10. Textillate.js

textilliate

  Textillate.js 是一個簡單的 CSS3 文字動畫外掛。Textillate.js 結合了一些很棒的庫,提供一個易於使用的外掛,能夠將 CSS3 動畫應用到任何文字。

相關文章