利用 Anime.js 为网页打造高阶交互动画

解决基础 CSS 动画过于单调的问题：通过 AI 调用 Anime.js 强大的引擎，实现复杂的动画时间轴编排、元素交错效果以及精细的 SVG 路径形变，提升网页的视觉精致感。

为什么需要这个技能

传统的 CSS 过渡（Transition）在处理多步骤、高精度的复杂动画时显得力不从心。如果需要实现一个“先弹出标题，接着依次弹出列表项，最后淡入背景图”的序列动作，纯 CSS 将面临难以维护的延迟（delay）计算。

Anime.js 提供了轻量且强大的 JS 动画能力。它不仅能精准控制 DOM 和 CSS 属性，还能处理 SVG 路径动画（如线条绘制、形状变形），并允许通过时间轴（Timeline）像剪辑视频一样编排动画顺序，让网页交互呈现出“大厂级”的流畅感。

适用场景

• 复杂落地页编排：需要多个元素在特定时间点依次进入或退出的视觉引导。
• 交错动画效果：为网格布局、文本字符或数据可视化图表实现有节奏的逐个出现效果（Staggering）。
• SVG 路径动画：实现动态线条绘制、形状平滑变形（Morphing）。
• 高响应度 UI：构建能够随用户输入流畅反馈的动力学交互元素。

核心工作流

1. 确定动画目标：选择需要执行动画的 DOM 元素或 SVG 路径。
2. 定义属性与缓动函数：设定动画数值。为了让动作显得自然且高级，避免使用简单的 linear，而应使用 spring（弹簧）、elastic（弹性）或自定义 cubicBezier 贝塞尔曲线。
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",
   );

下载和安装

下载 animejs-animation 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐