首页 > 建站资源 > 实用工具 > 做动效设计不用愁 75款动效工具一网打尽(一)!

做动效设计不用愁 75款动效工具一网打尽(一)!

时间:2017-08-09    来源:优设网

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

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

对于设计师而言,动效赋予了设计足够的可能性。无论是纯粹的装饰,还是简化界面,阐述逻辑,还是增加用户体验,动效都能帮到你。今天,我们要为你提供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种标准的动效,你可以制定其中的持续时间、频率、预期尺寸和强度等数据,创造出符合物理效果的动效。

相关推荐
做动效设计不用愁 75款动效工具一网打尽(二)!
谷歌图形化HTML5网页编辑器Google Web Designer下载
五个简单实用的在线做图网站推荐
十三个免费在线创建网站的工具
可在线无损压缩网页图片的工具
十四个可以优化、编辑、分析CSS的在线工具
十五个免费在线制作网站标志的工具
五款免费在线测试网站速度的工具
Sumo Paint:功能强大简单易用的免费在线图片处理工具
四款免费的在线CSS设计工具推荐
两款域名搜索和建议、域名生成工具
4个与网页制作相关的在线工具
四个免费的在线LOGO和徽章生成工具
四个免费网页设计相关的图片生成器推荐
实用的网站Web表单(包括WordPress插件)在线创建工具
分享三款免费的在线字体设计工具
免费的在线CSS3样式可视化生成工具介绍
优秀的WordPress主题编辑工具 — Stiqr
Web开发者必备的十大免费在线工具网站
50款超实用的免费在线工具 WEB开发必备(上)
50款超实用的免费在线工具 WEB开发必备(下)
六款CSS3在线免费代码生成器和调试工具
18款WEB开发常用的网站性能测试实用工具
8款Web开发人员常用的免费在线工具网站
40款超级实用的免费CSS在线工具
10个WEB开发者应该收藏的实用工具网站推荐
20款网页设计师和开发者必收藏的免费在线工具
在线生成站点地图SiteMap制作工具推荐
10个网页设计web开发常用的一些免费小工具推荐
16款Web开发超棒的在线工具分享
在线快速信息图表制作工具网Infogr推荐
20款网页前端开发必备的实用CSS在线工具推荐
checkmycolours:检测网站颜色对比度的在线web工具分享
8款实用的测试网站速度的免费工具推荐

精彩推荐

热门教程