如今很多 UI 設(shè)計師不是正在做動效，就正在學著做動效。

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

動效并不僅僅是一種娛樂手段。它們在整個設(shè)計當中承擔著極為重要的作用和任務(wù)，是用戶體驗的粘合劑，增強了用戶界面的可訪問性，讓界面更易于被理解。

戳這里打開Bttn.css

戳這里打開Hover Buttons

戳這里打開Granim.js

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

戳這里打開 Micron

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

戳這里打開Blotter.js

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

戳這里打開Progressbar

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

戳這里打開Pretty Checkbox

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

戳這里打開 Second-Hamburger-Helper

戳這里打開 Hamburgers

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

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

裝飾性動效

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

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

戳這里打開 Mimic.CSS

AnimatePlus 則是一個基于 JavaScript 的輕量級的動效庫，專注于高性能和靈活的動效。它所帶來的動效通常簡單且直觀。

戳這里打開Animate Plus

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

戳這里打開AnimTrap

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

戳這里打開 jQuery DrawSVG

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

戳這里打開Moving Letters

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

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

戳這里打開Tilt.js

戳這里打開Pixel Wave

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

戳這里打開3D Lines

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

其他的資源素材

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

戳這里訪問Decorative Letter Animations

結(jié)語

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