2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

内容简介：2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年，我们大多数人仍在设计静态杂志布局，在2017年，我们重新设计了数字机器，有成千上万的调整、协调、移动的部件。

简单的说， 很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的，帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库，最适合于UI设计，它们的优点和缺点，以及何时选择它们。

请记住，我们是从一个熟悉代码的UI设计师（而不是从代精通代码的开发人员）的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的，但是，除了了解基本的 HTML/CSS 之外，使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。

2017 年 9 大动画库列表

Animate.css

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

• 创建者: Daniel Eden
• 发布: 2013
• 当前版本:
• 受欢迎程度:
• 描述: “一个跨浏览器的 CSS 动画库。就像简单的东西一样容易使用。”
• 库大小: 43 kB
• GitHub: https://github.com/daneden/animate.css
• 许可证:

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

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

Bounce.js

Bounce.js 是一个 JavaScript 动画库，专注于为你的网站提供一种独特的有趣的、有弹性的、华纳兄弟式的动画。

• 创建者: Tictail
• 发布: 2014
• 当前版本:
• 受欢迎程度:
• 描述: “即刻创建漂亮的 CSS3 驱动的动画。”
• 库大小: 16 kB
• GitHub: https://github.com/tictail/bounce.js
• 许可证:

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

AnimeJS

AnimeJS 是我们榜单上唯一的新成，但自创作以来的12个月里，它赢得了众多的粉丝。它非常通用，功能强大，而且它也可以为 HTML 游戏动画提供动力。唯一真正的问题是，对于简单的 web 应用来说，它是否过度？

也许吧。但是，由于它的速度也很快，而且相对容易学习，所以很难找到它的缺点。

AnimeJS 被描述为一个轻量级的 JavaScript 动画库，可以与任何CSS属性、单独的 CSS transforms、SVG 或任何 DOM 属性以及 JavaScript 对象一起工作。它真的很棒 – 太棒了，事实上，我用 GIF 捕捉 下来的动画图无法对动作流畅和平滑做出公正的展示。

该项目可在 GitHub 上获得。

• 创建者: Julian Garnier
• 发布: 2016
• 当前版本:
• 受欢迎程度:
• 描述: “JavaScript 动画引擎。”
• 库大小: 16 kB
• GitHub: https://github.com/juliangarnier/anime
• 许可证:

最令人印象深刻的是，Anime.JS 有令人惊叹的“文档”，演示 HTML，JavaScript 代码 和在一个漂亮的应用环境中使用案例。

简而言之，如果您对 JavaScript 动画解决方案很满意，那么就很难找到忽略 Anime.JS 的理由。

Magic Animations

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

• 当前版本:
• 受欢迎程度:
• 描述: “具有特效的CSS3动画”
• 库大小: 36.5 kB
• GitHub: https://github.com/miniMAC/magic
• 许可证:

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

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

DynCSS

DynCSS 是一个视差效果的动画库，你可能喜欢在你的网站上使用这种效果。为了更清楚地了解如何使用这个库，看看这个 demo 。

• 创建者: Vittorio Zaccaria
• 发布: 2014
• 当前版本:
• 受欢迎程度:
• 描述: “使用动态 CSS 让你的网站活起来。”
• GitHub: https://github.com/vzaccaria/DynCSS
• 许可协议:

DynCSS 是一个简单的库，在不久的将来可能会变得流行起来，但是它现在是一个相当新的项目，正如它在GitHub上的星星数量所展示的那样。这个库提供的一个很酷的功能是当滚动时给元素添加旋转效果，Vittorio 在 DynCSS 主页上展示了精湛的效果(这为视差相关的页面提供了一个完美的用例)。

CSShake

CSShake 提供了一个专门用于在网页中震荡元素的 CSS 库。正如您所期望的那样，您可以使用多种不同的变化来对 web 组件进行震荡。

• 当前版本:
• 受欢迎程度:
• 库大小: 78.8 kB
• GitHub: https://github.com/elrumordelaluz/csshake
• 许可协议:

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

尽管目前，这个库比 DynCSS 更受欢迎，但我觉得可能因其增加了很多不必要的功能而使文件过大。虽然动画灵活的，但是我想不出太多的用例，在这些情况下，你仍然需要包含 DynCSS 动画库来进行非震荡的效果。

但也许只是我缺乏想象力？

Hover.css

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

• 当前版本:
• 受欢迎程度:
• 描述: “轻松应用于于自己的元素，修改或仅用于灵感。”
• 库大小: 104.2 kB
• GitHub: https://github.com/IanLunn/Hover
• 许可协议:

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

Velocity.js

Velocity.js 是另一种高级的、功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。

目前，它拥有一大批知名的公司用户，包括 Tumblr、WhatsApp、MailChimp、Scribd、Gap 和 HTC，因此你知道，这个类库已经经过了针对大型用户群和怪异边缘情况进行了测试。

• 创建者: Julian Shapiro
• 发布: 2014
• 最近更新:
• 受欢迎程度:
• 描述: “加速JavaScript动画。”
• 库大小: 34.8 kB
• GitHub: https://github.com/julianshapiro/velocity
• 许可证:

Velocity 可能并不适合某些人，因为它是一个 JavaScript 动画引擎，它实际上是一个使用与 jQuery 的 $.animate() 相同API的动画引擎。他既可以通过 jQuery 使用，也可以不通过 jQuery 使用。也就是说，它的速度非常快，它的特点包括 color animation, transforms, loops, easing – 从本质上来说，它是 jQuery 和 CSS transitions 最好组合。

AniJS

我们最后这个库独特的方法很有趣。 AniJS 是一个动画库，它允许你用简单的‘sentence-like’语句为元素添加动画。

采取以下格式：

最后这个库因其独特的方法而非常有趣。AniJS是一个动画库，允许你用下面的格式为元素添加动画效果：

Ifclick, On Square, Do wobble animated To .container-box

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

如果你对 JavaScript 不太熟悉，这可能是进入JS编排动作的好方法。

• 创建者: anijs
• 发布: 2014
• 最近更新:
• 受欢迎程度:
• 描述: “一个动画库，无需编码即可提升网页设计。”
• 库大小: 10.5 kB
• GitHub: https://github.com/anijs/anijs
• 许可证:

AniJS 是一个功能是很合理的库。与其他动画库相比，它用于实现的格式是相当原始和与众不同的（其他许多库可能会发现非常规的使用）。

尽管如此，这个库还是值得一试，至少在你的项目中可以尝试一下。它可能缺乏一些竞争对手的整体实力和光环，但它有潜力会在未来越来越强大。

愚人码头注：这里有一个 CSS3 动画集合项目，可以导出单个动画的 CSS3 样式，建议和 AniJS 配合使用。 AniCollection

你应该选哪个库？

有许多动画库已经准备就绪，等待在您的项目中实现。上面列出的是一些具有最佳和最稳定的几个。

如果您正在寻找一个简单易用的强大的 CSS 解决方案。 Animate.CSS 可能是最通用的、最适合使用的选项。

如果你正在寻找一个更完整、功能强大的JavaScript选项， VelocityJS 和 Anime.JS 不分伯仲。Velocity 目前拥有更多的动画实现 和 更大的使用量基础，但是对于 Anime.JS 这样一个新项目来说是令人难以置信的完美 和 令人激动的。目前，Anime.JS 美丽的文档可能足以赢得我们的青睐。

尽管在您的 web 应用程序中使用一个动画库可以提高交互性，但是过度使用它可能会违背用户的目的，并且经常使用户迷惑。请小心谨慎地使用它们。

你会在你的项目使用动画库吗？你最喜欢的动画库是哪个？欢迎评论留言告诉我们。

原文链接： https://www.sitepoint.com/our-top-9-animation-libraries/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Android Lottie动画库研究
• 基于animatge.css的js动画库
• UI设计师不容错过的六大动画库
• 2019年10个最受欢迎的JavaScript动画库！
• [译] 在项目中集成第三方动画库 —— 第二部分
• 2019年 值得收藏的 15 个 JavaScript 和 CSS 动画库

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。