【51CTO.com快譯】如今，Web設(shè)計(jì)領(lǐng)域正在創(chuàng)新技術(shù)的輔助下蓬勃發(fā)展。通過(guò)范式的轉(zhuǎn)變，該領(lǐng)域已從先前靜態(tài)雜志式的布局，開展成為了如今的“數(shù)字化機(jī)器”，它有著成千上萬(wàn)個(gè)可調(diào)整尺寸、可移動(dòng)的部件?？梢哉f(shuō)，一名優(yōu)秀的用戶界面（UI）設(shè)計(jì)師完全可以在一小時(shí)內(nèi)，“秒變”成為一位專業(yè)的、具有豐富Web動(dòng)畫技術(shù)經(jīng)驗(yàn)的動(dòng)畫工作人員。

這次，讓我們以一名悟性極高的UI設(shè)計(jì)者角度，而非“苛求代碼質(zhì)量”的開發(fā)者角度，來(lái)研究一些動(dòng)畫庫(kù)。它們中的一部分是用純CSS（Cascading Style Sheets，層疊樣式表）所編寫的，而其他部分則是用JavaScript實(shí)現(xiàn)的。幸運(yùn)的是，它們并不需要您具備比基本HTML/CSS更多的基礎(chǔ)知識(shí)。您完全可以輕松地在自己的代碼中鏈接、或添加這些CSS類。

1.Bounce.js

Bounce.js，這款工具能夠通過(guò)JS庫(kù)，來(lái)生成漂亮的CSS3關(guān)鍵幀動(dòng)畫（keyframe animations）。通過(guò)使用其網(wǎng)站上所提供的工具，您能夠生成一些無(wú)需添加任何額外的JavaScript，便可直接使用的靜態(tài)關(guān)鍵幀。當(dāng)然，如果您想快速在自己的移動(dòng)應(yīng)用中生成它的相關(guān)代碼，您可以直接使用Bounce.js庫(kù)（獲取地址為：https://github.com/tictail/bounce.js）。 

2.Animate.css

Animate.css是一款基于CSS的動(dòng)畫庫(kù)。它不但簡(jiǎn)單易用，而且能夠被集成到各種使用CSS的項(xiàng)目中。例如，您可以在WordPress或Drupal（是使用PHP語(yǔ)言編寫的開源內(nèi)容管理框架）中使用它。要想使用它，您必須通過(guò)CSS樣式表來(lái)鏈接到該庫(kù)中。一旦完成之后，您就可以使用該庫(kù)本身所提供的CSS類，來(lái)對(duì)HTML的各個(gè)元素進(jìn)行動(dòng)畫處理了。

同時(shí)，由于它本身只有43 kb，該庫(kù)能夠支持也更適合于對(duì)jQuery（是一個(gè)快速、簡(jiǎn)潔的JavaScript框架）的操作。此外，它也是一款跨瀏覽器的程序庫(kù)，因此它不會(huì)限制您所使用的瀏覽器類型。我們?cè)诖肆ν圃摬寮脑蚴牵核谠擃I(lǐng)域的社區(qū)中具有廣泛的認(rèn)可度。因此，該插件會(huì)被時(shí)常進(jìn)行“打磨”，并能夠支持其他種類的庫(kù)。另外，由于大家對(duì)它的開發(fā)熱度不減，因此它對(duì)于各種解決方案都有著強(qiáng)大的兼容能力。 

3.Magic Animations

Magic Animations是我們力推的另一個(gè)CSS動(dòng)畫庫(kù)。令人印象深刻的是，它不但能以自己的方式單獨(dú)呈現(xiàn)，也能與諸如animate.css等其他動(dòng)畫庫(kù)協(xié)同工作。因此Magic Animations在功能與性能方面都是***的。另外，它還附帶了一個(gè)精彩的演示程序，您可以在下載之前先觀看體驗(yàn)一下。說(shuō)不定它能給您當(dāng)前的項(xiàng)目與工作帶來(lái)更好的啟發(fā)與想法。

通過(guò)使用該動(dòng)畫庫(kù)，您可以創(chuàng)建出絢麗的動(dòng)畫效果，包括旋轉(zhuǎn)呈現(xiàn)（twisterInDown），換入（swap），淡出（vanish），以及更多特效。同時(shí)，它還支持靜態(tài)與透視的效果。因此總的來(lái)說(shuō)，它是一款非常值得UI設(shè)計(jì)師們?nèi)ピ囉玫膭?dòng)畫庫(kù)。 

4.AnimeJS

相對(duì)于上述所列的其他動(dòng)畫庫(kù)，AnimeJS是一款比較新的JS庫(kù)。雖然起初只是在小范圍內(nèi)被發(fā)布，但是它卻能迅速得以“竄紅”。AnimeJS有著完整的軟件包和動(dòng)畫庫(kù)，因此它是大多數(shù)普通項(xiàng)目的***選擇。與此同時(shí)，正是由于它的全面和“龐大”，如果您正在構(gòu)建一個(gè)輕量級(jí)網(wǎng)站的話，我們建議您還是使用其他的動(dòng)畫庫(kù)吧。

AnimeJS比較容易上手。由于它是一款JavaScript庫(kù)，因此您可以讓它與DOM中的各個(gè)元素進(jìn)行交互，并能順利地給它們添加動(dòng)畫效果。同時(shí)，它也能實(shí)現(xiàn)CSS轉(zhuǎn)換和SVG的各種動(dòng)畫效果。AnimeJS的另一個(gè)關(guān)鍵特點(diǎn)是它有著良好的配套文檔。UI設(shè)計(jì)者們可以通過(guò)試用，去“解鎖”它的更多新功能。 

5.CSShake

CSShake是一款主打顫動(dòng)（shake）元素特效的CSS動(dòng)畫庫(kù)。通過(guò)使用該動(dòng)畫庫(kù)，您可以在整個(gè)項(xiàng)目中創(chuàng)建不同效果的顫動(dòng)元素。例如：當(dāng)用戶沒(méi)有輸入正確的密碼，或嘗試執(zhí)行系統(tǒng)所不允許的操作時(shí)，您可能在指定項(xiàng)目或場(chǎng)景中添加顫動(dòng)的動(dòng)畫效果。該特效最初由蘋果公司的應(yīng)用產(chǎn)品所推出，如今已在多數(shù)其他公司的產(chǎn)品里被廣泛應(yīng)用了。

CSShake的唯一缺點(diǎn)是它的文件大小，足有78.8 kb。 

6.Velocity.js

我們?cè)诖怂械?**一個(gè)動(dòng)畫庫(kù)是Velocity.js。它于2014年被發(fā)布，具有全功能的動(dòng)畫庫(kù)，能夠幫助您實(shí)現(xiàn)包括滾動(dòng)、完成、停止、后退等大量的操作效果。此外，一些知名公司，如WhatsApp、Gap、MailChimp（是通過(guò)電子郵件訂閱RSS的在線工具）等都在其項(xiàng)目中有使用到了Velocity.js。

它不但運(yùn)行速度快，而且能夠提供豐富的功能與效果。 

原文標(biāo)題：Six Excellent Animation Libraries for UI Designers in 2018，作者： Mitesh Patel 

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】