精通 Anime.js 中的动画速度：全局与局部速度控制的综合分析

引言

在构建引人入胜的用户体验时，动画的时序和速度至关重要。动画不仅关乎元素的移动，更在于其运动的 质感。虽然 Anime.js 使得创建动画变得轻而易举，但要达到专业级水准，就必须精通其时序控制系统，特别是全局速度与实例特定速度之间的相互作用。开发者们常常对 engine.speed、playbackRate 参数以及实例的 .speed 属性之间的区别感到困惑。

本报告将对 Anime.js 的速度控制系统进行详尽的分析。报告内容将涵盖核心引擎、全局控制、局部控制、它们之间的相互作用、底层力学原理，以及诸如 Web Animations API (WAAPI) 集成和性能等高级议题。本指南旨在服务于那些希望超越基础动画制作，深入理解该库时序引擎架构的开发者。

---

1. Anime.js 的心脏：动画引擎

要理解 speed 如何工作，首先必须了解其作用的上下文——Anime.js 的核心动画引擎。

引擎作为中央计时器

engine 模块是驱动所有 Animation、Timer 和 Timeline 实例同步运行的核心 1。它确保所有动画都以协调的方式进行。该引擎的主动画循环由 

window.requestAnimationFrame() (rAF) 驱动 3。

rAF 是浏览器原生的 API，经过优化以与显示器的刷新率同步，这避免了使用 setInterval 可能导致的无效渲染周期，并确保了更平滑的动画效果 4。

理解增量时间（Delta Time）

deltaTime 指的是自上一帧以来所经过的时间 7。这是引擎中时间推进的基本单位。引擎的主循环在每一“滴答”（tick）时计算这个值。任何动画的核心逻辑都是在每一帧上将其内部时钟推进 

deltaTime 的长度。engine 模块的属性明确包含了 deltaTime，这证实了它在引擎状态中的核心、可读地位 7。

通过 engine.update() 进行手动引擎控制

Anime.js 的默认 rAF 循环可以通过设置 engine.useDefaultMainLoop = false 来禁用 9。如此一来，开发者便可以利用 

engine.update() 方法，传入自定义的时间值来手动“驱动”引擎。这对于将 Anime.js 集成到其他渲染循环中至关重要，例如 Three.js、PixiJS 或其他游戏引擎 9。官方文档提供了一个清晰的示例，展示了如何在 Three.js 的 

renderer.setAnimationLoop(render) 回调中使用 engine.update()，完美地演示了这种集成模式 9。

engine.update() 的存在揭示了 Anime.js 引擎并非一个“黑匣子”，而是一个可控、可插拔的系统。这种架构选择使其能够成为任何数值属性的通用补间动画引擎，而不仅仅局限于 DOM 元素。当与 Three.js 等外部渲染循环集成时，Anime.js 交出了“计时器”的控制权，但保留了“补间逻辑”的控制权。这种关注点分离的模式意味着 Anime.js 可以像处理 DOM div 一样轻松地处理 Three.js Mesh 对象的属性动画，因为引擎的根本作用是基于时间插值的数字计算器。这是它与仅限 CSS 的解决方案相比的一个显著优势。

---

2. 使用 engine.speed 进行全局播放控制

engine.speed 是一个全局乘数，它会影响所有由 JavaScript 引擎管理的动画、计时器和时间线 7。

engine.speed 的定义

该属性接受一个大于等于 0 的数字。值为 1 代表正常速度，大于 1 则加速，介于 0 和 1 之间则减速，而 0 则会有效地冻结所有动画 12。值得注意的是，在 Anime.js v3 及更早版本中，此功能通过 

anime.speed 访问。从 v4 开始，它被正确地归入 engine 模块的命名空间下，即 engine.speed 13。对于正在迁移项目或参考旧版教程的开发者来说，这是一个关键的变更点。

实践用例

engine.speed 的主要用途是创建全局效果，如慢动作或快进，这在调试或实现特定的用户控制功能时非常有用 12。官方文档提供了一个极佳的示例，将一个范围滑块（range slider）的输入值绑定到 

engine.speed，从而允许用户交互式地控制数百个粒子动画的速度 12。这完美地展示了其预期的应用场景。

除了面向用户的功能，engine.speed 还是一个宝贵的调试工具。通过全局性地减慢所有动画（例如，engine.speed = 0.25），开发者可以更轻松地审视复杂的时间线交互、交错延迟（staggering offsets）以及在正常速度下难以察觉的缓动曲线行为。虽然浏览器开发工具允许减慢 CSS 动画，但它们缺乏对 JavaScript 动画库的原生直接控制 15。

engine.speed 在库的生态系统内提供了这种控制能力，极大地提升了开发和调试复杂动画序列的效率。

代码示例：交互式全局速度控制器

以下代码基于官方文档示例，展示了如何构建一个全局速度控制器。

HTML

HTML

JavaScript

JavaScript

import { engine, animate, utils } from 'animejs';

const container = document.querySelector('.container');
const rangeSlider = document.querySelector('.range');

// 创建多个独立的动画实例
for (let i = 0; i < 100; i++) {
  const particle = document.createElement('div');
  particle.classList.add('particle');
  container.appendChild(particle);
  animate({
    targets: particle,
    translateX: utils.random(-200, 200) + 'px',
    translateY: utils.random(-200, 200) + 'px',
    scale: [{ from: 0, to: 1 }, { to: 0 }],
    duration: utils.random(1000, 3000),
    delay: utils.random(0, 500),
    loop: true,
    easing: 'easeInOutQuad',
  });
}

// 将滑块的输入事件绑定到 engine.speed
rangeSlider.addEventListener('input', function() {
  // 使用 utils.sync 确保在 rAF 循环内更新，防止布局抖动
  utils.sync(() => {
    engine.speed = this.value;
  });
});

在这个例子中，只需一行核心代码 engine.speed = this.value; 即可控制页面上所有独立的动画实例，无需单独引用它们中的任何一个。utils.sync() 的使用确保了属性更新与浏览器的渲染周期同步，这是一种避免布局抖动的最佳实践 16。

---

3. 使用 playbackRate 和 .speed 属性进行实例级控制

与全局的 engine.speed 相对的是实例级的速度控制，它提供了更精细的调节能力。

playbackRate 参数

playbackRate 是在创建 animate、createTimeline 或 createTimer 实例时传入的一个参数 16。它为该特定实例设置了 

初始 的速度乘数，默认值为 1 16。在 

animate、createTimer 和 createTimeline 的文档中，playbackRate 都被列在其“播放设置”之下 1。

.speed 实例属性

动画实例创建后，可以通过设置其 .speed 属性在运行时动态地改变其速度 16。这提供了对单个动画的实时、精细控制，而不会影响全局的 

engine.speed 或其他正在运行的动画。文档明确指出：“这个值可以在之后通过 animation.speed =.5 来修改” 16。

playbackRate 的代码示例也通过一个滑块来动态更新 animation.speed，证实了这是进行运行时更改的正确方法 16。

实例速度的独立控制能力对于创建响应式和交互式用户界面至关重要。engine.speed 用于全局效果，而 instance.speed 则允许动画对特定的用户交互作出反应。例如，一个动画的速度可以与用户在该元素上鼠标移动的速度相关联，或者一个进度条动画可以在下载接近完成时加速。这种能力使得 UI 能够感觉上与用户的输入直接相连，而不仅仅是被动触发。

代码示例：独立的速度控制

这个例子展示了如何同时使用全局和局部速度控制器。

HTML

HTML

Global Speed

Square A Speed

Square B Speed

JavaScript

JavaScript

import { animate, engine } from 'animejs';

const animA = animate({
  targets: '.square-a',
  translateX: 250,
  loop: true,
  alternate: true,
  easing: 'linear',
  playbackRate: 1, // 初始速度为 1x
});

const animB = animate({
  targets: '.square-b',
  translateX: 250,
  loop: true,
  alternate: true,
  easing: 'linear',
  playbackRate: 0.5, // 初始速度为 0.5x
});

document.querySelector('#global-speed').oninput = function() {
  engine.speed = this.value;
};

document.querySelector('#speed-a').oninput = function() {
  animA.speed = this.value;
};

document.querySelector('#speed-b').oninput = function() {
  animB.speed = this.value;
};

这个例子直观地展示了速度控制的层级结构。用户可以看到每个动画以各自的速率运行，而全局滑块则按比例影响所有动画。

---

4. 速度的层级：优先级与相互作用

为了精确地预测和控制动画行为，理解全局和局部速度设置如何协同工作至关重要。

乘法关系

一个基于 JavaScript 的动画的最终有效播放速度是全局 engine.speed 和实例自身 .speed 的乘积。

EffectiveSpeed=engine.speed×instance.speed

这意味着这些控制是分层应用的。实例的速度是相对于引擎主时钟速度而言的。

通过 engine.defaults 设置全局默认值

值得注意的是，所有新动画的 默认初始 playbackRate 可以通过 engine.defaults.playbackRate 进行全局设置 19。这与 

engine.speed 不同，后者是一个实时乘数，而 engine.defaults 是一个配置时设置。这个功能对于在整个应用程序中创建设计系统或保持一致的动画“感觉”非常关键，无需在每次动画调用中重复 playbackRate 参数 20。

表格：预测动画速度

下表作为一个快速参考指南，消除了关于速度设置如何相互作用的模糊性。它将乘法层级的抽象概念转化为具体、可预测的结果。

engine.speed (全局乘数)	playbackRate (实例初始速度)	instance.speed (实例运行时速度)	最终有效速度	行为描述
1 (默认)	1 (默认)	1 (默认)	1x	正常速度
0.5	1	1	0.5x	全局慢动作
2.0	1	1	2.0x	全局快进
1	2.0	2.0	2.0x	实例以双倍速度运行
0.5	2.0	2.0	1.0x	全局慢动作被局部快进抵消
2.0	0.5	0.5	1.0x	全局快进被局部慢动作抵消
1	1	0.5 (运行时改变)	0.5x	实例被动态减速

---

5. 引擎底层：更新机制的剖析

深入理解 engine.pause() 和 engine.speed = 0 之间的功能差异，对于构建健壮的动画控制逻辑至关重要。

engine.pause() vs. engine.speed = 0

• engine.pause(): 此方法会停止整个 requestAnimationFrame 循环。引擎的 update() 函数将不再被调用。没有动画逻辑会运行，也没有回调函数（如 onUpdate）会被触发。这有效地冻结了整个动画系统，并将 CPU 资源消耗降至最低 22。

• engine.speed = 0: 此设置 不会 停止 rAF 循环。引擎在每一帧都会继续“滴答”。然而，用于推进动画的 deltaTime 会乘以 engine.speed (0)，导致时间前进为零。因此，动画在视觉上是冻结的，但 onUpdate回调函数仍会在每一帧被触发 12。

实践意义与使用场景

• 当需要完全停止动画以节省系统资源时，应使用 engine.pause()。例如，当浏览器标签页被隐藏（此功能由 pauseOnDocumentHidden 参数自动处理）或用户明确暂停一个类似游戏的界面时 22。

• 当需要冻结动画的视觉状态，但仍需通过 onUpdate 回调与显示刷新率同步运行逻辑时，应使用 engine.speed = 0。这是一个相对小众的用例，可能适用于复杂的状态同步场景，其中其他非 Anime.js 的元素也需要在每一帧进行更新。

这种差异揭示了动画状态管理的一个关键方面。pause() 改变了引擎的 状态（从“运行中”到“暂停”），而 .speed = 0 只是在“运行中”状态下改变了一个 属性。一个暂停的动画可以通过 .resume() 从其停止的地方继续 24。而一个速度为 0 的动画已经在“播放”中，要使其再次运动，必须将其 

.speed 设置为非零值。因此，一个具有单一“播放/暂停”按钮的 UI 必须清晰地管理这种状态。如果按钮使用 engine.pause()，那么再次点击应调用 engine.resume()。如果它设置 engine.speed = 0，那么再次点击应设置 engine.speed = 1。混淆这些概念将导致控件失灵。

---

6. 高级应用与跨 API 注意事项

WAAPI 问题：engine.speed 是否影响 waapi.animate()？

基于 Anime.js 的架构，engine.speed 不应 影响通过 waapi.animate() 创建的动画。waapi.animate 将动画的控制权交给了浏览器原生的 Web Animations API 26。这些动画可以在一个独立的合成器线程（compositor thread）上运行，完全独立于 Anime.js 引擎 

rAF 循环所在的 JavaScript 主线程 28。

engine.speed 参数修改的是 JS 循环内的 deltaTime，而合成器线程对此值一无所知。

这意味着，如果开发者希望在一个同时使用 animate() 和 waapi.animate() 的页面上实现全局慢动作效果，他们必须管理两个独立的速度控制系统。他们需要设置 engine.speed 来控制 JS 动画，并需要遍历所有活动的 WAAPI 动画（通过 element.getAnimations()）来设置它们各自的 playbackRate 属性 30。这是一个重要的架构考量。

对比分析：GSAP 的 timeScale

Anime.js 的 engine.speed 与 GSAP 的 gsap.globalTimeline.timeScale() 概念上类似，都充当全局播放乘数 31。同样，Anime.js 的 

instance.speed 也与 GSAP 的 tween.timeScale() 对应。这种相似性突显了专业动画库中一个常见且必要的设计模式：同时提供全局和局部的时间缩放控制。

架构建议与最佳实践

• 设计系统: 对于需要保持动画语言一致性的项目，使用 engine.defaults 来设置基准的 duration、easing 和 playbackRate 值，以确保品牌一致性 19。

• 性能: 使用 engine.pause() 或自动的 pauseOnDocumentHidden 功能来为屏幕外或不活动的动画节省资源。对于仅涉及 transform 和 opacity 的动画，优先使用 waapi.animate() 以利用硬件加速，但需注意 engine.speed 对其无效 29。

• 交互性: 使用实例级的 .speed 属性来创建能直接响应用户输入的动态动画，从而提供更具吸引力和触感的体验。

---

结论

对 Anime.js 速度控制系统的深入理解，是将其从一个简单的动画工具转变为一个专业级引擎的关键。报告明确了全局 engine.speed 和局部 instance.speed 之间的区别及其乘法关系。关键的发现是，基于 JavaScript 的 engine.speed 控制机制与通过 waapi.animate() 委托给浏览器原生处理的动画是相互独立的。

最终，最佳实践是：利用 engine.speed 实现全局效果和进行调试，而通过 instance.speed 实现精细的、响应用户输入的交互控制。掌握了这些控制手段，开发者就能够构建出复杂的、高性能且行为可预测的用户体验。