UI设计师不应错过的6个动画库通过范式转变，该领域已经从以前静态的类似杂志的布局演变为如今具有数千个可调整大小、可移动部件的“数字机器”。可以说，一个优秀的用户界面（UI）设计师可以在一小时内“变身”为具有丰富Web动画技术经验的专业动画人员。这一次，让我们从一个非常精明的UI设计师，而不是一个“苛求代码质量”的开发者的角度来研究一些动画库。其中一些是用纯CSS（CascadingStyleSheets，层叠样式表）编写的，而另一些则是用JavaScript实现的。幸运的是，除了基本的HTML/CSS之外，它们不需要您掌握更多的基础知识。您可以轻松地在自己的代码中链接或添加这些CSS类。1.Bounce.jsBounce.js，这个工具可以通过JS库生成漂亮的CSS3关键帧动画（keyframeanimations）。使用他们网站上提供的工具，您可以生成一些静态关键帧，您可以开箱即用，而无需添加任何额外的JavaScript。当然，如果你想在你的移动应用中快速生成它的相关代码，你可以直接使用Bounce.js库（地址：https://github.com/tictail/bounce.js）。2.Animate.cssAnimate.css是一个基于CSS的动画库。不仅使用方便，还可以集成到各种使用CSS的项目中。例如，您可以在WordPress或Drupal中使用它，它们是用PHP语言编写的开源内容管理框架。要使用它，您必须通过CSS样式表链接到库。完成后，您可以使用库本身提供的CSS类来为HTML元素设置动画。同时，由于它本身只有43kb，所以该库可以支持并更适合jQuery（一种快速简洁的JavaScript框架）的运行。另外，它是一个跨浏览器库，因此它不会限制您使用的浏览器类型。我们在这里推荐这个插件是因为它在这个领域被社区广泛接受。因此，该插件将不时“打磨”并能够支持其他类型的库。此外，由于其开发热情不减，对各种解决方案具有很强的兼容性。3.MagicAnimationsMagicAnimations是我们强烈推荐的另一个CSS动画库。令人印象深刻的是，它不仅以自己的方式呈现，而且还与其他动画库（如animate.css）结合使用。所以MagicAnimations在功能和性能方面是最好的。此外，它还附带一个很棒的演示程序，您可以在下载前观看和体验。或许能为你目前的项目和工作带来更好的灵感和想法。通过使用这个动画库，您可以创建绚丽的动画效果，包括twisterInDown、swap、fadeout以及更多特效。同时还支持静态和透视效果。所以总的来说，是一个值得UI设计师尝试的动画库。4.AnimeJS与上面列出的其他动画库相比，AnimeJS是一个相对较新的JS库。虽然一开始只是小规模发行，但很快就流行起来。AnimeJS有完整的封装和动画库，是大多数常见项目的最佳选择。同时，因为它的全面性和“庞大性”，如果你是搭建一个轻量级的网站，我们推荐你使用其他的动画库。AnimeJS相对容易使用。由于它是一个JavaScript库，您可以让它与DOM中的元素交互并流畅地为它们制作动画。同时还可以实现CSS的过渡效果和SVG的各种动画效果。AnimeJS的另一个关键特性是它有很好的文档记录。UI设计师可以通过试用“解锁”它的更多新功能。5.CSSShakeCSSShake是一个CSS动画库，专注于摇动元素的特效。通过使用这个动画库，您可以在整个项目中创建具有不同效果的flutter元素。例如：当用户没有输入正确的密码，或试图进行系统不允许的操作时，您可以为指定的项目或场景添加摇动动画效果。该特效最初由苹果公司的应用产品推出，现在已广泛应用于大多数其他公司的产品中。CSSshake的唯一缺点是它的文件大小，高达78.8kb。6.Velocity.js我们在这里列出的最后一个动画库是Velocity.js。它于2014年发布，拥有功能齐全的动画库，可以帮助您实现包括滚动、完成、停止和返回在内的大量操作效果。此外，一些知名公司，如WhatsApp、Gap、MailChimp（一种通过电子邮件订阅RSS的在线工具）等，都在他们的项目中使用了Velocity.js。它不仅运行速度快，而且提供了丰富的功能和效果。原标题：2018年UI设计师的六大优秀动画库，作者：MiteshPatel
