推荐下免费好用功能强大的网页动画效果库,希望可以帮到你们

动效设计是2018年的热门之一,当你仔细找找,会发现许多有趣的用来构建UI动效的工具和素材,而这些素材和工具能使设计师和前端事半功倍。

今天的文章,我将会推荐11个开源动效库,帮你的设计加速。

1. GSAP

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

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

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

2. Anime.js

anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全。它的功能并不仅限于UI/UX动画的制作。

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

3. Wicked CSS

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

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

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

4. Animate CSS

Animate.css是最简单、最易用的 CSS 动画库之一。将动画库应用到你的项目中,就像链接 CSS 并且在 HTML 元素中添加所需的 CSS 类一样简单。。如果您愿意,还可以使用 jQuery 触发特定事件的动画

到 2017 年年中,它仍然是最流行、使用最广泛的CSS动画库之一。其压缩后的文件也非常小(16.6kb),也可以用于移动端网站。它在Github上拥有 4.2 万颗星,并且在许多大型项目中,它经常被打包成的一个组件。

Animate.css 在 4 年后仍然处于积极的发展阶段。这是最简单、最强大的动画库之一,我们可以毫不犹豫地在任何项目中使用它。

5. Tuesday

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

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

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

6. CSShake

当用户输入不正确的时,苹果就会震荡某个 UI 元素(对话框,模态或文本框)以响应,就好像模仿一个人摇头表示 “不” 。CSShake 提供了一系列有趣的震荡动画,并且在这个库中变化不大(愚人码头注:效果相近)。

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

换句话来说,就是 CSShake 所提供的动效其实是独一无二的。

7. Mo.js

mo.js是Oleg Solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。

Mo.JS 非常的庞大,而且它是完全为UI/UX设计而生的动效库。并且关于 Mo.js 有大量的文档和教程、代码操作并不复杂,了解之后就可以轻松掌握。

8. Animate Plus

animateplus(Animate Plus)是一个基于现在的网络的动画模块。Animate Plus是一个专注于性能和创作灵活性的JavaScript动画库。它的目标是提供稳定的60 FPS,重量小于2 KB(缩小和压缩),使其特别适合移动设备。

9. Bounce.js

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

Bounce.js是一个整齐的动画库,附有大约十个动画“预设”,因此图书馆的尺寸很小。和 animate.css 一样,动画流畅而完美。如果你的需求是 “pop and bubble(气泡和泡泡)” 样式的动画类型,并且希望降低文件大小的话 ,你可能想考虑使用这个库。

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

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

10. Magic

Magic Animations 是最令人印象深刻的动画库之一,它有许多不同的动画,其中有许多是该库独有的。与 Animate.css 一样,你只需导入 Magic 的 CSS 文件即可。你也可以在 jQuery 中使用动画。该项目还提供了一个非常酷的演示程序。

与 Animate.css 相比,Magic Animations 文件的大小适中。它的签名动画,如 magic 效果,foolish 效果和 bomb 效果非常有名。

如果你正在寻找一些不寻常的效果,我绝对会建议你在你的下一个项目中给这个动画库一个机会。肯定不会令你失望的。

11. Hover.css

Hover.css 是一个 CSS 动画库,专为你的网站中使用的按钮和其他UI元素而设计。它有非常好的 2D 转换,还有许多其他精心制作的动画

Hover.css 最适合用于页面中的小元素,例如按钮、Logo、SVG组件 或 要突显的图像,而不是更大、更复杂的页面动画。它有一个完整的动画案例列表,它的体积相对较大(但是,我仍然觉得这个体积可以更优化)。可以说,它最引人注目的动画效果是它独特的speech bubbles 和 curls 。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180304A0KHG200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券