想給你的網頁加上酷炫動效？這有 20 個神器幫你！

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

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

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

戳這里打開Bttn.css

戳這里打開Hover Buttons

戳這里打開Granim.js

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

戳這里打開 Micron

另一個常見的動效是加載動效。雖然絕大多數的用戶已經習慣了它，但是像 Blotter.js 這樣神奇的動效還是會時不時地給我帶來驚喜，留下深刻的印象。但是總的來說，良好的用戶體驗始終是非常重要的。網站顯示內容的時候，它應該持續地吸引用戶，讓用戶保持興趣。

戳這里打開Blotter.js

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

戳這里打開Progressbar

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

戳這里打開Pretty Checkbox

而 Hamburgers 這個項目特別類似 Kurt Petrek 之前的一個項目 Second-Hamburger-Helper，這個其中包括十幾個非常可愛漢堡圖標和相應的動效。即便只是最簡單的三個小橫杠構成的圖標和交叉的關閉圖標之間的動效，也可以這么豐富多彩，這種發現的愉悅會讓人感受到一種別樣的舒適感。

戳這里打開 Second-Hamburger-Helper

戳這里打開 Hamburgers

另外，滾動條觸發的動效也是如今到處都可以看到的一個動效類別。它們最初更多出現在講述故事的網站上，但是現在已經大規模的普及開了。

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

裝飾性動效

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

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

戳這里打開 Mimic.CSS

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

戳這里打開Animate Plus

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

戳這里打開AnimTrap

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

戳這里打開 jQuery DrawSVG

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

戳這里打開Moving Letters

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

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

戳這里打開Tilt.js

戳這里打開Pixel Wave

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

戳這里打開3D Lines

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

其他的資源素材

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

戳這里訪問Decorative Letter Animations

結語

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