animejs-animation - SKILL

name: animejs-animationdescription: Advanced JavaScript animation library skill for creating complex, high-performance web animations.risk: safesource: communitydate_added: “2026-03-07”Anime.js 动画技能Anime.js 是一个轻量但功能非常强大的 JavaScript 动画引擎。它在处理复杂的时间线、错位动画以及对 DOM、CSS 和 SVG 的精确控制方面表现出色。上下文这项技能用于创建高保真、令人震惊的网页动画远超简单的 CSS 过渡效果。它是打造获奖级互动网站的首选工具。何时使用在以下情况下触发此技能创建复杂的多阶段登陆页编排。为显示网格、文本或数据可视化实现错落动画。SVG 路径动画形状变换绘制动态线条。构建高度互动、动态的用户界面元素能够流畅地响应用户输入。执行工作流程识别目标选择要进行动画的 DOM 元素或 SVG。定义属性与缓动指定要动画的值。关键是使用高级缓动函数例如自定义cubicBezier、spring或elastic而不是基本的linear或ease-in-out以使动作感觉昂贵且自然。编排时间线使用anime.timeline()来排列复杂的动作序列。掌握时间线偏移的使用相对-200与绝对偏移以创建无缝重叠的动作。实施consttlanime.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 加速。限制仅当任务明确符合上述描述的范围时才使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全界限或成功标准请停下来并要求澄清。