animejs-animation

Anime.js 动画技能

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

背景

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

适用场景

在以下情况下使用此技能：

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

执行工作流

1. 识别目标：选择要添加动画的 DOM 元素或 SVG。

2. 定义属性和缓动：指定要动画化的值。至关重要的是，应使用高级缓动函数（例如自定义的 cubicBezier、spring 或 elastic），而非基础的 linear 或 ease-in-out，让动作显得更精致自然。

3. 编排时间轴：先检查已安装的主版本。此示例针对 Anime.js v3；使用 anime.timeline() 来编排复杂的动作序列。熟练使用时间轴偏移量（相对值 '-=200' 与绝对值），以创建无缝衔接的重叠动作。

4. 实现： 对于已安装 Anime.js v3 的打包工具，import anime from "animejs"; 会提供 anime 绑定。选择器必须能匹配渲染后的 DOM 中的元素。

   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",
   );
   

动作与兼容性

• 范围：仅在动作有助于满足产品需求和用户任务时使用。遵循现有设计系统；简单的过渡和静态状态也是有效选择。
• 错开动画：充分利用 anime.stagger()，为多个元素增添自然的节奏感。
• 性能：监控主线程使用情况；适当使用 will-change: transform, opacity 来实现 GPU 加速。

示例

用户请求：

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

限制

• 上述代码使用 v3 API。Anime.js v4 使用导入的 createTimeline()，且目标和参数签名不同；不要混用不同主版本的示例。请查阅适用于已安装版本的官方时间轴文档。
• 遵循 prefers-reduced-motion：提供静态最终状态，避免劫持滚动，并确保焦点和键盘交互始终可立即使用。组件卸载时应释放动画。
• will-change 是临时的优化提示，并不保证 GPU 加速；应测量实际帧表现，避免在所有元素上长期启用。
• 仅当任务明确符合上述范围时才使用此技能。
• 不要将输出视为替代针对特定环境的验证、测试或专家审查。
• 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。