要做动效?这75款动效工具让你无所不能(上)

动效这两年崛起非常之迅猛,几乎是网页设计领域最强大的设计趋势之一。无论是在设计师群体还是在用户当中,它的受欢迎程度都非常之高,大家都对它津津乐道。

从微妙的转场动效到覆盖整个页面的大范围动效,它几乎无处不在。动效的运用让网页中的元素逻辑变化关系清晰地表述出来,还将影视化的体验引入了进来。

本文下集《这75款动效工具让你无所不能(下)》

对于设计师而言,动效赋予了设计足够的可能性。无论是纯粹的装饰,还是简化界面,阐述逻辑,还是增加用户体验,动效都能帮到你。今天,我们要为你提供75个不同的动效设计工具,它们有的是插件,有的是代码库,合理的运用它们,能帮你搞定各式各样的动效。
 

1. ANIMATE.CSS

要做动效?这75款动效工具让你无所不能(上)

Animate.css 是一个跨浏览器的动效基础库,是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效,一应俱全。
 

2. MAGIC ANIMATIONS

要做动效?这75款动效工具让你无所不能(上)

Magic Animations 专注于为网页带来独特的视觉效果。虽然其中涵盖的类型不够丰富,但是带来的体验足够优秀。
 

3. BOUNCE.JS

要做动效?这75款动效工具让你无所不能(上)

这是一个用来创造弹跳特效的库,它的动效主要是通过CSS3和一些预设来实现的。你可以通过 npm ,bower 来安装JS库,简单的复制生成的CSS3代码来应用动效。
 

4. ANIJS

要做动效?这75款动效工具让你无所不能(上)

AnijS 让你能够通过 if、on、do、to 等简单的命令更加直观地处理动效。有趣的地方在于,它还能用来控制前面 Animate.css 来创造动效。
 

5. SNABBT.JS

要做动效?这75款动效工具让你无所不能(上)

Snabbt.js 在创造动效这件事上,一直是以轻量和极简而著称的。它只有5kb 的大小,但是它能搞定平移、旋转、倾斜、缩放等常见的动效效果,非常高效。
 

6. KUTE.JS

要做动效?这75款动效工具让你无所不能(上)

Kute.js 是一个纯粹的动效引擎,拥有出色的性能。它可以兼容许多不同的浏览器,包括一些相对传统的浏览器。它还具备许多插件,提供有效的运行环境。

7. VELOCITY.JS

要做动效?这75款动效工具让你无所不能(上)

Velocity.js 也同样是一个动效引擎,乍一看可能没啥太过突出的地方,然而它囊括了绝大多数常见的动效,比如变形、循环、滚动等,它足够快速,且不依赖 jQuery。
 

8. LAZY LINE PAINTER

要做动效?这75款动效工具让你无所不能(上)

你可以使用 Lazy Line Painter 轻松创建 SVG 路径动效。你可以在AI中制作出SVG文档,上传到转换器中。后者会帮你将它处理成为动效,生成jQuery 文档。如有必要,你还可以编辑代码进行微调。
 

9. SVG.JS

要做动效?这75款动效工具让你无所不能(上)

SVG.js 为你提供一个更加直观的编辑SVG动效的环境。它足够小巧,语法也简单,并且提供统一的API。

10.  MOTION UI

要做动效?这75款动效工具让你无所不能(上)

Motion UI 和前面的工具都不一样,它是借助SASS 来创建有趣的CSS动效。其中包含了一整套预定义的特效,可以运用到不同的HTML组件当中去。除了IE9,其他浏览器都可用。
 

11. WAIT! ANIMATE

要做动效?这75款动效工具让你无所不能(上)

Wait! Animate让你可以以更加轻松自如的方式来创造延时和等待的动效。通过调整控制面板上的参数,你可以创造出更加自然的效果。

12. DYNAMICS.JS

要做动效?这75款动效工具让你无所不能(上)

Dynamics.js 是一个JS库,能为你提供9种标准的动效,你可以制定其中的持续时间、频率、预期尺寸和强度等数据,创造出符合物理效果的动效。
 

13. CHOREOGRAPHER.JS

要做动效?这75款动效工具让你无所不能(上)

拥有了 Choreographer.js 之后你就不用再担心搞不定复杂的动效了,这个JS 库能够通过自定义参数实现对复杂动效的设计。
 

14. ANIME.JS

要做动效?这75款动效工具让你无所不能(上)

这是一款强大的使用JS开发的动效库,支持 CSS,DOM,SVG,和JS对象。

15. MO.JS

要做动效?这75款动效工具让你无所不能(上)

Mo.js 是一款完整的JS动效库,目前它拥有一系列的预设参数,确保你能快速的上手使用。值得注意的是,Mo.JS 是模块化的,你可以轻松移除不必要的功能,确保体量合理和流畅运行。
 

16. SEQUENCE.JS

要做动效?这75款动效工具让你无所不能(上)

Sequence.js 是一个CSS驱动下的动效框架,用来构建基于步骤的响应式的动效。
 

17. SHIFTY

要做动效?这75款动效工具让你无所不能(上)

Shifty 是一款性能优异,速度够快且足够灵活的补间动画引擎,它是公认的 GreenSock 替代方案。

18. IT’S TUESDAY

要做动效?这75款动效工具让你无所不能(上)

Tuesday 是一款独立的动效库,可以和其他的库一起搭配使用,其中的动效大多以流畅和优雅著称,淡入淡出,扩展,收缩效果均是如此。

19. CSS ANIMATE

要做动效?这75款动效工具让你无所不能(上)

你可以使用 CSS Animate 作为测试和生成动效代码的游乐场,任何常规动效都可以在这里帮你测试,设置好名称、类、动效属性、框架属性以及时间轴和标记之后,最终能够生成你想要的代码和动效。

20. VIVUS.JS

要做动效?这75款动效工具让你无所不能(上)

VIVUS.JS 能够给你带来延时、同步和展现这三种类型的动效。而动效的核心还是借助SVG来实现。

21. BONSAI.JS

要做动效?这75款动效工具让你无所不能(上)

Bonsai.js 是一个用来做高级图形处理的JS库,它有着非常简单易用的API和SVG渲染器。
 

22. GSAP BY GREENSOCK

要做动效?这75款动效工具让你无所不能(上)

GSAP 是一个强大的动效平台,用来创造专业的动效。它囊括了许多专业的插件和实用的工具。这些插件都包含在了其中:BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, 等.

 

23. POPMOTION

要做动效?这75款动效工具让你无所不能(上)

Popmotion 是另外一款源自于 Greensock 的轻量级的动效引擎。它可以完全控制每一帧的效果,先进的补间技术和色彩混合功能让它能够应对复杂的动效设计。
 

24. TWEEN.JS

要做动效?这75款动效工具让你无所不能(上)

TWEEN.JS 是目前最强大的动效补间引擎,其中的参数控制系统足够完善,让你拥有绝佳的动效解决方案。
 

25. HOVER.CSS

要做动效?这75款动效工具让你无所不能(上)

Hover.css: 这是一组使用CSS3实现的悬浮特效,它可以应用到按钮、链接、LOGO、SVG、图片等元素上。它还提供了CSS、Sass和Less的版本。
 

26. TRANSIT

要做动效?这75款动效工具让你无所不能(上)

Transit 的功能其实并不多,但是它涵盖了完善的2D转3D的动效的功能。
 

27. ROCKET

要做动效?这75款动效工具让你无所不能(上)

Rocket 提供的是物体从一个点运动到另外一个点的动效解决方案,包括8个特殊的效果,让你的动效足够可爱有趣。
 

28. ANIMO.JS

要做动效?这75款动效工具让你无所不能(上)

Animo.js 是一款轻量级的动效处理工具,它还支持额外的插件来实现倒计时、旋转等不同样式的动效,借助额外的支持库,帮你实现预期的动效。
 

29. SHIFT.CSS

要做动效?这75款动效工具让你无所不能(上)

Shift.css 是一个用来构建自适应元素动效的框架。
 

30. CSSHAKE

要做动效?这75款动效工具让你无所不能(上)

CSShake 中包含了11类不同的可控动效属性,包括方向(水平、上下),类型(固定、疯狂),强度(强、弱)等等,让你可以全方位控制动效的特征。

 

31. SAFFRON

要做动效?这75款动效工具让你无所不能(上)

如果你喜欢 mixin 来轻松控制动效,那么Saffron 肯定会让你爱不释手。它是使用Sass来编写,可以更方便地设置参数和变量。
 

32. CSSYNTH

要做动效?这75款动效工具让你无所不能(上)

CSSynth 是一个轻量级的动效编辑器,让你可以更轻松地设置同步或者延迟效果,然后可以下载相应的CSS或者SCSS代码。

 

33. CEASER

要做动效?这75款动效工具让你无所不能(上)

Ceaser 是一款经过时间考验的动效工具,能够生成经典的动画效果。

34. MORF.JS

要做动效?这75款动效工具让你无所不能(上)

MORF.JS 中包含了超过40种预定义的动效,并且你可以根据自己的需要在它们基础上进行自定义。
 

35. VOXEL.CSS

要做动效?这75款动效工具让你无所不能(上)

Voxel.css 是专门用来3D 渲染的工具,即使你是新手也能够轻松掌握3D CSS样式。

【搞定动效,思路很重要】

  1. 《这5个牢不可破的设计规则,是你打造优秀动效的标准》
  2. 《超全面!腾讯出品的交互微动效设计指南》
  3. 《超实用!12 条提高产品可用性的动效设计原理(附案例)》
  4. 《微交互是如何塑造优质的产品细节的?》

原文地址:webdesignerdepot
原文作者:Nataly Birch
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 87
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。