前端网页设计在过去十年中经历了一场革命。在已故的顽皮中，我们大多数人仍在设计静态杂志布局。如今，我们正在构建具有数千个调整大小，协调，移动部件的“数字机器”。
很简单，优秀的UI设计师也需要成为伟大的动画师 – 对网络动画技术有扎实的理解。
请记住，我们从代码精通的UI设计师的角度来看待每个库，而不是“代码大师”开发人员。其中一些库是纯CSS。其他是JavaScript，但没有什么比基本的HTML / CSS理解更有用了。链接图书馆; 添加一个CSS类。
我们的9大动画库列表
Animate.css
Animate.css是最小和最易于使用的CSS动画库之一。将Animate库应用于项目就像链接CSS并将所需的CSS类添加到HTML元素一样简单。如果您愿意，还可以使用jQuery触发特定事件的动画。
- 创作者：丹尼尔伊登
- 发行日期：2013年
- 当前版本：
- 人气：
- 描述： “CSS动画的跨浏览器库。易于使用，简单易用。“
- 库大小： 47 kB
- GitHub：https：//github.com/daneden/animate.css
- 许可证：
在撰写本文时，它仍然是最受欢迎和广泛使用的CSS动画库之一，其缩小文件也足够小，可以包含在移动网站中。它在GitHub上有明星，并且经常被打包成许多大型项目的组件。
Animate.css仍在积极开发中。这是最简单，最强大的动画库之一，我们会毫不犹豫地在任何项目中使用它。
Bounce.js
Bounce.js是一个JavaScript动画库，专注于为您的网站提供一系列独特有趣，充满乐趣的“华纳兄弟式”动画。
- 创作者：Tictail
- 发布日期：2014年
- 当前版本：
- 人气：
- 描述：“立即创建漂亮的CSS3动力动画。”
- 库大小：16 kB
- GitHub：https：//github.com/tictail/bounce.js
- 许可证：
Bounce.js是一个整洁的动画库，附带了大约十个动画“预设” – 因此库的体积很小。与animate.css一样，动画流畅无瑕。如果您的需求以“pop和bubble”式动画类型为中心，并且可以从较低的文件大小开销中受益，您可能需要考虑使用此库。
AnimeJS
AnimeJS是我们列表中的最新成员，但自创建以来赢得了众多皈依者。它具有令人难以置信的多功能性和强大功能，并且不会为HTML游戏动画提供动力。唯一真正的问题是“ 简单的网络应用程序是否有点过分？”
也许。但由于它也快速，小巧且相对容易学习，因此很难找到它的错误。
AnimeJS被描述为一个轻量级JavaScript动画库，可以“ 与任何CSS属性，单个CSS转换，SVG或任何DOM属性以及JavaScript对象一起使用”。这真是太棒了 – 事实上，我所采取的GIF捕获对于动作的平滑和柔和是不公平的。
该项目可在GitHub上获得。
- 创作者：Julian Garnier
- 发布日期：2016年
- 当前版本：
- 人气：
- 描述：“JavaScript动画引擎”。
- 图书馆大小：10.9kB
- GitHub：https： //github.com/juliangarnier/anime
- 许可证：
最令人印象深刻的是，Anime.JS拥有令人惊叹的“文档”，可以在漂亮的应用程序环境中演示HTML，JavaScript代码和工作示例。
简而言之，如果您对JavaScript动画解决方案感到满意，则很难找到忽略Anime.JS的理由。
魔法动画
Magic Animations是一个令人印象深刻的动画库。它有许多不同的动画，其中许多是这个库非常独特的。与Animate.css一样，您只需导入CSS文件即可实现Magic。您还可以使用jQuery中的动画。该项目提供了一个特别酷的演示应用程序
- 当前版本：
- 人气：
- 描述：“具有特殊效果的CSS3动画”
- 库大小：36.5 kB
- GitHub：https：//github.com/miniMAC/magic
- 许可证：
与animate.css相比，Magic Animation的文件大小适中，并且以其标志性动画而闻名，例如魔法效果，愚蠢效果和炸弹效果。
如果你正在寻找一些与众不同的东西，我肯定会建议你在下一个项目中为这个动画库添加一个镜头。你不会失望的。
DynCSS
DynCSS是一个动画库，您可能希望在您的网站中使用动态库以及视差效果。要更清楚地了解使用此库可以执行的操作，请查看此演示。
- 创作者：Vittorio Zaccaria
- 发布日期：2014年
- 当前版本：
- 人气：
- 描述：“使用Dynamic CSS让您的网站变得生动。”
- GitHub：https：//github.com/vzaccaria/DynCSS
- 许可证：
DynCSS是一个没有大受欢迎的简单库，正如它在GitHub上的明星数量所证明的那样。但它仍然值得一看。这个库提供的一个很酷的功能是元素相对于滚动的旋转，Vittorio在DynCSS主页上精美地演示（这是视差相关页面的完美用例）。
CSShake
CSShake提供了它在盒子上所说的内容 – 一个专门用于在网页中抖动元素的CSS库。正如您所料，有许多变体可用于摇动您的Web组件。
- 当前版本：
- 人气：
- 库大小：78.8 kB
- GitHub：https：//github.com/elrumordelaluz/csshake
- 许可证：
当用户输入不正确的响应时，Apple推广了UI元素，大力摇动UI元素（对话框，模态或文本框） – 模仿一个人摇头。CSShake提供了一系列有趣的“摇动”动画，这个库中不乏变化。
虽然目前该库比DynCSS更受欢迎，但我觉得通常文件大小可能无法通过它添加的功能来证明。虽然动画很聪明，但我想不出很多用例，你不需要为非摇动效果包含第二个动画库。但也许我只是缺乏想象力？
Hover.css
Hover.css是一个CSS动画库，设计用于网站中的按钮和其他UI元素。它有非常好的2D过渡，以及许多其他精心设计的动画。
- 当前版本：
- 人气：
- 描述：“轻松应用于您自己的元素，修改或仅用于灵感。”
- 库大小：104.2 kB
- GitHub：https：//github.com/IanLunn/Hover
- 许可证：
Hover.css最适合动画离散页面元素，如按钮，徽标，SVG组件或特色图像，而不是更大，更复杂的页面动画。它有一个完整的例程列表，这说明它的尺寸相对较大（但是，我仍然认为尺寸可以更加优化）。可以说它最引人注目的动画效果是它独特的气泡和卷发。
Velocity.js
Velocity.js是另一个复杂的全功能JavaScript动画套件，包括Fade＆Slide，Scroll，Stop，Finish，Reverse等功能。
它拥有令人印象深刻的大牌用户名单，包括Tumblr，WhatsApp，MailChimp，Scribd，Gap和HTC，所以你知道它已经过对大型用户基础和奇怪边缘情况的战斗测试。
- 创作者：Julian Shapiro
- 发布日期：2014年
- 当前版本：
- 人气：
- 描述：“加速JavaScript动画。”
- 库大小：34.8 kB
- GitHub：https：//github.com/julianshapiro/velocity
- 许可证：
Velocity可能不适合某些人，因为它是一个JavaScript动画引擎，它实际上是一个使用与jQuery相同的API的动画引擎$.animate()。无论是否存在jQuery，这都有效。也就是说，它的速度非常快，其功能包括色彩动画，变换，循环和缓动。从本质上讲，它是jQuery和CSS转换相结合的最佳选择。
AniJS
我们的最终图书馆以其独特的方法而闻名。AniJS是一个动画库，允许您以简单的“类似句子”的结构向元素添加动画。采用以下格式：
如果点击，在广场，做摆动动画要 .container盒
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>如果你不熟悉JavaScript，这可能是进入JS编排运动的好方法。
- 创作者：anijs
- 发布日期：2014年
- 当前版本：
- 人气：
- 描述：“无需编码即可提升Web设计的库。”
- 库大小：10.5 kB
- GitHub：https：//github.com/anijs/anijs
- 许可证：
AniJS是一个具有非常合理的大小因素的库。与其他动画库（许多其他动画库可能会发现非常规动画库）相比，它用于实现的格式非常原始且不同。
不过，这个库值得为您的项目至少尝试一次。它可能缺乏一些竞争的整体力量和润色，但它有可能在未来增长。
你应该选择哪个图书馆？
有许多动画库已准备就绪，等待在您的项目中实施。上面列出的是一些具有最佳复杂性和稳定性的组合。
如果您正在寻找一个简单易用，强大的CSS解决方案，Animate.CSS可能是最通用的“bang-for-buck”选项。
如果您正在寻找更完整，更强大的JavaScript选项，VelocityJS和Anime.JS很难分割。Velocity目前拥有良好的记录和更大的安装基础，但Anime.JS令人难以置信的优雅和令人兴奋。现在，Anime.JS的精美文档可能足以赢得我们的支持。
虽然在Web应用程序中使用动画库肯定可以提高交互性，但是过度使用它会使目的失败并且经常使用户感到困惑。小心并明智地使用它们。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259358.html