目标元素 targets

在 Anime.js 中，targets 是动画的作用目标，用于指定你希望哪个元素或对象参与动画。它是所有动画配置的基础参数之一。

支持的 target 类型

Anime.js 支持多种形式的 targets：

1. CSS 选择器字符串

anime({
  targets: ".box",
  translateX: 250,
});

会选中页面中所有 class 为 .box 的元素。

2. 单个 DOM 元素

const el = document.querySelector("#myBox");
anime({
  targets: el,
  scale: 2,
});

适合需要精确控制的场景。

3. NodeList 或 HTMLCollection

const items = document.querySelectorAll(".item");
anime({
  targets: items,
  opacity: 0.5,
});

多个元素可同时参与动画，Anime.js 会自动对它们进行遍历。

4. JavaScript 对象

const obj = { x: 0 };
anime({
  targets: obj,
  x: 100,
  update: () => console.log(obj.x),
});

这适用于数值控制类的场景，比如 Canvas 动画或数值计算。

5. 对象数组

anime({
  targets: [{ x: 0 }, { x: 100 }],
  x: 200,
  update: (anim) => {
    console.log(anim.animations[0].currentValue);
  },
});

可用于对多个非 DOM 对象执行统一动画。

多元素动画的并发与顺序

默认情况下，多个元素的动画是并发执行的。如果希望顺序动画，可以搭配 delay 或使用 anime.stagger：

anime({
  targets: ".item",
  translateX: 200,
  delay: anime.stagger(100), // 每个元素延迟 100ms
});

示例演示

在线代码演示

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Anime.js targets 示例</title>
<style>
.box,
.item {
width: 50px;
height: 50px;
margin: 10px;
background-color: #4FC08D;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
anime({
targets: ‘.box’,
translateX: 200,
rotate: ‘1turn’,
duration: 1000
});
anime({
  targets: '.item',
  translateY: 30,
  delay: anime.stagger(200),
  direction: 'alternate',
  loop: true
});

</script>
</body>
</html>

小结

targets 是 Anime.js 中最灵活也最关键的参数之一。它不仅支持标准的选择器，还允许使用对象、数组等形式，为各种动画需求提供了极高的自由度。