火星网校
要做动效？这75款工具让你无所不能！（上）
发布时间：2018-11-17 19:57:24
动效这两年崛起非常之迅猛，几乎是网页设计领域最强大的设计趋势之一。无论是在设计师群体还是在用户当中，它的受欢迎程度都非常之高，大家都对它津津乐道。
从微妙的转场动效到覆盖整个页面的大范围动效，它几乎无处不在。动效的运用让网页中的元素逻辑变化关系清晰地表述出来，还将影视化的体验引入了进来。
对于设计师而言，动效赋予了设计足够的可能性。无论是纯粹的装饰，还是简化界面，阐述逻辑，还是增加用户体验，动效都能帮到你。今天，我们要为你提供75个不同的动效设计工具，它们有的是插件，有的是代码库，合理的运用它们，能帮你搞定各式各样的动效。
1、ANIMATE.CSS
Animate.css是一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。
2、MAGIC ANIMATIONS
Magic Animations专注于为网页带来独特的视觉效果。虽然其中涵盖的类型不够丰富，但是带来的体验足够优秀。
3、BOUNCE.JS
这是一个用来创造弹跳特效的库，它的动效主要是通过CSS3和一些预设来实现的。你可以通过npm，bower来安装JS库，简单的复制生成的CSS3代码来应用动效。
4、ANIJS
AnijS让你能够通过if、on、do、to等简单的命令更加直观地处理动效。有趣的地方在于，它还能用来控制前面Animate.css来创造动效。
5、SNABBT.JS
Snabbt.js在创造动效这件事上，一直是以轻量和极简而著称的。它只有5kb 的大小，但是它能搞定平移、旋转、倾斜、缩放等常见的动效效果，非常高效。
6、KUTE.JS
Kute.js是一个纯粹的动效引擎，拥有出色的性能。它可以兼容许多不同的浏览器，包括一些相对传统的浏览器。它还具备许多插件，提供有效的运行环境。
7、VELOCITY.JS
Velocity.js也同样是一个动效引擎，乍一看可能没啥太过突出的地方，然而它囊括了绝大多数常见的动效，比如变形、循环、滚动等，它足够快速，且不依赖jQuery。
8、LAZY LINE PAINTER
你可以使用Lazy Line Painter轻松创建SVG路径动效。你可以在AI中制作出SVG文档，上传到转换器中。后者会帮你将它处理成为动效，生成jQuery文档。如有必要，你还可以编辑代码进行微调。
9、SVG.JS
SVG.js为你提供一个更加直观的编辑SVG动效的环境。它足够小巧，语法也简单，并且提供统一的API。
10、MOTION UI
Motion UI和前面的工具都不一样，它是借助SASS来创建有趣的CSS动效。其中包含了一整套预定义的特效，可以运用到不同的HTML组件当中去。除了IE9，其他浏览器都可用。
11、WAIT! ANIMATE
Wait! Animate让你可以以更加轻松自如的方式来创造延时和等待的动效。通过调整控制面板上的参数，你可以创造出更加自然的效果。
12、DYNAMICS.JS
Dynamics.js是一个JS库，能为你提供9种标准的动效，你可以制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。
13、CHOREOGRAPHER.JS
拥有了Choreographer.js之后你就不用再担心搞不定复杂的动效了，这个JS库能够通过自定义参数实现对复杂动效的设计。
14、ANIME.JS
这是一款强大的使用JS开发的动效库，支持CSS、DOM、SVG和JS对象。
15、MO.JS
Mo.js是一款完整的JS动效库，目前它拥有一系列的预设参数，确保你能快速的上手使用。值得注意的是，Mo.JS是模块化的，你可以轻松移除不必要的功能，确保体量合理和流畅运行。
16、SEQUENCE.JS
Sequence.js是一个CSS驱动下的动效框架，用来构建基于步骤的响应式的动效。
17、SHIFTY
Shifty是一款性能优异，速度够快且足够灵活的补间动画引擎，它是公认的 GreenSock 替代方案。
18、IT’S TUESDAY
Tuesday是一款独立的动效库，可以和其他的库一起搭配使用，其中的动效大多以流畅和优雅著称，淡入淡出，扩展，收缩效果均是如此。
19、CSS ANIMATE
你可以使用CSS Animate作为测试和生成动效代码的游乐场，任何常规动效都可以在这里帮你测试，设置好名称、类、动效属性、框架属性以及时间轴和标记之后，最终能够生成你想要的代码和动效。
20、VIVUS.JS
VIVUS.JS能够给你带来延时、同步和展现这三种类型的动效。而动效的核心还是借助SVG来实现。
21、BONSAI.JS
Bonsai.js是一个用来做高级图形处理的JS库，它有着非常简单易用的API和SVG渲染器。
22、GSAP BY GREENSOCK
GSAP是一个强大的动效平台，用来创造专业的动效。它囊括了许多专业的插件和实用的工具。这些插件都包含在了其中：BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite等。
23、POPMOTION
Popmotion是另外一款源自于Greensock的轻量级的动效引擎。它可以完全控制每一帧的效果，先进的补间技术和色彩混合功能让它能够应对复杂的动效设计。
24、TWEEN.JS
TWEEN.JS是目前最强大的动效补间引擎，其中的参数控制系统足够完善，让你拥有绝佳的动效解决方案。
25、HOVER.CSS
Hover.css，这是一组使用CSS3实现的悬浮特效，它可以应用到按钮、链接、LOGO、SVG、图片等元素上。它还提供了CSS、Sass和Less的版本。
26、TRANSIT
Transit的功能其实并不多，但是它涵盖了完善的2D转3D的动效的功能。
27、ROCKET
Rocket提供的是物体从一个点运动到另外一个点的动效解决方案，包括8个特殊的效果，让你的动效足够可爱有趣。
28、ANIMO.JS
Animo.js是一款轻量级的动效处理工具，它还支持额外的插件来实现倒计时、旋转等不同样式的动效，借助额外的支持库，帮你实现预期的动效。
29、SHIFT.CSS
Shift.css是一个用来构建自适应元素动效的框架。
30、CSSHAKE
CSShake中包含了11类不同的可控动效属性，包括方向（水平、上下），类型（固定、疯狂），强度（强、弱）等等，让你可以全方位控制动效的特征。
31、SAFFRON
如果你喜欢mixin来轻松控制动效，那么Saffron肯定会让你爱不释手。它是使用Sass来编写，可以更方便地设置参数和变量。
32、CSSYNTH
CSSynth是一个轻量级的动效编辑器，让你可以更轻松地设置同步或者延迟效果，然后可以下载相应的CSS或者SCSS代码。
33、CEASER
Ceaser是一款经过时间考验的动效工具，能够生成经典的动画效果。
34、MORF.JS
MORF.JS中包含了超过40种预定义的动效，并且你可以根据自己的需要在它们基础上进行自定义。
35、VOXEL.CSS
Voxel.css是专门用来3D渲染的工具，即使你是新手也能够轻松掌握3D CSS样式。
（本文转载自：优设网，原文地址：https://www.webdesignerdepot.com/2017/08/75-web-animation-tools-you-have-to-try/，原文作者：Nataly Birch，优设译文：@陈子木）
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
春节之后大量抢人！这6个行业是转行首选，进去1年顶3年！火星毕业就能进
春节后求职，哪些行业进去能立马涨薪？打破信息差很关键！
-
还没毕业，就去帮电视台拍活动，作品被主任说“非常好”！猜猜是哪个专业呀？
-
回想过去，电子游戏里的草其实并不是真正的草。开发者们只是简单地把草的纹理直接贴在游戏关卡的地板上
-
在火星的就业指导老师那里，经常收到同学们这样、那样的提问。其中有一些共性问题，就业老师会根据自己丰富的经验，为同学们给出合适的回答。
-
电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
-
今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
