Animejs web animation

采用 Anime.js（轻量但强大的 JavaScript 动画引擎）构建远超普通 CSS 过渡的高保真网页动效，擅长复杂时间线、交错（stagger）以及对 DOM、CSS、SVG 的精确控制，适合奖项级别的交互站点。

何时使用

适用于以下场景：

• 落地页多阶段编排：英雄区文案、图片、模块依次入场的复杂出场动画。
• 交错揭示：网格、文本逐字、数据可视化的 stagger 错峰显现。
• SVG 路径动画：形状变形（morph）、动态描线绘制。
• 高交互动效：随用户输入流畅响应的动力学 UI 元素。

不该用边界（负边界）：

• 一行 CSS transition / transition: opacity .2s 就能解决的简单悬停、显隐过渡，无需引入动画引擎。
• 纯后端、数据处理或与视觉动效无关的任务。
• 任务范围不明、缺少目标元素或成功标准时，先停下来澄清，再动手。

步骤

1. 锁定目标（Identify Targets）：选定要动画的 DOM 元素或 SVG，确定 targets 选择器。
2. 定义属性与缓动（Properties & Easing）：指定要动画的数值。关键：优先使用高级缓动（自定义 cubicBezier、spring、elastic），避免 linear 或基础 ease-in-out，让运动显得高级、自然。
3. 编排时间线（Orchestrate Timelines）：用 anime.timeline() 串联复杂编舞，掌握时间线偏移——相对偏移 '-=200'（提前 200ms 与上一段重叠）对比绝对偏移，制造无缝交叠的运动节奏。
4. 实现（Implement）：落地为可运行代码（见下方示例）。

指令

• 创意硬性要求：用本技能构建现代、富有创意、视觉惊艳的 UI/UX，不要堆砌平庸、无聊的过渡——每个动画都应显得定制、流畅、打磨到位。
• 交错（Staggering）：大量使用 anime.stagger()，为多元素注入有机的节奏感。
• 性能（Performance）：监控主线程占用；在合适处对元素设置 will-change: transform, opacity 以启用 GPU 加速。

示例

英雄区文案交错上移淡入，图片随后缩放淡入并与文案重叠 800ms：

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

要点：spring(1, 80, 10, 0) 让整体运动带弹性质感；anime.stagger(100) 使 .hero-text 多元素以 100ms 步进错峰入场；"-=800" 让图片动画相对前一段提前 800ms，形成重叠编排。

注意事项

• 仅在任务确实落在上述范围内时使用本技能，避免为简单需求过度设计。
• 输出代码不能替代具体环境下的验证、测试与专家评审，务必在目标浏览器/设备实测。
• 缺少必要输入、权限、安全边界或成功标准时，先停下来询问澄清，再继续。
• will-change 应按需、节制使用，长期挂在大量元素上反而消耗内存、损害性能。

互见

• 创意/设计域内其他动效、SVG、交互相关技能可配合使用。
• 简单显隐/悬停优先用原生 CSS transition；本技能聚焦复杂编排与高保真动力学。

---

采编自 sickn33/antigravity-awesome-skills（MIT License）。