【51CTO.com快譯】如今，Web設計領(lǐng)域正在創(chuàng )新技術(shù)的輔助下蓬勃發(fā)展。通過(guò)范式的轉變，該領(lǐng)域已從先前靜態(tài)雜志式的布局，開(kāi)展成為了如今的“數字化機器”，它有著(zhù)成千上萬(wàn)個(gè)可調整尺寸、可移動(dòng)的部件?？梢哉f(shuō)，一名優(yōu)秀的用戶(hù)界面（UI）設計師完全可以在一小時(shí)內，“秒變”成為一位專(zhuān)業(yè)的、具有豐富Web動(dòng)畫(huà)技術(shù)經(jīng)驗的動(dòng)畫(huà)工作人員。
這次，讓我們以一名悟性極高的UI設計者角度，而非“苛求代碼質(zhì)量”的開(kāi)發(fā)者角度，來(lái)研究一些動(dòng)畫(huà)庫。它們中的一部分是用純CSS（Cascading Style Sheets，層疊樣式表）所編寫(xiě)的，而其他部分則是用JavaScript實(shí)現的。幸運的是，它們并不需要您具備比基本HTML/CSS更多的基礎知識。您完全可以輕松地在自己的代碼中鏈接、或添加這些CSS類(lèi)。
1. Bounce.js
Bounce.js，這款工具能夠通過(guò)JS庫，來(lái)生成漂亮的CSS3關(guān)鍵幀動(dòng)畫(huà)（keyframe animations）。通過(guò)使用其網(wǎng)站上所提供的工具，您能夠生成一些無(wú)需添加任何額外的JavaScript，便可直接使用的靜態(tài)關(guān)鍵幀。當然，如果您想快速在自己的移動(dòng)應用中生成它的相關(guān)代碼，您可以直接使用Bounce.js庫（獲取地址為：https://github.com/tictail/bounce.js）。
2. Animate.css
Animate.css是一款基于CSS的動(dòng)畫(huà)庫。它不但簡(jiǎn)單易用，而且能夠被集成到各種使用CSS的項目中。例如，您可以在WordPress或Drupal（是使用PHP語(yǔ)言編寫(xiě)的開(kāi)源內容管理框架）中使用它。要想使用它，您必須通過(guò)CSS樣式表來(lái)鏈接到該庫中。一旦完成之后，您就可以使用該庫本身所提供的CSS類(lèi)，來(lái)對HTML的各個(gè)元素進(jìn)行動(dòng)畫(huà)處理了。
同時(shí)，由于它本身只有43 kb，該庫能夠支持也更適合于對jQuery（是一個(gè)快速、簡(jiǎn)潔的JavaScript框架）的操作。此外，它也是一款跨瀏覽器的程序庫，因此它不會(huì )限制您所使用的瀏覽器類(lèi)型。我們在此力推該插件的原因是：它在該領(lǐng)域的社區中具有廣泛的認可度。因此，該插件會(huì )被時(shí)常進(jìn)行“打磨”，并能夠支持其他種類(lèi)的庫。另外，由于大家對它的開(kāi)發(fā)熱度不減，因此它對于各種解決方案都有著(zhù)強大的兼容能力。
Magic Animations是我們力推的另一個(gè)CSS動(dòng)畫(huà)庫。令人印象深刻的是，它不但能以自己的方式單獨呈現，也能與諸如animate.css等其他動(dòng)畫(huà)庫協(xié)同工作。因此Magic Animations在功能與性能方面都是一流的。另外，它還附帶了一個(gè)精彩的演示程序，您可以在下載之前先觀(guān)看體驗一下。說(shuō)不定它能給您當前的項目與工作帶來(lái)更好的啟發(fā)與想法。
通過(guò)使用該動(dòng)畫(huà)庫，您可以創(chuàng )建出絢麗的動(dòng)畫(huà)效果，包括旋轉呈現（twisterInDown），換入（swap），淡出（vanish），以及更多特效。同時(shí)，它還支持靜態(tài)與透視的效果。因此總的來(lái)說(shuō)，它是一款非常值得UI設計師們去試用的動(dòng)畫(huà)庫。
4. AnimeJS
相對于上述所列的其他動(dòng)畫(huà)庫，AnimeJS是一款比較新的JS庫。雖然起初只是在小范圍內被發(fā)布，但是它卻能迅速得以“竄紅”。AnimeJS有著(zhù)完整的軟件包和動(dòng)畫(huà)庫，因此它是大多數普通項目的最佳選擇。與此同時(shí)，正是由于它的全面和“龐大”，如果您正在構建一個(gè)輕量級網(wǎng)站的話(huà)，我們建議您還是使用其他的動(dòng)畫(huà)庫吧。
AnimeJS比較容易上手。由于它是一款JavaScript庫，因此您可以讓它與DOM中的各個(gè)元素進(jìn)行交互，并能順利地給它們添加動(dòng)畫(huà)效果。同時(shí)，它也能實(shí)現CSS轉換和SVG的各種動(dòng)畫(huà)效果。AnimeJS的另一個(gè)關(guān)鍵特點(diǎn)是它有著(zhù)良好的配套文檔。UI設計者們可以通過(guò)試用，去“解鎖”它的更多新功能。
5. CSShake
CSShake是一款主打顫動(dòng)（shake）元素特效的CSS動(dòng)畫(huà)庫。通過(guò)使用該動(dòng)畫(huà)庫，您可以在整個(gè)項目中創(chuàng )建不同效果的顫動(dòng)元素。例如：當用戶(hù)沒(méi)有輸入正確的密碼，或嘗試執行系統所不允許的操作時(shí)，您可能在指定項目或場(chǎng)景中添加顫動(dòng)的動(dòng)畫(huà)效果。該特效最初由蘋(píng)果公司的應用產(chǎn)品所推出，如今已在多數其他公司的產(chǎn)品里被廣泛應用了。
CSShake的唯一缺點(diǎn)是它的文件大小，足有78.8 kb。
6. Velocity.js
我們在此所列的最后一個(gè)動(dòng)畫(huà)庫是Velocity.js。它于2014年被發(fā)布，具有全功能的動(dòng)畫(huà)庫，能夠幫助您實(shí)現包括滾動(dòng)、完成、停止、后退等大量的操作效果。此外，一些知名公司，如WhatsApp、Gap、MailChimp（是通過(guò)電子郵件訂閱RSS的在線(xiàn)工具）等都在其項目中有使用到了Velocity.js。
它不但運行速度快，而且能夠提供豐富的功能與效果。
原文標題：Six Excellent Animation Libraries for UI Designers in 2018，作者： Mitesh Patel
【51CTO譯稿，合作站點(diǎn)轉載請注明原文譯者和出處為51CTO.com】
【龐桂玉 TEL：（010）68476606】
聯(lián)系客服
