# 基本参数设置

URL: https://caijiao.org/animejs/2-basics/3-parameters
Source: docs/animejs/2-basics/3-parameters.md
Description: 本节介绍 Anime.js 动画的基础参数配置，包括持续时间、延迟、缓动函数、循环、方向等，帮助开发者灵活控制动画表现。

Anime.js 提供丰富的参数选项来控制动画的细节，以下是最常用的基本参数：

## duration （动画持续时间）

动画执行的总时间，单位是毫秒，默认 1000。

```js
anime({
  targets: ".box",
  translateX: 200,
  duration: 1500,
});
```

## delay （延迟执行时间）

动画开始前的等待时间，单位毫秒。

```js
anime({
  targets: ".box",
  translateX: 200,
  delay: 500,
});
```

## easing （缓动函数）

控制动画的速度曲线，内置多种缓动效果，例如：

- `linear` 线性
- `easeInQuad` 加速
- `easeOutBounce` 弹跳等

示例：

```js
anime({
  targets: ".box",
  translateX: 200,
  easing: "easeInOutQuad",
});
```

## loop （循环次数）

是否循环执行动画。可以设置：

- `true` 无限循环
- 数字 `n` 表示循环 n 次

```js
anime({
  targets: ".box",
  translateX: 200,
  loop: 3,
});
```

## direction （播放方向）

控制动画播放方向，有：

- `normal`（默认）
- `reverse` 反向播放
- `alternate` 正反交替循环

```js
anime({
  targets: ".box",
  translateX: 200,
  direction: "alternate",
  loop: true,
});
```

## autoplay （自动播放）

是否在创建动画后自动播放，默认 `true`。设置为 `false`，需手动调用 `play()`。

```js
const animation = anime({
  targets: ".box",
  translateX: 200,
  autoplay: false,
});
animation.play();
```

## easing 函数自定义

除了字符串缓动函数，支持传入自定义函数控制进度。

## 小结

掌握这些基础参数，有助于灵活调整动画时机和效果，满足复杂交互需求。

## 示例演示

[在线代码演示](/animejs/demos/3.html)