使用 Anime.js 基于 JavaScript 的动画，第 3 部分：探索值、时间轴和播放

使用 Anime.js 基于 JavaScript 的动画，第 3 部分：探索值、时间轴和播放

在本文中，我们将继续深入探讨 Anime.js 动画库，特别是关于值、时间轴和播放控制方面的高级用法，Anime.js 是一个轻量级 JavaScript 动画库，它提供了丰富的功能来创建和管理复杂的动画效果。

1. 理解 Anime.js 中的值

在 Anime.js 中，几乎所有的动画属性都是围绕一个中心概念构建的，即“值”，无论是位置、大小、颜色还是其他任何可动画的属性，它们都可以表示为一个数值或数值数组。

1.1 单个值

对于单个值，它通常用于标量属性，如透明度（opacity）或旋转角度（rotate）。

anime({
  targets: '.element',
  opacity: 0,
  rotate: '180deg',
});

1.2 数组值

数组值则用于矢量属性，比如位置（x/y）、尺寸（width/height）等。

anime({
  targets: '.element',
  x: [0, 50, 100],
  y: [50, 0, 50],
});

2. 时间轴 (Timeline)

时间轴允许你将多个动画组合在一起，形成复杂的动画序列，你可以并行或串行地运行动画，设置延迟，甚至根据动画的进度触发回调函数。

2.1 创建时间轴

要创建一个时间轴，你可以使用 anime.timeline() 方法。

const timeline = anime.timeline();
timeline
  .add({
    targets: '.square',
    width: 200,
    height: 200,
  })
  .add({
    targets: '.circle',
    translateX: 250,
    opacity: 0,
  }, '=1s'); // 相对于上一个动画提前1秒开始

2.2 控制时间轴

你可以用 play(), pause(), restart(), seek() 等方法来控制时间轴。

// 开始播放时间轴
timeline.play();
// 暂停时间轴
timeline.pause();
// 重启时间轴
timeline.restart();
// 跳转到时间轴的特定位置（50% 处）
timeline.seek(50);

3. 播放控制

Anime.js 提供了多种方式来控制动画的播放状态，包括循环、反向播放、延迟播放等。

3.1 循环播放

要让动画循环播放，可以使用 loop 属性。

anime({
  targets: '.element',
  translateX: 250,
  loop: true, // 无限循环
});

3.2 反向播放

要使动画反向播放，可以使用 direction 属性。

anime({
  targets: '.element',
  translateY: 250,
  direction: 'reverse', // 反向播放
});

3.3 延迟播放

如果你想在页面加载后延迟一段时间再开始播放动画，可以使用 delay 属性。

anime({
  targets: '.element',
  rotate: '1turn',
  delay: 1000, // 延迟1秒开始播放
});

归纳全文

通过掌握 Anime.js 中的值、时间轴和播放控制，你已经具备了创建复杂且精确的动画序列的能力，这些功能为你提供了强大的工具，以实现高度定制化和富有创意的动画效果，继续实践和探索 Anime.js 的其他功能，你将能够创作出更加引人入胜的动态用户界面和视觉效果。