使用Anime.js，第1部分：目标和属性的基于JavaScript的动画

Anime.js，一个轻量级的基于JavaScript的动画库，可用于网页上CSS属性、SVG或DOM属性的动画制作。该库允许您控制动画的各个方面，并提供多种方法来指定目标元素或要设置动画的属性。

您可以完全控制动画播放的顺序，以及不同元素动画的同步方式。该库支持所有现代浏览器。

本教程系列将引导您学习Anime.js的所有功能，以便您可以轻松地将它们应用于实际项目。

在深入探讨主题之前，让我们先安装该库。您可以使用npm或Bower通过运行以下命令来安装：

npm install animejs
bower install animejs

您也可以下载该库并将其包含在您的项目中，或者直接链接到托管在CDN上的最新版本库。

安装成功后，您就可以使用此库为元素添加有趣的动画了。我们将从库的基础知识开始，一次关注一个特定领域。

指定目标元素

要使用Anime.js创建任何动画，您必须调用NodeList。

您还可以使用DOM节点或NodeList作为span标签的值。到目前为止，我们通过在HTML中手动创建一个包装器来实现这一点。现在，我们将学习如何让JavaScript处理标记。这是我们的标题元素：

<h1 id="Have-a-Great-Day-Ahead">Have a Great Day Ahead</h1>

标题中有五个单独的单词，我们将每个单词都包装在它自己的span标签中。然后将最终结果赋值给span标签，其值应为零。这是我们用来设置标题样式的CSS，以及将h1 span作为选择器。translateY属性的最终值。我们还在动画初始化中使用了交错延迟。您将在本系列的下一个教程中学习有关Anime.js中交错的更多信息。

这是一个CodePen演示，展示了我们刚刚创建的问候动画。点击Greet Me按钮重新启动动画。

总结

在本教程中，您学习了在Anime.js中选择目标元素的所有方法，以及如何设置与目标元素相关的不同CSS属性和属性的动画。但是，此时我们并没有控制与实际动画相关的任何内容。

在本系列的下一个教程中，您将学习如何控制不同属性的动画的缓动、延迟和持续时间（作为组以及单独控制）。然后，您将学习如何控制各个元素的所有这些动画参数。

以上是使用Anime.js，第1部分：目标和属性的基于JavaScript的动画的详细内容。更多信息请关注PHP中文网其他相关文章！