您现在的位置: 火星网 > 经验频道 > UI设计 > 基础入门 > 要做动效?这75款工具让你无所不能!(下)
  • 要做动效?这75款工具让你无所不能!(下)
  • 使用软件: Photoshop illustrator After Effects 点击: 1153
  • 选择: \ \
  • 发布时间:2017-08-15
  • 免责声明:火星网文章来源于作者原创或整理自互联网,仅为提供更多信息,不代表火星时代同意其观点或描述,版权归原作者所有,如需转载,请联系原作者并注明出处,如涉及作品内容、版权或其他问题,请及时与我们联系,我们将在第一时间予以更改或删除,感谢您的理解和包容!

       


这个动效工具合集真的是够长啊!上半部分《要做动效?这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,优设译文:@陈子木)

分享是一种态度 一句中肯的评价可能改变一个行业 一次用心的分享可能改变他人的一生
你的态度和观点将让我们的行业更强大

匿名用户

按Ctrl+Enter发送消息