目标元素 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
});

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。

小结

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