【研发类-前端开发Skills】animejs-animation 技能

高级JavaScript动画库技能用于创建复杂、高性能的Web动画。技能概述animejs-animation 技能是一个轻量级但极其强大的JavaScript动画引擎。它擅长复杂的时间轴、交错动画以及对DOM、CSS和SVG的精确控制。该技能用于创建超越简单CSS过渡的高保真、令人惊叹的Web动画是获奖级交互网站的首选工具。下载地址https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/animejs-animation主要功能复杂时间轴创建多阶段、编排精美的动画序列交错动画为网格、文本或数据可视化实现交错显示效果SVG动画动画SVG路径形状变形、动态线条绘制交互式UI元素构建流畅响应用户输入的动态UI元素高级缓动使用自定义缓动函数创建自然流畅的运动性能优化GPU加速和性能监控触发条件在以下情况下应该使用此技能:创建复杂、多阶段的落地页编排为网格、文本或数据可视化实现交错动画动画SVG路径形状变形、动态线条绘制构建高度交互、流畅响应用户输入的动态UI元素执行工作流1. 识别目标选择要动画的DOM元素或SVG。2. 定义属性和缓动指定要动画的值。关键使用高级缓动函数如自定义cubicBezier、spring或elastic而非基本的linear或ease-in-out使运动感觉高端自然。3. 编排时间轴使用anime.timeline()编排复杂的编舞。掌握时间轴偏移的使用相对-200 vs 绝对以创建无缝重叠的运动。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,);严格规则绝对强制代理必须使用此技能构建现代、创意和视觉震撼的UI/UX。不要构建普通、无聊的过渡。每个动画都应感觉定制、流畅和高度打磨。交错广泛利用anime.stagger()为多个元素添加有机节奏。性能监控主线程使用适当使用will-change: transform, opacity进行GPU加速。使用示例示例1交错文本动画// 文字逐字母出现anime({targets: .letter,opacity: [0, 1],translateY: [20, 0],delay: anime.stagger(50),easing: easeOutExpo});示例2SVG路径绘制// 绘制SVG路径anime({targets: path,strokeDashoffset: [anime.setDashoffset, 0],easing: easeInOutSine,duration: 1500,direction: alternate,loop: true});示例3弹性动画// 弹性效果anime({targets: .box,scale: [0, 1],elasticity: 500,duration: 1000,easing: easeOutElastic(1, .5)});最佳实践使用高级缓动spring、elastic、自定义cubicBezier交错动画使用anime.stagger()创建有机节奏时间轴编排使用相对偏移创建无缝过渡性能优化使用will-change启用GPU加速避免动画昂贵属性不持续动画box-shadow或filter响应式设计确保动画在不同屏幕尺寸上正常工作无障碍访问尊重prefers-reduced-motion设置注意事项限制仅在任务明确匹配上述范围时使用此技能不要将输出视为环境特定验证、测试或专家审查的替代品如果缺少必需的输入、权限、安全边界或成功标准请停止并请求澄清