一個好的前端界面中很重要的內容就是動畫，使用符合場景的動畫不僅可以優化網站頁面中的交互細節，提高用戶體驗，還可以讓頁面更具有吸引力，給網站帶來更多訪問量。如果你還不具備手寫各種騷動畫的能力，那麼下面介紹的這幾個動畫庫可得收藏好了~
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，後續的使用還需要各位一起去探索。如果您有其他更好的庫，歡迎留言評論，下一波有機會繼續給大家整理出來。
庫雖好，可不要貪杯噢，該嘗試手寫還是要寫一下的噢~
❤️ 最後 如果你覺得這篇內容對你挺有啓發：
分享出去讓更多的人也能看到這篇內容（歡迎點贊和關注😊）
關注微信公衆號「前端公蝦米」，每週分享前端乾貨