這幾個庫讓你交互動效滿滿，告別'靜態'時代

一個好的前端界面中很重要的內容就是動畫，使用符合場景的動畫不只能夠優化網站頁面中的交互細節，提升用戶體驗，還可讓頁面更具備吸引力，給網站帶來更多訪問量。若是你還不具有手寫各類騷動畫的能力，那麼下面介紹的這幾個動畫庫可得收藏好了~

Three.js

Three這個流行的庫目前突破了56K Star，是建立一個易於使用，輕量級，3D庫默認的WebGL渲染器。在示例中，該庫還提供了畫布2D、SVG和CSS3D渲染器。threejs能夠將它理解成three + js，three表示3D的意思，js表示javascript的意思。那麼合起來，three.js就是使用javascript 來寫3D程序的意思。Three.js是一個偉大的開源WebGL庫,WebGL容許JavaScript操做GPU，在瀏覽器端實現真正意義的3D。

若是咱們須要使用Threejs來繪圖，只須要建立一個最小繪圖環境便可。Threejs在底層其實仍是調用html5中的canvas api來實現繪圖的。但和咱們通常繪製2D圖像不一樣，該庫提供canvas，svg，CSS3D和WebGL渲染器，使咱們可以在設備和瀏覽器之間建立豐富的交互式體驗。Threejs在頂層對3D繪圖所需的各類元素（例如場景，攝影機，燈光，幾何圖像，材質等）進行了封裝

官方提供的樣例各式各樣，這裏隨機抽取了兩個樣例作展現：

Anime.js

Anime庫目前已擁有33K Star，Anime是一個JavaScript動畫庫，可與CSS屬性，單個CSS轉換，SVG或任何DOM屬性以及JavaScript對象一塊兒使用。 該庫使您能夠連接多個動畫屬性，將多個實例同步在一塊兒，建立時間軸等等。

這裏咱們也來看看幾個酷到爆炸的示例

• 顆粒綻開特效示例

• 咱們的目標不只是追求酷，還要切合業務場景，僞貪吃蛇表單提交特效

• 百行代碼實現canvas鼠標點擊綻開特效示例

Mo.js

Mo.js這個庫達到15K Star，是用於網絡的運動圖形工具帶，具備簡單的聲明性API，跨設備兼容性和超過1500個單元測試。 您能夠在DOME或SVG DOME周圍移動內容，或建立惟一的mo.js對象。 儘管文檔不多，但示例不少，這是CSS技巧的介紹。 Mo.js有着良好的兼容性：

• Chrome 4+
• Firefox 4+
• Opera 11.5+
• Safari 4+
• IE 9+

舉個栗子

Velocity

Velocity是一個快速的Javascript動畫引擎，具備與jQuery的$.animate()相同的API，目前已擁有16K Star。它具備彩色動畫、轉換、循環、縮放、SVG支持和滾動等功能。既然與JQ大法API基本一致，那對咱們的小夥伴來講簡直是開箱即用哇，根本都不用熟悉新的API直接一把梭了~

popmotion

這個功能性動畫庫目前已有17K Star，整個包大小卻僅有11KB，精簡極致的一個動畫庫。 它容許開發人員根據動做建立動畫和交互，這些動做是能夠啓動和中止的值流，並使用CSS，SVG，React，Three.js和任何接受數字做爲輸入的API進行建立。 popmotion官網提供了豐富和詳盡的示例 包括了Vue\React等樣例展現,該動畫庫相對簡介易入手，完成基本業務動效綽綽有餘，建議剛入門的小夥伴能夠去趟趟水。

Typed.js

Typed是一個專一打字動畫的庫，目前擁有9K Star。可讓您以選定的速度爲字符串建立打字動畫。 您還能夠在頁面上放置HTML div並讀取它，以容許搜索引擎和禁用JavaScript的用戶訪問。它既受歡迎又出奇的有用。下面咱們簡單寫了個樣例

使用也是特別的easy！

同時該庫還支持十來個參數配置以及相對應的回調配置，具體可查看Github詳細說明

Animate(css)

animate.css是一個使用CSS3的animation製做的動畫效果的CSS集合，裏面預設了不少種經常使用的動畫，且使用很是簡單。目前已擁有63K Star，是前端友人必不可少的前端CSS動畫庫之一，全部動效即時預覽，拿來即用，很是方便。

Hover (css)

Hover是一個專門提供CSS的hover動效的庫，目前已有22K Star，懸停提供了CSS3支持的懸停效果的集合，可應用於連接、按鈕、徽標、SVG、特點圖像和更多，可用於CSS、Sass和更少。您能夠複製和粘貼您想在本身的樣式表中使用的效果，或者直接引用樣式表。

寫在最後，這是日常開發及業餘時間整理的幾個高Star和使用頻率較高的幾個庫，本文只是作一個簡單的引薦，這幾個庫基本都配備着完善的docs以及demo，後續的使用還須要各位一塊兒去探索。若是您有其餘更好的庫，歡迎留言評論，下一波有機會繼續給你們整理出來。

庫雖好，可不要貪杯噢，該嘗試手寫仍是要寫一下的噢~

❤️ 最後 若是你以爲這篇內容對你挺有啓發：

分享出去讓更多的人也能看到這篇內容（歡迎點贊和關注😊）

關注公衆號「前端公蝦米」，每週分享前端乾貨