一個好的前端界面中很重要的內(nèi)容就是動畫，使用符合場景的動畫不僅可以優(yōu)化網(wǎng)站頁面中的交互細(xì)節(jié)，提高用戶體驗，還可以讓頁面更具有吸引力，給網(wǎng)站帶來更多訪問量。如果你還不具備手寫各種騷動畫的能力，那么下面介紹的這幾個動畫庫可得收藏好了~
Three.js
Three這個流行的庫目前突破了56K Star，是創(chuàng)建一個易于使用，輕量級，3D庫默認(rèn)的WebGL渲染器。在示例中，該庫還提供了畫布2D、SVG和CSS3D渲染器。threejs可以將它理解成three + js，three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript 來寫3D程序的意思。Three.js是一個偉大的開源WebGL庫,WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D。
如果我們需要使用Threejs來繪圖，只需要創(chuàng)建一個最小繪圖環(huán)境即可。Threejs在底層其實還是調(diào)用html5中的canvas api來實現(xiàn)繪圖的。但和我們一般繪制2D圖像不同，該庫提供canvas，svg，CSS3D和WebGL渲染器，使我們能夠在設(shè)備和瀏覽器之間創(chuàng)建豐富的交互式體驗。Threejs在頂層對3D繪圖所需的各種元素（例如場景，攝影機(jī)，燈光，幾何圖像，材質(zhì)等）進(jìn)行了封裝
官方提供的樣例各式各樣，這里隨機(jī)抽取了兩個樣例做展示：
Anime.js
Anime庫目前已擁有33K Star，Anime是一個JavaScript動畫庫，可與CSS屬性，單個CSS轉(zhuǎn)換，SVG或任何DOM屬性以及JavaScript對象一起使用。 該庫使您可以鏈接多個動畫屬性，將多個實例同步在一起，創(chuàng)建時間軸等等。
這里我們也來看看幾個酷到爆炸的示例
- 顆粒綻放特效示例
- 我們的目標(biāo)不僅是追求酷，還要切合業(yè)務(wù)場景，偽貪吃蛇表單提交特效
- 百行代碼實現(xiàn)canvas鼠標(biāo)點擊綻放特效示例
Mo.js
Mo.js這個庫達(dá)到15K Star，是用于網(wǎng)絡(luò)的運(yùn)動圖形工具帶，具有簡單的聲明性API，跨設(shè)備兼容性和超過1500個單元測試。 您可以在DOME或SVG DOME周圍移動內(nèi)容，或創(chuàng)建唯一的mo.js對象。 盡管文檔很少，但示例很多，這是CSS技巧的介紹。 Mo.js有著良好的兼容性：
Chrome 4+
Firefox 4+
Opera 11.5+
Safari 4+
IE 9+
舉個栗子
Velocity
Velocity是一個快速的Javascript動畫引擎，具有與jQuery的$.animate()相同的API，目前已擁有16K Star。它具有彩色動畫、轉(zhuǎn)換、循環(huán)、縮放、SVG支持和滾動等功能。既然與JQ大法API基本一致，那對我們的小伙伴來說簡直是開箱即用哇，根本都不用熟悉新的API直接一把梭了~
popmotion
這個功能性動畫庫目前已有17K Star，整個包大小卻僅有11KB，精簡極致的一個動畫庫。 它允許開發(fā)人員根據(jù)動作創(chuàng)建動畫和交互，這些動作是可以啟動和停止的值流，并使用CSS，SVG，React，Three.js和任何接受數(shù)字作為輸入的API進(jìn)行創(chuàng)建。 popmotion官網(wǎng)提供了豐富和詳盡的示例 包括了Vue\React等樣例展示,該動畫庫相對簡介易入手，完成基本業(yè)務(wù)動效綽綽有余，建議剛?cè)腴T的小伙伴可以去趟趟水。
Typed.js
Typed是一個專注打字動畫的庫，目前擁有9K Star。可以讓您以選定的速度為字符串創(chuàng)建打字動畫。 您還可以在頁面上放置HTML div并讀取它，以允許搜索引擎和禁用JavaScript的用戶訪問。它既受歡迎又出奇的有用。下面我們簡單寫了個樣例
使用也是特別的easy！
同時該庫還支持十來個參數(shù)配置以及相對應(yīng)的回調(diào)配置，具體可查看Github詳細(xì)說明
Animate(css)
animate.css是一個使用CSS3的animation制作的動畫效果的CSS集合，里面預(yù)設(shè)了很多種常用的動畫，且使用非常簡單。目前已擁有63K Star，是前端友人必不可少的前端CSS動畫庫之一，所有動效即時預(yù)覽，拿來即用，非常方便。
Hover (css)
Hover是一個專門提供CSS的hover動效的庫，目前已有22K Star，懸停提供了CSS3支持的懸停效果的集合，可應(yīng)用于鏈接、按鈕、徽標(biāo)、SVG、特色圖像和更多，可用于CSS、Sass和更少。您可以復(fù)制和粘貼您想在自己的樣式表中使用的效果，或者直接引用樣式表。
寫在最后，這是平常開發(fā)及業(yè)余時間整理的幾個高Star和使用頻率較高的幾個庫，本文只是做一個簡單的引薦，這幾個庫基本都配備著完善的docs以及demo，后續(xù)的使用還需要各位一起去探索。如果您有其他更好的庫，歡迎留言評論，下一波有機(jī)會繼續(xù)給大家整理出來。
<pre class="public-DraftStyleDefault-pre" data-offset-key="eedo6-0-0" style="margin: 1.4em 0px; padding: 0.88889em; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: auto; background: rgb(246, 246, 246); border-radius: 4px; color: rgb(26, 26, 26); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<pre class="Editable-styled" data-block="true" data-editor="4efba" data-offset-key="eedo6-0-0" style="margin: 0px; padding: 0px; font-size: 0.9em; word-break: normal; overflow-wrap: normal; white-space: pre; overflow: initial; background: rgb(246, 246, 246); border-radius: 0px;">
庫雖好，可不要貪杯噢，該嘗試手寫還是要寫一下的噢~
</pre>
</pre>
?? 最后 如果你覺得這篇內(nèi)容對你挺有啟發(fā)：
分享出去讓更多的人也能看到這篇內(nèi)容（歡迎點贊和關(guān)注??）
