2019年10個最受歡迎的JavaScript動畫庫!


摘要: 非常炫酷的動畫庫!

Fundebug經授權轉載,版權歸原作者所有。

1. Three.js

超過46K的星星,這個流行的庫提供了非常多的3D顯示功能,以一種直觀的方式使用 WebGL。這個庫提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器,讓我們在設備和瀏覽器之間創建豐富的交互體驗。該庫於2010年4月首次推出,目前仍有近1000名貢獻者在開發中。

2. Anime.js

超過20K的星星,Anime是一個JavaScript動畫庫,可以處理CSS屬性,單個CSS轉換,SVG或任何DOM屬性以及JavaScript對象。 此庫允許您鏈接多個動畫屬性,將多個實例同步,創建時間軸等。

3. Mo.js

超過 14K 星星,是一個用於 Web 的動態圖形工具帶,具有簡單的聲明 API,跨設備兼容性和超過1500個單元測試。 您可以在DOME或SVG DOME周圍移動東西或創建唯一的 mo.js 對象。雖然文檔有些稀缺,但是示例很豐富,這里有CSS技巧的介紹。

4. Velocity

超過 15k 星星,Velocity是一個快速的 Javascript 動畫引擎,擁有與jQuery的 $.animate() 相同的API。它具有彩色動畫、轉換、循環、畫架、SVG支持和滾動。這里是Velocity的高性能引擎的分解,這里是使用該庫的 SVG 動畫的介紹。

5. Popmotion

超過 14K 星星,這個動畫庫大小只有 11 kb。它允許開發人員從動作創建動畫和交互,這些動作是可以啟動和停止,可以使用CSS、SVG、React、three創建,js和任何接受數字作為輸入的API。

代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

6. Vivus

超過 10k 星星,Vivus是一個零依賴的JavaScript類,可以讓你為SVG制作動畫,讓它們具有被繪制的外觀。 您可以使用許多可用動畫之一,或創建自定義腳本來繪制SVG。 查看Vivus-instant獲取實際示例,親自動動手練習一下。

7. GreenSock JS

GSAP 是一個JavaScript庫,用於創建高性能、零依賴、跨瀏覽器動畫,據稱在超過400萬個網站上使用。GSAP是靈活的,可以與React、Vue、Angular和vanilla JS協同工作。GSDevtools 還可以幫助使用GSAP構建dubug動畫。

8. Scroll Reveal

擁有15K顆星星和零依賴,這個庫為 web 和移動瀏覽器提供了簡單的滾動動畫,以動畫的方式顯示滾動中的內容。它支持多種簡潔的效果類型,甚至允許你使用自然語言定義動畫。這里有一個簡短的 SitePoint教程

9. Hover (CSS)

超過 20k 星星,Hover提供了CSS3支持的懸停效果集合,可應用於鏈接、按鈕、徽標、SVG、特色圖像等,在CSS、Sass和LESS中可用。您=可以復制和粘貼希望在自己的樣式表中使用的效果,或者引用樣式。

10. Kute.js

一個完全成熟的原生JavaScript動畫引擎,具有跨瀏覽器動畫的基本功能。 重點是代碼質量,靈活性,性能和大小(核心引擎17k 和 gzipped 5.5k) - 這是一個演。 該庫也是可擴展的,因此你可以添加自己的功能。

關於Fundebug

Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了9億+錯誤事件,付費客戶有Google、360、金山軟件、百姓網等眾多品牌企業。歡迎大家免費試用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM