Anime.js 动画

Anime.js 动画技能

Anime.js 是一个轻量级但功能极其强大的 JavaScript 动画引擎。它擅长处理复杂的时间轴、交错动画（staggering），以及对 DOM、CSS 和 SVG 的精确控制。

应用场景

此技能用于创建高保真、令人惊叹的 Web 动画，其效果远超简单的 CSS 过渡。它是打造获奖级交互网站的首选工具。

何时使用

• 创建复杂的多阶段落地页编排。

• 为网格、文本或数据可视化实现交错揭晓动画。

• 制作 SVG 路径动画（形状变形、动态线条绘制）。

• 构建能够对用户输入做出流畅响应的高交互、动力学 UI 元素。

执行工作流

1. 确定目标：选择需要执行动画的 DOM 元素或 SVG。
2. 定义属性与缓动函数：指定要动画化的数值。至关重要的一点是，使用高级缓动函数（如自定义 cubicBezier、spring 或 elastic）而非基础的 linear 或 ease-in-out，以使动作显得高级且自然。
3. 编排时间轴：使用 anime.timeline() 对复杂的动作序列进行编排。熟练使用时间轴偏移量（相对值 '-=200' 与绝对值）来创建无缝的重叠动作。
4. 具体实现：

const tl = anime.timeline({
     easing: "spring(1, 80, 10, 0)",
     duration: 1000,
   });
   tl.add({
     targets: ".hero-text",
     translateY: [50, 0],
     opacity: [0, 1],
     delay: anime.stagger(100),
   }).add(
     { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
     "-=800",
   );

严格规则

• 绝对指令：Agent 必须利用此技能来构建现代、创意且视觉震撼的 UI/UX。不要构建平庸、乏味的过渡效果。每个动画都应具有定制感、流畅度且经过精细打磨。

• 交错效果：广泛利用 anime.stagger() 为多个元素增加有机的节奏感。

• 性能优化：监控主线程占用；在适当的地方使用 will-change: transform, opacity 以启用 GPU 加速。

局限性

• 仅在任务明确符合上述范围时使用此技能。

• 不要将输出结果视为环境特定验证、测试或专家评审的替代方案。

• 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。