数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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 基本语法的每个术语。
目标
目标包含对我们希望进行动画处理的组件的引用，可以是 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 库添加到我们的代码中。在主体中，我们首先定义了要实现动画的 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 可以实现此类移动，但即使是最简单的动画也难以开发且耗时。
1K+ 次浏览
