创建优质动画的10个JavaScript库

1) Dynamics.js

Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS 和SVG属性的DOM（文本对象模型）元素，换句话说，Dynamics.js适用于所有JavaScript对象以及一系列其它的元素。目前，Dynamics.js常被用于设计交互式菜单栏、同步下拉菜单、加载器、按钮以及其它功能。这个库提供了可定制动画类型的各种基本选项，如频率、反弹力、旋转、摩擦、持续时间等等。

2) Cta.js

Cta.js 是用于在网页上创建动画元素“Action-to-Effect”路径的轻量级库。它常被用在tile-based应用程序的导航、模态窗口的打开、侧边栏上可点击的按钮等等。

3) Beep.js

Beep.js是一个通过使用WebAudio API创建基于网页的电子合成器的JavaScript库。它可以用于创建音乐或者设计和音乐相关的学习教程。

4) Rainyday.js

Rainyday.js是一个使用HTML5 canvas创建雨滴落在玻璃表面的出色效果的强大JavaScript库。它拥有一个集成了各种可自定义实现的动画组件的可扩展应用程序接口。

5) Iconate.js

Iconate.js是一个可将设计图标转化为流行动画元素的伟大资源。它拥有大量可供选择的字体、字形图标以及自定义图标集。

6) Dom-Animator.js

Dom-Animator.js是一个在DOM（文本对象模型）中可显示内容节点里ASCII动画的JavaScript库。

7) Famous

Famous 是用于设计流行动画的强大JavaScript库，它包含的基于事件的系统（event-based system）使得渲染平滑动画和过渡特效这类的更新转换工作变得非常简单。Famous还有一个可创建自定义动画和动画仿真的3D物理引擎，你可以做出包含在不同的重力、拖放和碰撞下的粒子或者3D物体的状态。

8) Bounce.js

Bounce.js 是一个在CSS 3的支持下能做出各种酷炫动画的JavaScript库。你可以设计不同的动画和运动效果，如自转、公转、来回运动、急加速等。

9) Snabbt.js

Snabbt.js是一个使用CSS3转换矩阵的轻量级JavaScript动画库。它的结构非常简单，支持各种过渡和运动效果的应用，如缩放、尺寸调整、扭曲、旋转等等。Snabbt.js还支持attention animation功能，这个功能在表单验证方面是非常有用的。

10) Rekapi

Rekapi是用于CSS动画关键帧动画以及DOM中JavaScript动画的高级avaScript库。在复杂动画的设计方面，Rekapi以其实用性被人们广为熟知。您可以使用Rekapi创建生动的饼图和曲线图、五彩纸屑、交互性时间线以及各种用户界面。

11. GSAP

 

GSAP 可能目前最炫酷的免费动画库之一了。它运行于纯粹的 JavaScript 之上，是目前最强健的动画资源库之一。

它符合 HTML5 的规范，并且和几乎所有的现代浏览器都能良好的协同，可以SVG、画布元素甚至 jQuery 对象良好地协同，诸如 EaselJS 这样的库也可以和 GSAP 联动。

如果你需要一个强大的网页动画库的话，GSAP绝对值得一看。

13. Anime.j

 

 

当我第一次看到Anime.js 这个库的时候，彻底被它迷住了。这玩意非常强大，功能并不仅限于UI/UX动画的制作。

你可以借助 Anime.js 将动画加持在LOGO、按钮、图像等各种各样的元素上。它支持各种常见的触发机制，比如点击、悬停、滑动，你可以借助它定义一系列的动画。

14. Wicked CSS

Wicked CSS 是一个相对更新一些的动效库，它主要是基于CSS代码的。Wicked CSS 借助 CSS3的特性，提供了一些堪称不可思议的特效。

在它的首页上，你会看到许多实时演示，你可以通过这些范例学会如何让对象进行旋转、翻转、划入等不同类型的动画效果。

有些动画效果很简单，但是它同样可以实现许多复杂而有趣的动画，这也是Wicked CSS 有意思的地方。

15. Animate CSS

 

也许 Animate.CSS 才是你想要的最终的网页动效解决方案。这个开源代码库是几年前发布的，但是时至今日它依然是最有用的动效代码库。

开发者 Daniel Eden 是这个项目的发起者，他以最简化的方式在网页上发布自定义的 CSS3动画，通过半年多时间的积累，构建出了一个完整的动画库，并且几乎可以应对绝大多数的项目。

项目主页上有大量的演示，GitHub上还有许多很棒的文档供你参考。

16. Tuesday

10个免费好用功能强大的网页动画效果库

Tuesday 所提供的动画最令人着迷的地方，是其中动画都非常的简单、有用。借助这个库，你可以有效的控制页面中元素的出现和消失的方式。

这些动画并不是那种炫酷屌炸天的，相反它们是非常微妙的，真正从美学和用户体验的层面提升整个页面的设计。

Tuesday 是纯粹的CSS代码，几乎可以和任何网站无缝地衔接起来。

17. CSShake

 

坦率的讲，我从来没有见过比 CSShake 更加奇怪或者有趣的 CSS库了。它所带来的动画效果非常的疯狂、独特，它并不一定适合每个网站。

换句话来说，就是 CSShake 所提供的动效其实是独一无二的，这也是为什么它会存在于这个列表当中。

18. Mo.js

10个免费好用功能强大的网页动画效果库

通过细节仔细对比了诸多的 JavaScript 库之后，不得不说 Mo.js 是最好的动效库之一。Mo.JS 非常的庞大，而且它是完全为UI/UX设计而生的动效库。

关于 Mo.js 有大量的文档和教程，它的代码操作并不复杂，了解之后就可以轻松掌握。

它有着许多令人惊叹的功能，无论是导航栏，还是LOGO或者其他复杂的元素，它都能够将他们合理的动画化。

 

19. Bounce.js

 

 

只需要点击几下，你就可以借助Bounce.js创造出强大的CSS3 和 JS动画了。

在主页上，你会找到一个模块化的自定义动画生成器，通过这种方式，Bounce.js 会帮你将特定的功能添加到你的页面上，无需添加额外的代码。

和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直接在浏览器中进行设计和设置的动画库之一。

20 Magic

Magic 可能是最有趣的动效库之一。它集合了许多基于CSS3的动画效果，并且带有许多在别的地方根本找不到的自定义样式。这是一个非常大的CSS3代码库合集，你也会在这里学会许多巧妙的动画设计技巧。