要做動效？這75款動效工具讓你無所不能（上）

動效這兩年崛起非常之迅猛，幾乎是網(wǎng)頁設計領域最強大的設計趨勢之一。無論是在設計師群體還是在用戶當中，它的受歡迎程度都非常之高，大家都對它津津樂道。

從微妙的轉場動效到覆蓋整個頁面的大范圍動效，它幾乎無處不在。動效的運用讓網(wǎng)頁中的元素邏輯變化關系清晰地表述出來，還將影視化的體驗引入了進來。

本文下集《這75款動效工具讓你無所不能（下）》

對于設計師而言，動效賦予了設計足夠的可能性。無論是純粹的裝飾，還是簡化界面，闡述邏輯，還是增加用戶體驗，動效都能幫到你。今天，我們要為你提供75個不同的動效設計工具，它們有的是插件，有的是代碼庫，合理的運用它們，能幫你搞定各式各樣的動效。
?

1. ANIMATE.CSS

Animate.css 是一個跨瀏覽器的動效基礎庫，是許多基礎動效的解決方案。從經(jīng)典的彈跳動效到獨特的扭曲動效，一應俱全。
?

2. MAGIC ANIMATIONS

Magic Animations 專注于為網(wǎng)頁帶來獨特的視覺效果。雖然其中涵蓋的類型不夠豐富，但是帶來的體驗足夠優(yōu)秀。
?

3. BOUNCE.JS

這是一個用來創(chuàng)造彈跳特效的庫，它的動效主要是通過CSS3和一些預設來實現(xiàn)的。你可以通過 npm ，bower 來安裝JS庫，簡單的復制生成的CSS3代碼來應用動效。
?

4. ANIJS

AnijS 讓你能夠通過 if、on、do、to 等簡單的命令更加直觀地處理動效。有趣的地方在于，它還能用來控制前面 Animate.css 來創(chuàng)造動效。
?

5. SNABBT.JS

Snabbt.js 在創(chuàng)造動效這件事上，一直是以輕量和極簡而著稱的。它只有5kb 的大小，但是它能搞定平移、旋轉、傾斜、縮放等常見的動效效果，非常高效。
?

6. KUTE.JS

Kute.js 是一個純粹的動效引擎，擁有出色的性能。它可以兼容許多不同的瀏覽器，包括一些相對傳統(tǒng)的瀏覽器。它還具備許多插件，提供有效的運行環(huán)境。

7. VELOCITY.JS

Velocity.js 也同樣是一個動效引擎，乍一看可能沒啥太過突出的地方，然而它囊括了絕大多數(shù)常見的動效，比如變形、循環(huán)、滾動等，它足夠快速，且不依賴 jQuery。
?

8.?LAZY LINE PAINTER

你可以使用 Lazy Line Painter 輕松創(chuàng)建 SVG 路徑動效。你可以在AI中制作出SVG文檔，上傳到轉換器中。后者會幫你將它處理成為動效，生成jQuery 文檔。如有必要，你還可以編輯代碼進行微調(diào)。
?

9. SVG.JS

SVG.js 為你提供一個更加直觀的編輯SVG動效的環(huán)境。它足夠小巧，語法也簡單，并且提供統(tǒng)一的API。

10. ?MOTION UI

Motion UI 和前面的工具都不一樣，它是借助SASS 來創(chuàng)建有趣的CSS動效。其中包含了一整套預定義的特效，可以運用到不同的HTML組件當中去。除了IE9，其他瀏覽器都可用。
?

11. WAIT! ANIMATE

Wait! Animate讓你可以以更加輕松自如的方式來創(chuàng)造延時和等待的動效。通過調(diào)整控制面板上的參數(shù)，你可以創(chuàng)造出更加自然的效果。

12. DYNAMICS.JS

Dynamics.js 是一個JS庫，能為你提供9種標準的動效，你可以制定其中的持續(xù)時間、頻率、預期尺寸和強度等數(shù)據(jù)，創(chuàng)造出符合物理效果的動效。
?

13. CHOREOGRAPHER.JS

擁有了 Choreographer.js 之后你就不用再擔心搞不定復雜的動效了，這個JS 庫能夠通過自定義參數(shù)實現(xiàn)對復雜動效的設計。
?

14. ANIME.JS

這是一款強大的使用JS開發(fā)的動效庫，支持 CSS，DOM，SVG，和JS對象。

15. MO.JS

Mo.js 是一款完整的JS動效庫，目前它擁有一系列的預設參數(shù)，確保你能快速的上手使用。值得注意的是，Mo.JS 是模塊化的，你可以輕松移除不必要的功能，確保體量合理和流暢運行。
?

16.?SEQUENCE.JS

Sequence.js 是一個CSS驅(qū)動下的動效框架，用來構建基于步驟的響應式的動效。
?

17. SHIFTY

Shifty 是一款性能優(yōu)異，速度夠快且足夠靈活的補間動畫引擎，它是公認的 GreenSock 替代方案。

18.?IT’S TUESDAY

Tuesday 是一款獨立的動效庫，可以和其他的庫一起搭配使用，其中的動效大多以流暢和優(yōu)雅著稱，淡入淡出，擴展，收縮效果均是如此。

19. CSS ANIMATE

你可以使用 CSS Animate 作為測試和生成動效代碼的游樂場，任何常規(guī)動效都可以在這里幫你測試，設置好名稱、類、動效屬性、框架屬性以及時間軸和標記之后，最終能夠生成你想要的代碼和動效。

20. VIVUS.JS

VIVUS.JS 能夠給你帶來延時、同步和展現(xiàn)這三種類型的動效。而動效的核心還是借助SVG來實現(xiàn)。

21.?BONSAI.JS

Bonsai.js 是一個用來做高級圖形處理的JS庫，它有著非常簡單易用的API和SVG渲染器。
?

22. GSAP BY GREENSOCK

GSAP 是一個強大的動效平臺，用來創(chuàng)造專業(yè)的動效。它囊括了許多專業(yè)的插件和實用的工具。這些插件都包含在了其中：BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, 等.

?

23. POPMOTION

Popmotion 是另外一款源自于 Greensock 的輕量級的動效引擎。它可以完全控制每一幀的效果，先進的補間技術和色彩混合功能讓它能夠應對復雜的動效設計。
?

24.?TWEEN.JS

TWEEN.JS 是目前最強大的動效補間引擎，其中的參數(shù)控制系統(tǒng)足夠完善，讓你擁有絕佳的動效解決方案。
?

25. HOVER.CSS

Hover.css: 這是一組使用CSS3實現(xiàn)的懸浮特效，它可以應用到按鈕、鏈接、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。
?

26. TRANSIT

Transit 的功能其實并不多，但是它涵蓋了完善的2D轉3D的動效的功能。
?

27.?ROCKET

Rocket 提供的是物體從一個點運動到另外一個點的動效解決方案，包括8個特殊的效果，讓你的動效足夠可愛有趣。
?

28. ANIMO.JS

Animo.js 是一款輕量級的動效處理工具，它還支持額外的插件來實現(xiàn)倒計時、旋轉等不同樣式的動效，借助額外的支持庫，幫你實現(xiàn)預期的動效。
?

29. SHIFT.CSS

Shift.css 是一個用來構建自適應元素動效的框架。
?

30. CSSHAKE

CSShake 中包含了11類不同的可控動效屬性，包括方向（水平、上下），類型（固定、瘋狂），強度（強、弱）等等，讓你可以全方位控制動效的特征。

?

31.?SAFFRON

如果你喜歡 mixin 來輕松控制動效，那么Saffron 肯定會讓你愛不釋手。它是使用Sass來編寫，可以更方便地設置參數(shù)和變量。
?

32. CSSYNTH

CSSynth 是一個輕量級的動效編輯器，讓你可以更輕松地設置同步或者延遲效果，然后可以下載相應的CSS或者SCSS代碼。

?

33. CEASER

Ceaser 是一款經(jīng)過時間考驗的動效工具，能夠生成經(jīng)典的動畫效果。

34.?MORF.JS

MORF.JS 中包含了超過40種預定義的動效，并且你可以根據(jù)自己的需要在它們基礎上進行自定義。
?

35. VOXEL.CSS

Voxel.css 是專門用來3D 渲染的工具，即使你是新手也能夠輕松掌握3D CSS樣式。

【搞定動效，思路很重要】

1. 《這5個牢不可破的設計規(guī)則，是你打造優(yōu)秀動效的標準》
2. 《超全面！騰訊出品的交互微動效設計指南》
3. 《超實用！12 條提高產(chǎn)品可用性的動效設計原理（附案例）》
4. 《微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細節(jié)的？》

原文地址：webdesignerdepot
原文作者：Nataly Birch
優(yōu)設譯文：@陳子木

本文由優(yōu)設網(wǎng)原創(chuàng)翻譯，請尊重版權和譯者成果，轉摘請附上優(yōu)設鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com