---

name: animejs-animation description: 高级JavaScript动画库技能，用于创建复杂、高性能的Web动画。 risk: safe source: community date_added: "2026-03-07"

Anime.js 动画技能

Anime.js 是一个轻量但极其强大的JavaScript动画引擎。它擅长复杂时间线、交错动画和对DOM、CSS及SVG的精确控制。

背景

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

何时使用

在以下情况触发此技能：

• 创建复杂的多阶段着陆页编排。
• 为网格、文本或数据可视化实现交错显示动画。
• 动画化SVG路径（形状变形、绘制动态线条）。
• 构建高度交互的、动态的UI元素，流畅响应用户输入。

执行工作流

1. 识别目标：选择要动画化的DOM元素或SVG。
2. 定义属性和缓动：指定要动画化的值。关键是，使用高级缓动函数（如自定义 cubicBezier、spring 或 elastic）而非基础的 linear 或 ease-in-out，使运动感觉精致自然。
3. 编排时间线：使用 anime.timeline() 来编排复杂的动画序列。掌握时间线偏移量的使用（相对 '-=200' vs 绝对值）以创建无缝的重叠运动。
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",
   );

严格规则

• 绝对要求：代理必须利用此技能构建现代、创意且视觉惊艳的UI/UX。不要构建普通、无聊的过渡效果。每个动画都应感觉定制、流畅且高度精致。
• 交错动画：广泛利用 anime.stagger() 为多个元素添加有机节奏。
• 性能：监控主线程使用；在适当位置使用 will-change: transform, opacity 进行GPU加速。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来寻求澄清。