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 属性。
属性参数
属性参数包括很大程度上影响动画时间的方面。该属性参数涵盖了多个特征参数，包括持续时间、延迟、结束延迟、缓动、回合等等。
UP简历
基于AI技术的免费在线简历制作工具
128 查看详情
动画参数
动画的前后动作由动画参数控制。这包括与动画相关的选项，包括方向、循环和自动播放。
控件
为了让动画具有交互性，Anime.js还提供了控制工具。以下是这些技术启动、暂停、反向和重新启动的一些示例。
示例
在此示例中，我们将创建一些具有特定宽度和高度尺寸的 div 元素。我们将使用一些 CSS 添加特定的背景颜色。首先在 JavaScript 部分，我们将在 Anime 函数中添加所有必需的内容，然后传递具有属性的对象
现在涵盖所有内容后，我们的主要目标是在所需元素（此处为 div 块）上进行动画处理。在本例中，我们将使用从初始位置向 x 轴移动的 translateX。
Introduction of Anime.Js
let animation = anime({ targets: "div", translateX: 150, easing: "linear", direction: "alternate", height: "100px", width: "100px", duration: 2300, loop: true, });
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在脚本标签内，我们定义了所需的动画类型，即给定绿色块在一段定义的时间内从其位置到另一个位置的运动，这也会改变块的大小。
示例
在前面的示例中，我们定义了一个框并对其进行动画处理以增加其高度和宽度，现在将更改高度和宽度，但增加宽度并减少高度。
Increasing the size of width and decreasing the size of height
let animation = anime({ targets: "div", translateX: 150, easing: "linear", direction: "alternate", height: "10px", width: "100px", });
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在脚本标签内，我们定义了所需的动画类型，即给定绿色块在一段定义的时间内从其位置到另一个位置的运动，这也会改变块的大小，即从降低高度到增加宽度的大小。
示例
在此示例中，我们将使用anime.js 库将矩形框动画化为圆形。我们将更改的持续时间设置为 3000 秒，并在循环下运行。让我们看看代码 –
More Animation by anime.js
Here we will do animation on the borderlet animation = anime({ targets: "div", easing: "easeInOutQuad", loop: true, duration: 3000, backgroundColor: "yellow", borderRadius: "110px", });
在上面的代码中，首先，我们定义了 HTML 代码的主要结构，然后使用代码头部的“src”标签将anime.js 库添加到我们的代码中。首先在正文中，我们定义了要在其上实现动画的 div 元素。然后在 script 标签内，我们定义了所需的动画类型，即给定的蓝色框在三秒或 3000 毫秒内移动到蓝色圆圈。
结论
在本教程中，我们通过示例详细讨论了anime.js。 Anime.js 是一个轻量级 JavaScript 库，具有简单、有效的 API。它可与 JavaScript 对象、CSS 和 DOM 元素配合使用，而且 Anime.js 也易于使用。传统上，我们通过逐渐修改元素的样式来制作动画。这样的动作可以通过 JavaScript 实现，但即使是最简单的动画开发起来也很困难且耗时。
以上就是Anime.js 简介的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/534268.html
微信扫一扫 
支付宝扫一扫 
