Anime.js 简介-js教程-PHP中文网

首页

web前端

js教程

Anime.js 简介

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 pm 12:45 PM

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 块）上进行动画处理。在本例中，我们将使用从初始位置向 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>

示例

在此示例中，我们将使用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 id="More-Animation-by-anime-js">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 元素。然后在 script 标签内，我们定义了所需的动画类型，即给定的蓝色框在三秒或 3000 毫秒内移动到蓝色圆圈。

结论

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

以上是Anime.js 简介的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。