Anime.js 是一个轻量级 JavaScript 库，具有简单、有效的 API。它可与 JavaScript 对象、CSS 和 DOM 元素配合使用，而且 Anime.js 也易于使用。
传统上，我们通过逐渐修改元素的样式来制作动画。这样的动作可以通过 JavaScript 实现，但即使是最简单的动画开发起来也很困难且耗时。
Anime.js 通过提供各种工具使动画变得更容易。它提供了调节时间和用户输入的功能，并支持在同一对象上同时运行的许多动画。
大多数流行的浏览器也支持 Anime.js。
Anime.js 的安装部分
从下面提供的链接下载anime.min.js 文件后，您可以直接使用它 -
您可以通过搜索“anime.js CDN”并将其粘贴到脚本标记中来找到该链接
Anime.js 的基本语法
我们已经了解了如何安装anime.js及其基础知识，现在让我们转向anime.js的语法 -
let animation = anime ({
targets,
properties,
property parameters,
animation parameters,
});
在上面的语法中，我们使用Anime.js提供的anime()函数创建了一个动画，anime()函数接受一个JavaScript对象作为参数，其中包含我们动画的属性。
现在让我们详细讨论 Anime.js 基本语法的每个术语 -
目标
对我们希望设置动画的组件的引用包含在目标中，可以采用 HTML 标签、类或 id 元素的形式，无论 CSS 选择器、单个 DOM 节点或 DOM 节点数组、一个对象使用 JavaScript 创建，具有至少一个数字属性和由前三个值中的任意一个组成的数组。
属性
我们在提到目标后提到我们想要设置动画的属性。这些属性可以包括可进行动画处理的 CSS、JS 和 SVG 属性。
属性参数
属性参数包括很大程度上影响动画时间的方面。该属性参数涵盖了多个特征参数，包括持续时间、延迟、结束延迟、缓动、回合等等。
动画参数
动画的前后动作由动画参数控制。这包括与动画相关的选项，包括方向、循环和自动播放。
控件
为了让动画具有交互性，Anime.js还提供了控制工具。以下是这些技术启动、暂停、反向和重新启动的一些示例。
示例
在此示例中，我们将创建一些具有特定宽度和高度尺寸的 div 元素。我们将使用一些 CSS 添加特定的背景颜色。首先在 JavaScript 部分，我们将在 Anime 函数中添加所有必需的内容，然后传递具有属性的对象
现在涵盖所有内容后，我们的主要目标是在所需元素（此处为 div 块）上进行动画处理。在本例中，我们将使用从初始位置向 x 轴移动的 translateX。
Introduction of Anime.Js
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在脚本标签内，我们定义了所需的动画类型，即给定绿色块在一段定义的时间内从其位置到另一个位置的运动，这也会改变块的大小。
示例
在前面的示例中，我们定义了一个框并对其进行动画处理以增加其高度和宽度，现在将更改高度和宽度，但增加宽度并减少高度。
Increasing the size of width and decreasing the size of height
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在脚本标签内，我们定义了所需的动画类型，即给定绿色块在一段定义的时间内从其位置到另一个位置的运动，这也会改变块的大小，即从降低高度到增加宽度的大小。
示例
在此示例中，我们将使用anime.js 库将矩形框动画化为圆形。我们将更改的持续时间设置为 3000 秒，并在循环下运行。让我们看看代码 -
More Animation by anime.js
Here we will do animation on the border
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在 script 标签内，我们定义了所需的动画类型，即给定的蓝色框在三秒或 3000 毫秒内移动到蓝色圆圈。
结论
在本教程中，我们通过示例详细讨论了anime.js。 Anime.js 是一个轻量级 JavaScript 库，具有简单、有效的 API。它可与 JavaScript 对象、CSS 和 DOM 元素配合使用，而且 Anime.js 也易于使用。传统上，我们通过逐渐修改元素的样式来制作动画。这样的动作可以通过 JavaScript 实现，但即使是最简单的动画开发起来也很困难且耗时。
