在瀏覽網(wǎng)頁尋找一個整潔的Javascript動畫庫時，我發(fā)現(xiàn)很多“recommended”的動畫庫一段時間都沒有維護。
經(jīng)過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維護的，有用的庫。
使用UI組件時，您還可以使用Bit輕松地在不同應用程序之間共享這些組件，而不是復制粘貼它們，從不同項目進行更改并與其他項目協(xié)作。
Bit - 使用代碼組件共享和構(gòu)建_Bit可幫助您在項目和應用程序之間共享，發(fā)現(xiàn)和使用代碼組件，以構(gòu)建新功能和... _bitsrc.io
使用純CSS
在深入研究這些庫之前，不要忘記使用純CSS。為什么？因為它是標準的，它可以提高性能（GPU），提供向后和向前兼容性，它可能是創(chuàng)建動畫的最有效方法。這里有10個純粹的純CSS動畫示例。
1. Three.js
超過43K的星級，這個流行的庫是使用WebGL在瀏覽器上創(chuàng)建3D動畫的好方法。提供<canvas>，<svg>，CSS3D和WebGL渲染器，這個庫讓我們可以跨設備和瀏覽器創(chuàng)建豐富的交互式體驗。該圖書館于2010年4月首次推出，目前仍由近1,000名參與者開發(fā)。
mrdoob/three.js _three.js?—?JavaScript 3D library._github.com
2. Anime.js
超過20K的 stars，Anime是一個JavaScript動畫庫，可以處理CSS屬性，單個CSS轉(zhuǎn)換，SVG或任何DOM屬性以及JavaScript對象。此庫允許您鏈接多個動畫屬性，將多個實例同步，創(chuàng)建時間軸等。
juliangarnier/anime _anime?—?JavaScript Animation Engine_github.com
3. Mo.js
這個庫是14K星，是一個用于Web的動態(tài)圖形工具帶，具有簡單的聲明API，跨設備兼容性和超過1500個單元測試。您可以在DOME或SVG DOME周圍移動東西或創(chuàng)建唯一的mo.js對象。雖然文檔有些稀缺，但是示例很豐富，這里有CSS技巧的介紹。
legomushroom/mojs _mojs?—?motion graphics toolbelt for the web_github.com
4. Velocity
在15Kstars,，Velocity是一個快速的Javascript動畫引擎，具有與jQuery的$ .animate（）相同的API。它具有色彩動畫，變換，循環(huán)，緩動，SVG支持和滾動。這是Velocity高性能引擎的細分 ，這里是使用該庫的SVG動畫介紹。
julianshapiro/velocity _velocity?—?Accelerated JavaScript animation._github.com
5. Popmotion
在14Kstars,，這個功能和反應動畫庫只重11kb。它允許開發(fā)人員從動作創(chuàng)建動畫和交互，動作是可以啟動和停止的，并使用CSS，SVG，React，three.js和任何接受數(shù)字作為輸入的API創(chuàng)建。
Popmotion/popmotion _popmotion?—?A functional, reactive animation library._github.com
6. Vivus
在超過10K的stars，Vivus是一個零依賴的JavaScript類，可以讓你為SVG制作動畫，讓它們具有被繪制的外觀。您可以使用許多可用動畫之一，或創(chuàng)建自定義腳本來繪制SVG。查看Vivus-instant獲取實時示例，親自動手。
maxwellito/vivus _vivus?—?JavaScript library to make drawing animation on SVG_github.com
7. GreenSock JS
GSAP是一個JavaScript庫，用于創(chuàng)建高性能，零依賴性，跨瀏覽器動畫，聲稱在超過400萬個網(wǎng)站中使用。 GSAP非常靈活，可以與React，Vue，Angular和vanilla JS一起使用。GSDevtools還可以幫助改進使用GSAP構(gòu)建的動畫。
8. Scroll Reveal
憑借15K星和零依賴，該庫為Web和移動瀏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動內(nèi)容。它支持多種簡潔的效果，甚至可以讓您使用自然語言定義動畫。這是一個簡短的SitePoint教程。
jlmakes/scrollreveal _scrollreveal?—?Easy scroll animations for web and mobile browsers._github.com
9. Hover (CSS)
嗯，這是一個CSS庫。在20K星級，Hover提供了CSS3動力懸停效果的收集，可應用于鏈接，按鈕，徽標，SVG，特色圖像等，可在CSS，Sass和LESS中使用。您可以復制并粘貼要在自己的樣式表中使用的效果或引用樣式表。
10. Kute.js
一個完全成熟的原生JavaScript動畫引擎，具有跨瀏覽器動畫的基本功能。重點是代碼質(zhì)量，靈活性，性能和大小（核心引擎是17k min和5.5k gzipped） - 這是一個demo。該庫也是可擴展的，因此您可以添加自己的功能。
11. Typed.js
T這個6K星庫基本上允許您以選定的速度為字符串創(chuàng)建打字動畫。您還可以在頁面上放置HTML div并從中讀取以允許搜索引擎和禁用JavaScript的用戶訪問。由Slack和其他人使用，這個庫既流行又令人驚訝地有用。
mattboldt/typed.js _typed.js?—?A JavaScript Typing Animation Library_github.com
- 還可以看看: iTyped
延遲補充：Airbnb的Lottie
Lottie是一個用于Web的移動庫，iOS用于解析使用 Bodymovin導出為json的 Adobe After Effects 動畫，并將其原生呈現(xiàn)。
掃碼二維碼 獲取免費視頻學習資料
- 本文固定鏈接: http://www.wangchenghua.com/post/6119/
- 轉(zhuǎn)載請注明：轉(zhuǎn)載必須在正文中標注并保留原文鏈接
- 掃碼： 掃上方二維碼獲取免費視頻資料