火星网校
要做动效？这75款工具让你无所不能！（下）
发布时间：2018-11-17 19:57:24
这个动效工具合集真的是够长啊！上半部分《要做动效？这75款动效工具让你无所不能（上）》中已经为你推荐了35款，剩下的40款工具就在下面：
36、REPAINTLESS.CSS
Repaintless.css使用FLIP技术让动画更加平滑。虽然它还有提升的空间，但是对于注重性能和表现力的设计师而言，Repaintless.css的效果已经非常不错了。
37、MIXITUP
MixItUp同样也是一个非常实用的库，用来创造漂亮的顾虑、排序、插入等界面的动态效果。无需其他组件支持，并且提供足够优秀的性能。
38、WALLOP
Wallop的效果和它的名字一样，会以一种具有冲击力的方式来展示和隐藏某个UI对象。它的潜力很大，你还可以借助它创造更加有趣的东西。
39、RAMJET
Ramjet能够帮你制作从一个元素变化为另外一个元素的动效，它能作用于DOM元素、SVG、静态和动态的图片。
40、JQUERY DRAWSVG
基于强大的jQuery引擎，jQuery Drawsvg能够有效地会之处SVG内的所有路径，制作出戏剧性的动效。
41、ANIMATIC.JS
Animatic.js是一款强大的跨浏览器的动效解决方案，它集成了物理运动规则，引入了CSS转换、3D转换和JS来实现功能。它的主要特色在于帮你减少一次生成多个不同对象所耗费的时间精力。
42、MOVE.JS
Move.js是一个简单的工具，帮你创建缩放、倾斜、移动等常规的动效。
43、EG.JS
EG.JS是一组精心组合搭配的动态元素合集，旨在强化界面中的交互，有8个强大的组件帮你理清基本的任务。
44、GFX
GFX是一个引人瞩目的3D动效库，它能以变成的方式来构建CSS3动画。它可以和jQuery一起使用，输出你所需要的效果。
45、STYLIE
Stylie是一款有趣的工具，其中内置的4个选项卡分辨用来控制关键帧、缓动、导出、HTML，让你轻松搞定动效。
46、ICONATE.JS
Iconate.js能够让你的转场动效更加富有生命力，产生更加愉悦的效果。它可以同Font Awesome 联动，还能同 Glyphicons甚至你的自制图标搭配起来使用。
47、ANIMATEMATE
AnimateMate是一款运用于Sketch的小型动效生成和导出工具，它并不花哨，能够帮你掌控关键帧、添加缓动功能，控制序列，等等。
48、CAAT
CAAT（Canvas Advanced Animation Toolkit）是一款同JS协同的优秀框架，集合了场景、渲染技术、剪辑蒙板和标准行为包等组件。
49、GRANIM.JS
Granim.js是一款小型的JS库，通过生成渐变的动效来帮你创造有趣的视觉效果。
50、ANIMISTA
Animista中包含了一系列常规与非常规的预定义的CSS动效，你可以在其中测试各种动效的效果，并且根据需求调整其中的参数。
51、OBNOXIOUS.CSS
Obnoxious.css涵盖了5种基于CSS的动效，能够让特定的元素摇摆，扭曲，放大，频闪，也能让字体字重自动变化。
52、ANIMATELO
Animatelo包含了从强大的Animate.css借来的大量的醒目的动态效果，而实现方式则比后者更加便捷。
53、FOXHOLDER
Foxholder是一组包含15款漂亮的动效的合集，这些动效主要用来改善用户和表单交互的体验。每种动效的效果各不相同，有的能够增加边框亮度，有的能够强化视觉线索，等等。
54、RHYTHM.JS
Rhythm.js能够为你带来有趣的迪斯科风的动效，它能够营造出类似舞蹈的视觉效果。
55. COLORIDO.JS
Colorido.js和Granim.js非常相似，这款基于JS的插件被创造出来操控色彩相关的素材的。它能够动态地控制色调和不透明度的，不论是背景、文本、线条还是段落都在它的控制范畴以内。
56、BARBA.JS
Barba.js利用PJAX（基于Ajax技术）来减轻用户在动效刷新时候的错位感，让容器在悄无声息之间切换。
57、SCROLLREVEAL.JS
ScrollReveal.js是一款用来创建滚动动效的流行工具。通过其中的main reveal()可以轻松管理不同的动效。它的优秀之处不止于此，它在移动端和桌面端上的效果同样流畅。
58、SCROLLANIM
相比于前面的许多工具，Scrollanim更简单也更容易控制。它支持CSS3，但是同样也允许使用JavaScript API来添加动效。
59、SCROLLTRIGGER
这个工具是用来构建横向滚动的网站页面的，它允许使用相当简单的语法在X轴上构建漂亮的CSS3动画效果。
60、FORCE.JS
Force.js并没有其他动效工具中繁复多样的选项，它只包含一些基本的、实用的动效设置选项，帮你创造微妙的动效。
61、AOS
AOS这个工具的全成为Animate on Scroll，它包含了一系列有滚动事件触发的漂亮的预定义动效。
62、RELLAX
Rellax是为了漂亮的视差滚动而生的，它是一个轻量级的Vanilla JavaScript库，可以帮你的界面添加有趣的3D效果。
63、TILT.JS
Tilt.js能够产生令人着迷的倾斜视差效果，相当于是在2D的界面中模拟出3D的倾斜效果。
64、TRANSFORM-WHEN
如果你想通过网页来讲述故事，Transform-when是一个非常不错的解决方案，它主要帮你控制时间和滚动位置两个因素，帮你精确控制用户浏览故事过程中的每一个动效的体验。
65、CSS3 ANIMATION
这是一个比较经典的CSS3动效控制工具，拥有实时预览功能。
66、CURVE.JS
Curve.js能够赋予线条以生命，让它们像波浪一样旋转“跳舞”。
67、ANIMATOR.JS
Animator.js是一款灵活、高效、轻量级的动效控制工具，能够管理关键帧和各种不同CSS动效的效果，最关键的是它是完全免费的。
68、CEL-ANIMATION
Cel-animation是一款SASS mixin，可以控制关键字，也能设置动态SVG和任何HTML 元素。
69、SCROLLISSIMO
Scrollismo是和Greensock联动的动效设计工具，可以创建出随着用户滚动时随之运动的动态对象。
70、JQCLOUDS
jqClouds是一个非常简单的动效插件，能在生成移动的云朵，用来填充页面。当然，你也可以将云替换成其他的东西。
71、COLOR ANIMATION
这个动效是用来生成动态色彩改变的工具，作用的对象可以是背景图片、边框、文本等元素，实际上只要是带有色彩属性的元素，它都能控制。
72、FLUBBER
如果你想让一个对象转变为另外一个对象的过程更加顺滑，那么你一定不要错过Flubber这个工具。不过它的缺陷在于，只能作用于2D的元素。
73、PARTICLES.JS
如果你喜欢粒子动效，那么你可以使用这款工具来生成粒子动效，你可以轻松控制粒子的色彩、数量、大小、透明度等元素。
74、3D LINES ANIMATION WITH THREE.JS
相比于上面功能完备的粒子动效工具，这只是一个小脚本，帮你的背景添加漂亮的粒子特效而已。可控的参数包括色彩、线条和不透明度。
75、THREE.JS
最后要推荐的是Three.js这个功能强大的数据库，许多令人难忘的网站背后都有着它的支持。
（本文转载自：优设网，原文地址：https://www.webdesignerdepot.com/2017/08/75-web-animation-tools-you-have-to-try/，原文作者：Nataly Birch，优设译文：@陈子木）
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
学习游戏开发班可以帮助游戏爱好者从零基础成为游戏开发专家，掌握全面的游戏开发技能。
-
火星时代教育为您提供专业的界面设计实战班，在实践中掌握界面设计的核心技巧和最新趋势，成为优秀的UI设计师。
-
了解UI交互设计培训的最佳选择，比较不同培训机构的优势和特点。
-
火星时代教育为您推荐专业的学影视后期培训机构，提供高质量的培训内容及资深导师指导，助您成为优秀的影视后期剪辑师或合成师。
-
火星时代教育是一家专注于交互设计培训的机构，为学员提供专业的交互设计培训课程，并帮助他们成为优秀的交互设计师。
-
本文章将介绍关于UE5智慧城市专业学习的重要性和火星时代教育的资讯。
