一個好的前端界面中很重要的內(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ò)的運動圖形工具帶，具有簡單的聲明性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)注??）
