雖然 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.js 是一個客戶端 JavaScript 庫,很輕量(<8kb),功能齊全。它提供了類似 jQuery 的特性(DOM操作、動畫、事件、HTTP請求等)和工具函數(集合,日期格式化、日期計算、模板等)與一個簡單的、一致的API。
7. Rekapi
Rekapi 是一個基於 JavaScript 的關鍵幀動畫庫。它為您提供了一個 API,用於定義基於幀的動畫和控制動畫的播放。
2. Jsanim
jsAnim 這個庫比較小眾一點,可以為你的網站添加動畫效果,大小為25KB 左右。
9. Favico
想給你的網站添加徽章、圖片甚至視頻作為圖標嗎?Favico.js 可以幫你實現,它能夠輕松添加動畫效果的網站徽章。
10. Textillate.js
Textillate.js 是一個簡單的 CSS3 文本動畫插件。Textillate.js 結合了一些很棒的庫,提供一個易於使用的插件,能夠將 CSS3 動畫應用到任何文本。










