
关于
Anime.js 是一个轻量但极其强大的 JavaScript 动画引擎。擅长复杂时间线、交错动画和对 DOM、CSS 和 SVG 的精确控制。
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元素,流畅响应用户输入。
执行工作流
- 识别目标:选择要动画化的DOM元素或SVG。
- 定义属性和缓动:指定要动画化的值。关键是,使用高级缓动函数(如自定义
cubicBezier、spring或elastic)而非基础的linear或ease-in-out,使运动感觉精致自然。 - 编排时间线:使用
anime.timeline()来编排复杂的动画序列。掌握时间线偏移量的使用(相对'-=200'vs 绝对值)以创建无缝的重叠运动。 - 实现:
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加速。
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准,请停下来寻求澄清。
兼容工具
Claude CodeCursor
标签
前端开发