如今很多 UI 設(shè)計(jì)師不是正在做動(dòng)效，就正在學(xué)著做動(dòng)效。 

動(dòng)效現(xiàn)在已經(jīng)無處不在了。有的動(dòng)效可能是一個(gè)微妙的懸停效果，使用 Bttn.css 或者是 Hover Buttons 的幫助下，添加到按鈕上，有的則可能是使用引人矚目的動(dòng)態(tài)漸變背景抓住用戶的眼球，而這可能是通過 Granim.js 來實(shí)現(xiàn)的。或大或小，這些動(dòng)畫就和字體、導(dǎo)航、圖標(biāo)一樣， 是如今 UI 界面當(dāng)中不可或缺的組成部分。如果你仍然抱著僥幸心理，認(rèn)為動(dòng)效只是暫時(shí)的趨勢(shì)，過一陣子就會(huì)消失，那就大錯(cuò)特錯(cuò)了。 

動(dòng)效并不僅僅是一種娛樂手段。它們?cè)谡麄€(gè)設(shè)計(jì)當(dāng)中承擔(dān)著極為重要的作用和任務(wù)，是用戶體驗(yàn)的粘合劑，增強(qiáng)了用戶界面的可訪問性，讓界面更易于被理解。 

▲Bttn.css 

▲Hover Buttons 

▲Granim.js 

微交互是動(dòng)效最典型的使用場(chǎng)景。微交互中所用到的動(dòng)效微小，但是功能強(qiáng)大，為用戶提供視覺線索，讓體驗(yàn)更加愉悅。你可以看看 Micron，這是一個(gè)小型的基于 JavaScript 的 CSS動(dòng)效庫，通過相應(yīng)的腳本，每個(gè)動(dòng)效都可以應(yīng)用到 HTML 布局內(nèi)的任何 DOM 元素。 

▲Micron  

另一個(gè)常見的動(dòng)效是加載動(dòng)效。雖然絕大多數(shù)的用戶已經(jīng)習(xí)慣了它，但是像 Blotter.js 這樣神奇的動(dòng)效還是會(huì)時(shí)不時(shí)地給我?guī)眢@喜，留下深刻的印象。但是總的來說，良好的用戶體驗(yàn)始終是非常重要的。網(wǎng)站顯示內(nèi)容的時(shí)候，它應(yīng)該持續(xù)地吸引用戶，讓用戶保持興趣。 

▲Blotter.js  

眾所周知的是，靜止不變仿佛卡頓住的界面，很容易讓用戶覺得迷惑，所以進(jìn)度條是一個(gè)非常重要的組件，讓訪客知道后臺(tái)是有進(jìn)展的。而 Progressbar 就是為此專門創(chuàng)建的工具。 

▲Progressbar 

動(dòng)效對(duì)于設(shè)計(jì)各方面的影響是積極的，微小的變化總能帶來巨大的改變，這才是它所存在的重要意義。你可以試試 Pretty Checkbox 和 Hamburgers。Pretty Checkbox 是一個(gè)小型的 CSS 效果庫，提供豐富的復(fù)選框和單選按鈕的交互動(dòng)畫。它誕生之初裝飾性比較強(qiáng)，但是隨著其中效果的升級(jí)和功能性的強(qiáng)化，使得它所提供的動(dòng)效越來越強(qiáng)大，越來越有效果。 

▲Pretty Checkbox  

而 Hamburgers 這個(gè)項(xiàng)目特別類似 Kurt Petrek 之前的一個(gè)項(xiàng)目 Second-Hamburger-Helper，這個(gè)其中包括十幾個(gè)非?？蓯蹪h堡圖標(biāo)和相應(yīng)的動(dòng)效。即便只是最簡(jiǎn)單的三個(gè)小橫杠構(gòu)成的圖標(biāo)和交叉的關(guān)閉圖標(biāo)之間的動(dòng)效，也可以這么豐富多彩，這種發(fā)現(xiàn)的愉悅會(huì)讓人感受到一種別樣的舒適感。 

▲Second-Hamburger-Helper 

▲Hamburgers 

另外，滾動(dòng)條觸發(fā)的動(dòng)效也是如今到處都可以看到的一個(gè)動(dòng)效類別。它們最初更多出現(xiàn)在講述故事的網(wǎng)站上，但是現(xiàn)在已經(jīng)大規(guī)模的普及開了。 

事實(shí)證明，動(dòng)效確實(shí)是創(chuàng)造順暢體驗(yàn)的粘合劑。除此之外，它還需要輔助創(chuàng)建視覺路徑。比如 T-Scroll 和 Scrollanim，這兩個(gè)動(dòng)效都是用來處理滾動(dòng)動(dòng)效的，第一個(gè)使用了CSS 和JS，而后者則使用了 Sass 和 ES6，根據(jù)你的實(shí)際技術(shù)來選擇合適的工具吧。 

裝飾性動(dòng)效 

在各種最新的插件、庫和代碼片段的加持之下，想在界面的任何地方添加上豐富的細(xì)節(jié)和動(dòng)畫，都不是一件麻煩的事情。你可以找到很多通用的解決方案，比如 Mimic.CSS，Animate Plus，AnimTrap ，也可以使用 jQuery DrawSVG 和 Moving Letters。  

Mimic.CSS 是一個(gè)包含有20中不同視覺效果的小合集，從脈動(dòng)動(dòng)效到下墜動(dòng)效，不一而足。你可以在不同的 DOM元素中添加不同的類，來實(shí)現(xiàn)不同的效果。 

▲Mimic.CSS 

AnimatePlus 則是一個(gè)基于 JavaScript 的輕量級(jí)的動(dòng)效庫，專注于高性能和靈活的動(dòng)效。它所帶來的動(dòng)效通常簡(jiǎn)單且直觀。 

▲Animate Plus 

AnimTrap 并不是一個(gè)動(dòng)效工具，而是一個(gè)動(dòng)效的 CSS 框架，可以作為安全的基礎(chǔ)，所以你可以使用它來創(chuàng)建可行性極高的基于滾動(dòng)的動(dòng)效。 

▲AnimTrap  

Leonardo Santos 所開發(fā)的這款 jQuery DrawSVG 插件能夠以多樣的方式將 SVG 動(dòng)效應(yīng)用到實(shí)際產(chǎn)品當(dāng)中。它適用于矢量元素，借此創(chuàng)建出獨(dú)特的視覺效果。 

▲jQuery DrawSVG  

Moving Letters 則是 Tobias Ahlin 的個(gè)人項(xiàng)目，它提供了16種基于文本和字體的動(dòng)畫效果，你只需要復(fù)制代碼粘貼到你的網(wǎng)站里面，就能夠重現(xiàn)出相應(yīng)的效果。 

▲Moving Letters  

DrawSVG 和 Moving Letters 都是純粹的娛樂性的工具，這個(gè)系列當(dāng)中，還有另外三個(gè)工具也是非常值得推薦的：Tilt.js、Pixel Wave 和 3D Lines。這三個(gè)工具也同樣借助動(dòng)效實(shí)現(xiàn)了豐富多彩的用戶體驗(yàn)。 

Tilt.js 是一個(gè)非常小的插件，用來創(chuàng)建微妙但是引人矚目的視差效果，而 Pixel Wave 則可以將像素變成博朗，帶來時(shí)尚非常的幾何元素氛圍。 

▲Tilt.js 

▲Pixel 

Wave 3D Lines 則是基于 Three.js 的解決方案。它可以創(chuàng)建不斷變化的顏色和線條，風(fēng)格現(xiàn)代而視覺感十足。 

▲3D Lines  

動(dòng)效能夠讓瑣碎的細(xì)節(jié)變得有趣。在實(shí)際運(yùn)用的過程中，使用 MixltUp 也是不錯(cuò)的選擇，它是一個(gè)不依賴其他組件的解決方案，能夠創(chuàng)造出不同的動(dòng)畫效果。 

其他的資源素材 

來自專業(yè)人事的動(dòng)效工具真的能夠讓你的網(wǎng)頁和產(chǎn)品擁有截然不同的視覺效果，尤其是像 Mary Lou 這樣的高手所創(chuàng)建的工具。你可以看看 Decorative Letter Animations 和 Glitch Effect 這兩篇文章，其中都包含了非常突出的展示，清新而時(shí)尚。當(dāng)然，這些代碼和工具的缺陷在于……過于先鋒，對(duì)于瀏覽器兼容性有著極高的要求。但是這不會(huì)是不可逾越的障礙，因?yàn)闉g覽器會(huì)越來越先進(jìn)，性能越來越強(qiáng)。 

▲Decorative Letter Animations 

結(jié)語 

純粹靜態(tài)的網(wǎng)站越來越少，動(dòng)態(tài)的網(wǎng)站是大勢(shì)所趨。今天的文章我們直接推薦的是最新的、效果突出的動(dòng)效工具和代碼片段，并沒有推薦諸如 Three.js、WebGL 或者 GSAP 等主流工具的技巧，但是這些東西其實(shí)很容易獲得，也容易找到。我相信這些最新、最獨(dú)特的工具能夠幫你邁出設(shè)計(jì)和應(yīng)用動(dòng)效的第一步，這才是最重要的。

作者 : Nataly Birch

原文鏈接：https://designmodo.com/dynamic-animations-ui/