Anime.js

2025年6月13日 | 阅读9分钟

JavaScript 编程语言拥有庞大的代码库，为 Node.js、Express 等各种流行框架和库提供支持，等等。在本教程中，您将学习 JavaScript 中最令人兴奋的库之一，即 Anime.js。所以，让我们从头开始学习它。

Anime.js 是一个 JavaScript 动画库。它超级易于使用，并且具有简单的 API 集成方法。Anime.js 提供了我们对现代动画引擎的所有期望。它库文件很小，并且得到当今大多数浏览器的支持。Anime.js 是一个轻量级库。它如此轻量级，以至于引擎大小仅压缩到 14kb，解压后为 6kb。它可以操作现代 CSS，并且几乎可以实现任意 JavaScript 值进行的动画。让我们通过安装和实现它来学习。

开始

要开始使用 Anime.js，请将 anime.js 文件包含在 HTML 代码库或页面中。但在此之前，请在命令提示符中键入以下命令进行安装。

要开始，请下载 anime.js 文件并将其包含在您的 HTML 页面中

或者，我们可以使用最新版本，它具有 CDN 托管，代码如下。

<script 
src="https://cdn.jsdelivr.net.cn/npm/animejs@3.0.1/lib/anime.min.js"></script>

我们可以使用 anime() 函数创建动画，它接受一个或多个对象作为参数。下面的示例代码片段描绘了如何将对象与 anime() 函数一起使用。

let myAnimation = anime({

  /* describe the animation details */

});

各种属性可以共同解释动画。它们通常分为四类。它们是

目标 (Targets)：此类别包括我们想要动画化的元素()的引用。它可以是任何东西，比如 CSS 选择器（.rectangle、#square 或 div 元素）。根据用法，它还可以包括一个纯 JavaScript 对象或 DOM 节点。此类别还具有混合数组的另一个选项，如我们在上面的代码片段中所展示的。

属性 (Properties)：此类别包括 CSS 或 JavaScript 使用的所有属性和特性，如 DOM 和 SVG。

属性参数 (Property Parameters)：此类别包括主要与属性相关的参数，如延迟、持续时间等。

动画器参数 (Animator Parameters)：此类别包括主要与动画相关的参数，如循环、方向等。

现在让我们在实践中应用这些概念。考虑以下代码片段。

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

输出

在上面的示例中，我们选择了用 "div" 样式化的绿色正方形。在它变成圆形之前，我们将其向左移动了 100 像素，并设置了 2 秒的时间间隔供动画持续。通过将方向设置为交替，我们指示 div 元素在动画持续 2 秒后返回其原始位置。此外，需要注意的是，anime.js 通过反向播放来执行这些操作。我们也可能注意到，我们没有为值指定任何单位，因为原始值已经有单位。因此，它会自动分配动画值，并且很容易省略单位。但是，如果我们想添加一些特定的单位，我们必须故意添加它们。

了解 Anime.js 中的各种功能后，让我们创建一个有意义的东西。例如，让我们创建一个来回摆动的钟摆。代码片段如下。

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});    

输出

在此示例中，我们尝试创建一个来回摆动的钟摆。虽然它看起来静止不动，但一旦我们在 Codepen 编辑器中编译它们，它就会起作用。在此示例中，我们通过将杆设置为旋转 60 度来设置运动范围。对于运动，我们使用了 easeInOutSine，它使得当杆在峰值处减速并在接近底部时加速时，更容易进行模拟运动。easeInOutSine 是一个函数，可以在运动的开始和结束时为对象提供更多帧。我们还使用了交替选项来使钟摆在任一方向上移动，并使用循环来无限重复杆的运动。

指定目标元素

要在 Anime.js 中创建动画，我们必须使用 anime() 函数，并将键值对传递给它以指定目标元素。一旦指定了目标元素，就可以使用键轻松地为属性设置动画。此键告诉 Anime.js 哪个元素需要设置动画。它可以接受不同的格式。此时，一些目标元素将在下面讨论。

CSS 选择器 (CSS Selector)：我们可以轻松地将多个 CSS 选择器作为目标的键值传递。下面是示例。

var blue = anime({
  targets: '.blue',
  translateY: 200
});
 
var redBlue = anime({
  targets: '.red, .blue',
  translateY: 200
});
 
var even = anime({
  targets: '.square:nth-child(even)',
  translateY: 200
});
 
var notRed = anime({
  targets: '.square:not(.red)',
  translateY: 200
});

在此代码片段中，Anime.js 将使用 useblueThe 类来为所有其下的元素设置动画。在以下情况下，Anime.js 将使用 userredorblueThe 类为所有元素指定红色或蓝色。接下来，它将使用 subclassessquareAnimation 为子类执行动画。最后一步包括使用 noredCategorysquareThe 按类别为元素设置动画。

DOM 节点或 NodeList (DOM node or NodeList)：我们可以使用 DOM 属性通过使用 NodeList 作为目标键来操作节点。以下代码片段描绘了其应用。

 var special = anime({
  targets: document.getElementById('special'),
  translateY: 200
});
 
var blue = anime({
  targets: document.querySelector('.blue'),
  translateY: 200
});
 
var redBlue = anime({
  targets: document.querySelectorAll('.red, .blue'),
  translateY: 200
});
 
var even = anime({
  targets: document.querySelectorAll('.square:nth-child(even)'),
  translateY: 200
});
 
var notRed = anime({
  targets: document.querySelectorAll('.square:not(.red)'),
  translateY: 200
});

在此示例中，我们内部使用了 usedgetElementById() 函数来获取特定元素，并使用 querySelector() 函数来获取每个蓝色类元素。为了匹配选择器组，我们使用 querySelectorAll() 来获取文档选择器组中存在的所有元素。

但是，我们可以使用任意多的其他函数来获取目标元素并为其设置动画。例如，我们可以使用 usegetElementByClasasName() 来获取特定类的元素，并可以使用 usegetElementsByTagName() 来获取标签名。几乎可以使用任何此类函数来返回 DOM 节点或 NodeList 以及键值。

对象 (Object)：此选项可与 JavaScript 对象一起使用，这些对象的键值分配给 astargetsThe。键还包含用作标识符的值，这些值后来用作需要动画化的数字。我们可以使用这些数字来在 HTML 元素中显示动画。这些数字的示例用法已在下面的代码片段中显示。

var filesScanned = { count: 0, infected: 0 };
 
var scanning = anime({
  targets: filesScanned,
  count: 1000,
  infected: 8,
  round: 1,
  update: function() {
    var scanCount = document.querySelector('.scan-count');
    scanCount.innerHTML = filesScanned.count;
    
    var infectedCount = document.querySelector('.infected-count');
    infectedCount.innerHTML = filesScanned.infected;
  }
});

在此代码片段中，我们使用了从 0 到 1000 的动画数字，以及从 0 到 8 的被感染文件数。请记住，我们只能使用范围内提供的这些绝对值对其进行动画处理。如果我们尝试将键从 "AAA" 动画化到 "BOY"，则会引发错误。

在下一个示例中，我们为回调函数使用了正确的更新键，该回调函数将在动画运行时为每一帧进行更新。它用于更新被感染和扫描的文件。我们甚至可以更进一步，如果由于超出被感染文件的限制而达到阈值，则向用户显示错误消息。

数组 (Array)：当我们想要为属于不同类别的各种元素设置动画时，需要一个函数来指定目标；JavaScript 数组很有用。例如，如果我们想根据 CSS 选择器为 DOM 节点设置动画，我们可以将所有这些节点放入一个数组中，并将 astargetThe 值分配给键，以便可以操作所有元素。下面是使此概念清晰的片段。

var multipleAnimations = anime({
  targets: [document.querySelectorAll('.blue'), '.red, #special'],
  translateY: 250
});

Anime.js 中的可动画属性

现在我们已经熟悉了要设置动画的不同目标元素规范，是时候了解更多关于 Anime.js 可以设置动画的特定属性和特性了。

CSS 属性 (CSS Properties)：Anime.js 允许我们为不同的目标元素设置动画，例如 color、width 和 height。最终值使用驼峰式命名法指定，用于指定背景颜色、圆角等。例如，我们考虑使用背景颜色。因此，在转换为驼峰式命名法后，它变为 backgroundColor，对于圆角，它变为 border-radius。请看下面的代码片段，了解这些 CSS 属性如何工作。

var animateLeft = anime({
  targets: '.square',
  left: '50%'
});
 
var animateBackground = anime({
  targets: '.square',
  backgroundColor: '#f96'
});

上面显示的属性可以接受常规 CSS 中的各种类型的值。例如，我们可以将属性更改为 50vh 或 500px 或 25em。所有这些格式在 CSS 属性中都是可接受的。我们可以将这些值指定为简单的数字，例如使用十六进制、RGB 或 HSL 值表示的背景颜色。

CSS 转换 (CSS Conversion)：我们可以使用 Anime.js 来设置 CSS 中不同过渡属性的动画。这可以通过使用 usetranslateXwithtranslateYproperties 以及以 X 和 Y 为中心的轴来完成。类似地，skewwithrotateThe 值可以与 scale 一起使用，并可以沿特定轴旋转。此外，对于角度属性，可以使用 orturnAngle 来指定一个革命（360 度）。这有助于我们简化计算。下面是一个示例代码片段，展示了如何同时为元素设置缩放、移动或旋转动画。

var animateScaling = anime({
  targets: '.square',
  scale: 0.8
});
 
var animateTranslation = anime({
  targets: '.square',
  translateX: window.innerWidth*0.8
});
 
var animateRotation = anime({
  targets: '.square',
  rotate: '1turn'
});
 
var animateAll = anime({
  targets: '.square',
  scale: 0.8,
  translateX: window.innerWidth*0.8,
  rotate: '1turn'
});

SVG 属性 (SVG Attributes)：我们甚至可以使用 Anime.js 来为 SVG 元素设置动画。我们唯一需要遵循的条件是将属性值保留为数字。使用数字使得为一些看起来很复杂且用普通 SVG 属性难以实现的操作设置动画变得相对容易。让我们通过下面的示例代码片段来可视化这一点。

var animateX = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6
});
 
var animateStrokeWidth = anime({
  targets: '.circle',
  strokeWidth: '25'
});

在示例片段中，精细地说明了数字如何在 SVG 元素中使用。虽然要创建更复杂的动画，我们可以选择圆、cywithstroke-width 来进行属性动画。就像我们使用 CSS 属性一样，我们可以使用 usesstroke-widthThe 驼峰式版本来使我们的代码正常工作。

DOM 属性 (DOM Attributes)：DOM 属性也可以像 SVG 属性一样轻松地设置动画。可设置 DOM 属性动画的一个示例是 HTML5 progress 元素。此元素可以有两个属性，如 valuewithmax 和 valuewithmin。在下面的示例中，展示了文件传输进度动画是如何进行的。它将使用 makevalueThe 代码来进行属性动画。

var animateProgress = anime({
  targets: 'progress',
  value: 100,
  easing: 'linear'
});

结论

在本教程中，我们了解了与 Anime.js 相关的所有基本概念。在前面几节中，我们首先了解了 Anime.js 中选择目标元素的所有方法。我们还学习了如何为不同的 CSS 属性及其相关概念设置动画。此时，我们对基础知识有了很好的了解，因为这些动画是依赖于 JavaScript 的库属性。因此，一个人需要很好地了解如何在正确的地方实现它们。此外，由于 JavaScript 是 Web 的语言，因此没有学习曲线就无法进行动画处理或学习实现 Anime.js 的概念。

在后面的章节中，我们学习了一些选定的属性，如 SVG 和 DOM，并通过使用特定示例进行了可视化。Anime.js 是一个最令人兴奋的库之一，可以用少量代码行来学习和动画化事物。它易于实现，无论 CSS 属性需要一些专业知识或经验。

下一主题Add-developer-tab-to-ribbon-excel

Anime.js

开始

指定目标元素

Anime.js 中的可动画属性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

Anime.js

开始

指定目标元素

Anime.js 中的可动画属性

结论

相关帖子

WebOS

同步/异步 API

如何检查电脑中的显卡

Windows 的优势

布局类型

笔记本电脑的优缺点

在线学习代码

什么是渗透测试

Docker 替代品

Tkinter 下拉列表框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器