emilkowalski/improve-animations

improve-animations 是做什么的？

来自 emilkowalski/skills 的 Agent 技能“improve-animations”。在任务符合该技能领域时使用。

概述

该技能专注于提升 Web 应用中的动画质量，包括但不限于过渡动画、关键帧动画、滚动驱动动画以及性能优化。它适用于任何需要调整或增强 UI 动画效果的场景。

适用平台

• 任何基于现代浏览器的 Web 应用
• 框架无关（React, Vue, Svelte, Angular 等）

工作原理

技能通过分析提供的代码片段中的动画实现，识别以下问题：

• 不必要的重排或重绘
• 使用 transform 和 opacity 之外的可动画属性
• 缺少 will-change 或不当使用
• 动画帧率低或卡顿
• 时序或缓动函数选择不当

然后生成具体的改进建议和代码示例。

使用示例

// 原始动画（可能存在问题）
.element {
  transition: all 0.3s ease;
  animation: slideIn 1s ease-in-out;
}

// 优化后
.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
  animation: slideIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

注意事项

• 始终优先使用 GPU 加速属性（transform, opacity）
• 避免在动画中触发布局属性（如 width, height, top, left）
• 对于复杂动画，考虑使用 requestAnimationFrame 或 Web Animations API

贡献

如有改进建议，请访问 emilkowalski/skills 仓库。