如何使用 Anime.js 创建时间轴动画？

Anime.js 是一个强大的 JavaScript 动画库，可以帮助开发人员创建各种种类的动画。本教程将向您介绍如何使用 Anime.js 创建时间轴动画。

步骤 1：安装 Anime.js

安装 Anime.js 可以通过 NPM 或者通过 Web 上的 CDN。

使用 NPM，可以在终端中输入以下命令：

npm install animejs

如果你选择通过 CDN，可以在 HTML 文档中添加以下代码片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

步骤 2：创建时间轴动画

在 HTML 文档中添加一个 div 元素来显示时间轴动画：

<div id="timeline"></div>

在 JavaScript 代码中，使用 Anime.js create() 方法来创建时间轴动画。使用 keyframes 方法来定义关键帧。

const timeline = anime.timeline({
  easing: 'easeOutExpo',
});

timeline
.add({
  targets: '#timeline',
  width: ['0vw', '20vw'],
  duration: 500,
})
.add({
  targets: '#timeline',
  height: ['0px', '150px'],
  duration: 800,
})
.add({
  targets: '#timeline',
  backgroundColor: '#f9d9e8',
  duration: 1000,
});

在以上代码中，我们在 #timeline 元素上，使用 Anime.js API 来生成动画序列。时间轴动画包含三个关键帧。

第一个关键帧告诉时间轴从 0vh 开始，到 20vh，动画时间为 500 ms。第二个关键帧告诉时间轴从 0px 开始，高度变化到 150px，动画时间为 800ms。第三个关键帧告诉时间轴颜色变为 #f9d9e8，动画时间为 1000ms。在最后一帧中，我们可以添加更多属性更改来定制动画。

步骤 3：启动动画

使用 timeline.play() 方法来播放时间轴动画。

timeline.play();

现在你已经知道如何使用 Anime.js 创建一个简单的时间轴动画。你可以使用相同的模式，添加更多帧，定义更多关键帧以创建更复杂的动画。

返回的 Markdown 代码如下：

# 如何使用 Anime.js 创建时间轴动画？

Anime.js 是一个强大的 JavaScript 动画库，可以帮助开发人员创建各种种类的动画。本教程将向您介绍如何使用 Anime.js 创建时间轴动画。

## 步骤 1：安装 Anime.js

安装 Anime.js 可以通过 NPM 或者通过 Web 上的 CDN。

使用 NPM，可以在终端中输入以下命令：

```bash
npm install animejs

如果你选择通过 CDN，可以在 HTML 文档中添加以下代码片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

步骤 2：创建时间轴动画

在 HTML 文档中添加一个 div 元素来显示时间轴动画：

<div id="timeline"></div>

在 JavaScript 代码中，使用 Anime.js create() 方法来创建时间轴动画。使用 keyframes 方法来定义关键帧。

const timeline = anime.timeline({
  easing: 'easeOutExpo',
});

timeline
.add({
  targets: '#timeline',
  width: ['0vw', '20vw'],
  duration: 500,
})
.add({
  targets: '#timeline',
  height: ['0px', '150px'],
  duration: 800,
})
.add({
  targets: '#timeline',
  backgroundColor: '#f9d9e8',
  duration: 1000,
});

在以上代码中，我们在 #timeline 元素上，使用 Anime.js API 来生成动画序列。时间轴动画包含三个关键帧。

第一个关键帧告诉时间轴从 0vh 开始，到 20vh，动画时间为 500 ms。第二个关键帧告诉时间轴从 0px 开始，高度变化到 150px，动画时间为 800ms。第三个关键帧告诉时间轴颜色变为 #f9d9e8，动画时间为 1000ms。在最后一帧中，我们可以添加更多属性更改来定制动画。

步骤 3：启动动画

使用 timeline.play() 方法来播放时间轴动画。

timeline.play();

现在你已经知道如何使用 Anime.js 创建一个简单的时间轴动画。你可以使用相同的模式，添加更多帧，定义更多关键帧以创建更复杂的动画。