极客教程Anime.js简介
Anime.js是一个轻量级的JavaScript库，具有直接、有效的API。它的功能包括JavaScript对象、CSS和DOM元素，同时Anime.js也很容易使用。
传统上，我们通过逐渐修改一个元素的造型来制作动画。这样的动作在JavaScript中是可以实现的，但即使是最简单的动画，开发起来也是很困难和费时的。
Anime.js通过提供各种工具使动画更容易。它提供了调节时间和用户输入的功能，并支持在同一个对象上同时运行许多动画。
大多数流行的浏览器也支持Anime.js。
Anime.js的安装部分
- 你可以从下面提供的链接中下载anime.min.js文件后直接使用
<script src="./folder/subFolder/anime.min.js"></script>
- 你可以通过搜索 “anime.js CDN “找到这个链接，并将其粘贴到你的脚本标签中。
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Anime.js的基本语法
我们已经看到了如何安装anime.js和它的基础知识，现在让我们来看看anime.js的语法 —
let animation = anime ({
targets,
properties,
property parameters,
animation parameters,
});
在上面的语法中，我们使用Anime.js提供的anime()函数创建了一个动画，anime()函数接受一个JavaScript对象作为参数，其中包含了我们动画的属性。
现在我们来详细讨论一下Anime.js基本语法中的每一个术语–
targets
目标中包含了对我们希望制作动画的组件的引用，其形式可以是HTML标签、类或id元素、任何CSS选择器、单个DOM节点或DOM节点数组；用JavaScript创建的对象，至少有一个数字属性和由前三个值中的任何一个组成的数组。
properties
在提到目标之后，我们会提到我们想要动画化的属性。属性可以包括可以被动画化的CSS、JS和SVG属性。
属性参数
属性参数包括在很大程度上影响动画的时间的方面。这个属性参数涵盖了几个特性参数，包括持续时间、延迟、结束-延迟、缓和、圆形等等。
动画参数
动画的前后动作是由动画参数控制的。这包括与动画有关的选项，包括方向、循环和自动播放。
控制
为了使动画具有互动性，Anime.js进一步提供了控制工具。下面是这些技术的一些例子，开始、暂停、反转和重新开始。
例子
在这个例子中，我们将创建一些具有特定宽度和高度尺寸的div元素。使用一些CSS，我们将添加一个特定的背景颜色。在JavaScript部分，我们首先要在anime函数中添加所有需要的东西，然后传递具有这些属性的对象。
覆盖所有内容后，现在我们的主要目标是在所需元素上制作动画，也就是这里的div块。在这种情况下，我们将从初始位置向X轴方向使用translateX。
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>
Introduction of Anime.Js
</h2>
<div style="background: green;
height: 30px;
width: 50px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
easing: "linear",
direction: "alternate",
height: "100px",
width: "100px",
duration: 2300,
loop: true,
});
</script>
</body>
</html>
在上面的代码中，首先，我们定义了HTML代码的主要结构，然后我们使用代码头部的’src’标签将anime.js库添加到我们的代码。在正文中，我们首先定义了要实现动画的div元素。然后在脚本标签中，我们定义了我们需要的动画类型，即给定的绿色块从它的位置到另一个位置的运动，并在一定的时间内改变该块的大小。
例子
在前面的例子中，我们定义了一个盒子，并通过动画来增加它的高度和宽度，现在我们要改变它的高度和宽度，但是要增加宽度和减少高度。
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<h2>
Increasing the size of width and decreasing the size of height
</h2>
<div style="background: green;
height: 100px;
width: 10px;">
</div>
<script>
let animation = anime({
targets: "div",
translateX: 150,
easing: "linear",
direction: "alternate",
height: "10px",
width: "100px",
});
</script>
</body>
</html>
在上面的代码中，首先，我们定义了HTML代码的主要结构，然后我们使用代码头部的’src’标签将anime.js库添加到我们的代码。在正文中，我们首先定义了要实现动画的div元素。然后在脚本标签中，我们定义了我们需要的动画类型，即给定的绿色块从它的位置到另一个位置的运动，并在一定的时间内改变块的大小，即减少高度和增加宽度的大小。
例子
在这个例子中，我们将使用anime.js库将一个长方形的盒子变成一个圆形的动画。我们将设置变化的持续时间为3000秒，并在一个循环中运行。让我们看看代码 –
<html>
<head>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
<center>
<h1 style="color: red;">More Animation by anime.js</h1>
<b>
Here we will do animation on the border
</b>
<div style="background: blue;
width: 100px;
height: 100px;
padding-top: 10px; ">
</div>
</center>
<script>
let animation = anime({
targets: "div",
easing: "easeInOutQuad",
loop: true,
duration: 3000,
backgroundColor: "yellow",
borderRadius: "110px",
});
</script>
</body>
</html>
在上面的代码中，首先，我们定义了HTML代码的主要结构，然后我们使用代码头部的’src’标签将anime.js库添加到我们的代码。在正文中，我们首先定义了要实现动画的div元素。然后在脚本标签中，我们定义了我们所需要的动画类型，即在三秒或3000毫秒内将给定的蓝色盒子移动到一个蓝色圆圈。
总结
在本教程中，我们通过实例详细讨论了Anime.js。Anime.js是一个轻量级的JavaScript库，有一个简单有效的API。它的功能包括JavaScript对象、CSS和DOM元素，而且Anime.js很容易使用。传统上，我们通过逐渐修改一个元素的造型来制作动画。这样的动作用JavaScript就可以实现，但即使是最简单的动画，开发起来也很困难，而且很费时间。