Animation.js简介

Animation.js是一个轻量级的JavaScript库，拥有直观、高效的API。它可以使用JavaScript对象、CSS和DOM元素进行操作，同时也很容易上手。

传统上，我们通过逐渐修改元素的样式来创建动画。虽然JavaScript可以实现这样的动作，但甚至最简单的动画开发起来也很困难且耗时。

Animation.js通过提供各种工具简化了动画制作过程。它能够调节时序和用户输入，并支持多个动画同时在同一个对象上运行。

大多数流行的浏览器也支持Animation.js。

安装Animation.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基本语法中的每个术语。

目标

目标是我们希望进行动画操作的组件的引用，可以是HTML标签、类别或ID元素的形式，可以是任何CSS选择器、单个DOM节点或DOM节点数组，也可以是通过JavaScript创建的具有至少一个数值属性和由前三种值中任意组合组成的数组。

属性

在指定目标后，我们在后面提及要进行动画的属性。这些属性可以包括可以进行动画处理的CSS、JS和SVG属性。

属性参数

属性参数包括在很大程度上影响动画的时间性质的方面。这些属性参数包括持续时间、延迟、结束延迟、缓动、舍入和许多其他参数。

动画参数

动画参数控制动画的前后操作。这包括与动画相关的方向、循环和自动播放的选项。

控制

为了使动画具有交互性，Anime.js还提供了控制工具。这里有一些示例技巧：开始、暂停、反向和重新开始。

示例

在这个示例中，我们将创建一些具有特定宽度和高度的div元素。通过一些CSS，我们将添加特定的背景颜色。在JavaScript部分，我们将首先在anime函数中添加所有所需的内容，然后传递具有属性的对象。

在涵盖所有内容后，现在我们有了要在所需元素上进行动画处理的主要目标，这里是div块。在这种情况下，我们将使用translateX向x轴方向从初始位置移动。

<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库添加到我们的代码中。在body中，首先我们定义了一个div元素，我们将在其上实现动画。然后在script标签内，我们定义了所需的动画类型，即给定绿色块从其位置移动到另一个位置，并在一定时间内改变块的大小。

示例

在之前的示例中，我们定义了一个方框，并将其动画化以增加其高度和宽度，现在我们将改变高度和宽度，但增加宽度并减小高度。

<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库添加到我们的代码中。在body中，我们首先定义了要实现动画的div元素。然后在script标签中，我们定义了所需的动画类型，也就是给定绿色块从其位置移动到另一个位置的运动，持续一段定义好的时间，同时还会改变块的大小，即减小高度并增加宽度的大小。

示例

在这个示例中，我们将使用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代码的主要结构，然后使用head中的’src’标签将anime.js库添加到我们的代码中。在body中，我们首先定义了要实现动画的div元素。然后在script标签内，我们定义了所需的动画类型，即给定蓝色框在三秒钟或3000毫秒内移动到蓝色圆圈的动作。

结论

在本教程中，我们详细讨论了anime.js，并提供了示例。Anime.js是一个轻量级的JavaScript库，具有简单而有效的API。它可以与JavaScript对象、CSS和DOM元素一起使用，同时Anime.js也易于使用。传统上，我们通过逐渐修改元素的样式来创建动画。虽然JavaScript可以实现这样的动作，但即使是最简单的动画也很难且耗时。