让你的网页动起来！必须让前端知道的10个网页动效库

Hello guys! 

Welcome to Superyeah's Study Room. 

Sit down, and have fun!

随着互联网的发展，网页设计也愈发丰富多彩，近年来动效设计的强势崛起，使静态网页已经不能满足用户的体验。虽然设计师们已经掌握了制作动效的基本技能，但在网页中只依靠设计师输出的GIF动画，仍然不能完善用户与界面的交互体验，那么这就要求前端小哥也得掌握动效应用能力了。

最近叶哥刚完成几个网页设计项目，所以整理了一波前端动效库资源，现在把我亲测好用的10个动效库分享给大家。

1、Anime.js

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

点击Documentation，查看animejs的动效组件说明文档；点击Codepen，进入anime的动效库，查看可编辑的动效演示和示例。

2、Animate.css

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

叶哥用到的很多基础动效都是来自这里，这个库还有一个很大的特点是：它的入场效果几乎都对应有出场效果，所以要让你的网页动起来，实现滚动操作动效可逆的话，这个库是非常酷的哦，哈哈哈。

3、Popmotion

这是一款用于UI界面的JavaScript动画库，包含了四个强大的开源工具：pose、popmotion、stylefire和framesync，他们的具体功能我已经使用浏览器翻译并帮大家截图下来了。

可以跟你的前端小哥一起研究研究。

4、AniJS

号称“无需编码即可提升网页设计的图书馆”，AnijS 让你能够通过 if、on、do、to 等简单的命令更加直观地处理动效。有趣的地方在于，它还能用来控制前面 Animate.css 来创造动效。

它的弹性动画十分可爱，可直接用于网页设计和UI设计中的动效案例也非常丰富。

（案例请滑到网站下方查看哦，如图）

5、Dynamics.js

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

6、CSShake

这是一个疯狂摇动的动效库，来感受一下，哈哈哈。

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

7、Bounce.js

bounce.js是为数不多的可以直接在浏览器中进行设计和设置的动画库之一，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器，只需添加一个组件，选择预设，然后你就可以得到CSS 代码了。

8、It's Tuesday.

（这是翻译后的界面，原文为英文）

正如它自己所说：“一个古怪的CSS动画库。”，里面的动效都比较“冷淡”，不像前面给大家推荐的很多库拥有可爱的弹性动效。不过萝卜青菜各有所爱，万一哪天你就需要用到这种风格呢？

△ 接下来分享两个SVG动效库 △

9、Lazy Line Painter

一个用于SVG路径动画的JQUERY插件，你可以使用它轻松创建SVG路径动效。你只需要在AI中输出SVG文档，上传到转换器中，它就能帮你将它处理成为动效，生成jQuery 文档。你还可以编辑代码进行微调。

10、Vivus.js

Vivus是一个轻量级的JavaScript动效库，跟Lazy Line Painter一样，它也是创建SVG路径动画的，里面有各种不同的动画可供选择，以及创建自定义脚本的选项，可以以你喜欢的任何方式绘制SVG。

Vivus的动画类型有延迟、同步和依次绘制三种，还有定时功能，制作的SVG路径动画让人印象深刻。

以上就是叶哥亲测过的免费、强大、开箱即用的前端动效库了。很感谢这些伟大的工程师将自己的库开源，让我们能够更好更快地完成设计和开发，致敬。

觉得只有10个动效库还不够过瘾？想要了解更多，可以点击这里，里面有75个由国外设计师整理的不错的动效库。那如果你想看中文版呢，叶哥推荐大家在优设上面搜索：要做动效？这75款动效工具让你无所不能。

工具虽多，但也要选择最适合自己的，上面10个动效库叶哥已经先让我的前端小哥帮大家体验过了，如果你觉得这篇文章有用，别忘记给叶哥点赞哦！

（我知道很多人一定对叶哥录制GIF的软件很感兴趣，那么下次的文章我就给大家安利一下）

微信公众号：叶设计的自习室