anime.js 动画_Anime.js –轻量级JavaScript动画库

网络动画已经走了很长一段路。 开发人员不仅可以使用CSS / SVG / JS组合制作任何动画，而且还提供数十个免费库来节省时间。

我的最爱之一是Anime.js ，这是一个完全免费的开源JavaScript动画库 。

这个库可以做到 。 它基于JavaScript构建，但也非常依赖CSS动画 。 您可以通过DOM定位单个页面元素，甚至定位自定义SVG 。

所有文档都是自托管在GitHub上的 ，因此您可能需要滚动才能找到所需的内容。 但是每个动画功能都带有一些参数，例如延迟，持续时间和缓动。

请注意，该库没有很多默认动画样式。 Anime.js是为希望在不编写冗长代码的情况下自定义动画的开发人员制作的。

有关实际示例 ，请查看下面的Codepen笔 。 代码非常简单，但是您会得到一个逼真的动画，同时具有壁球和拉伸效果以及预期 ，这都是动画的基本原理。

一个合理的警告：Anime.js库非常密集 。 创建自定义动画并不难，但是您确实需要了解一些基础知识，例如缓动以及回调和选项的通用JavaScript语法。

但是，您需要的所有信息都在回购页面上 ，其中包括大量代码示例和详细的文档表 。 而且，您可以浏览打开的错误报告或查看浏览器支持，该支持当前包括所有主流浏览器和IE 10+ 。

这很容易成为Web开发人员的最佳动画库之一，它应该是任何复杂Web动画的首选解决方案。

要看到一堆活生生的实例 ，看看这个集合托管在CodePen Anime.js演示。 在下面，我嵌入了我最喜欢的内容 ， 该内容从零开始就使整个徽标具有生气勃勃的效果。

翻译自: https://www.hongkiat.com/blog/anime-js-animation-library/