关于 animation-systems
面向产品设计与开发人员的界面动效系统技能，帮助用动画传达层级、反馈和注意力方向。内容包括动效原语、时长与缓动建议、编排模式、性能规则及减少动态效果的无障碍处理。
主要功能
- 01按目的规划界面动效
- 02复用淡入、滑动等动效原语
- 03设定时长、缓动与交错
- 04优先使用 transform 和 opacity
- 05支持减少动态效果偏好
适用场景
- 01设计页面分区的滚动显现
- 02为操作状态提供视觉反馈
- 03为产品网站制定动效规范
- 04降低动画对性能与可访问性的影响
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/animation-systems确认已加载。
附带文件demo/index.htmldemo/PROMPT.md
详细介绍
动效系统（Stripe × Linear × Apple × Vercel）
这项技能助你打造精致、达到产品级水准的动效。 不是“更多动画”，而是更好的动画：清晰、层次、反馈与愉悦感——同时避免卡顿。
目标（动效为何存在）
使用动画来：
- 阐明层次（什么更重要）
- 确认操作（提供反馈）
- 引导注意力（下一步看哪里）
- 维持连续性（空间关系）
- 增添精致感（体现匠心）
如果动画不服务于以上任何一项目标，就删掉它。
Stripe/Linear/Apple/Vercel 风格（共同特点）
1) 克制
- 动画越少，选择越精。
- 一个鲜明的主视觉时刻，其余动效作为辅助。
2) 清晰的编排
- 主要元素先动。
- 次要元素稍后跟进，间隔时间较短。
- 动效建立“阅读顺序”。
3) 有真实感，但不夸张
- 使用让人感觉自然的缓动（柔和加速 + 轻柔停稳）。
- 严肃的产品 UI 避免使用弹跳式默认效果。
4) 质感与纵深（微妙）
- 轻微视差、柔和阴影、模糊淡入、光束。
- 除非是主视觉，否则避免使用厚重的 3D 效果。
动效基元（先构建这些）
将其视为可在各处重复使用的基元。
A) 淡入 + 上移（默认入场）
适用于：文本块、卡片、模态框。
- 不透明度：0 → 1
- Y：12–24px → 0
- 持续时间：根据尺寸设置为 300–700ms
B) 缩放 + 淡入（微强调）
适用于：弹出框、提示消息、选中状态。
- 缩放：0.98 → 1
- 不透明度：0 → 1
C) 滑动（导航）
适用于：抽屉、步骤过渡。
- 使用 transform translate；避免对布局进行动画处理。
D) 形变 / 共享元素（精工效果）
适用于：选项卡指示器、展开卡片。
- 需要一致的几何形状与经过测量的布局。
默认值（实用数值）
可将这些数值作为系统的起点。
持续时间（经验法则）
- 微动效（悬停/按下）：120–200ms
- UI 状态变化（切换、选择）：180–260ms
- 小型过渡（弹出框、提示消息）：220–320ms
- 页面区块入场：400–800ms
- 主视觉序列：800–1600ms（包含内部节拍）
缓动（安全选择）
选择少量缓动方式并重复使用。
- UI：ease-out，并轻柔停稳
- 强调：使用稍强的缓动
- 入场：ease-out
- 退场：ease-in（速度更快）
如果需要实现：
- 使用动画库中等效于 “power2.out / expo.out” 的缓动方式。
- 除非品牌风格活泼，否则避免使用弹性/弹跳效果。
交错延迟
- 每个元素间隔 40–90ms（文本行/卡片）
- 移动端使用更短的交错延迟
编排模式
1) “主视觉 → 辅助元素”
- 主视觉先动起来。
- 接着显示标题。
- 最后显示 CTA。
2) “滚动时显示区块”
- 当区块约有 20–30% 可见时触发。
- 只播放一次（不要因为轻微滚动而重复播放）。
3) “悬停：上移 + 发光”
- Y：-2 至 -6px
- 阴影：稍微增强
- 可选：边框/渐变发光
4) “焦点环 + 微移”
- 用于表单字段：添加焦点环，并通过微小缩放/位移提升响应感。
性能规则（不可妥协）
对正确的属性添加动画
优先使用：
transform（translate/scale/rotate）opacity
避免使用（除非确有必要）：
- width/height/top/left
- 在大面积区域使用开销较高的滤镜
合理利用 GPU
- 在高负载画布中限制设备像素比（1–2）
- 模糊效果要轻微、范围要小
- 避免同时对大量阴影添加动画
减少重排
- 不要每帧都测量布局。
- 对于滚动效果，使用会批量处理读写操作的库。
无障碍：减少动态效果
始终支持 prefers-reduced-motion。
策略：
- 保持内容可见。
- 将动效替换为即时状态 + 轻微的不透明度变化。
- 禁用滚动联动/固定效果。
询问用户：
- “你希望提供一种减少动态效果的模式，禁用所有非必要动效吗？”
实现指导（与库无关）
对于简单网站
- 使用 CSS transitions 实现简单的悬停/切换效果。
- 复杂序列使用单一动效库（GSAP 或 Framer Motion）。
面向产品网站
- 创建一套动效令牌：
- 时长
- 缓动曲线
- 标准偏移量（8/16/24px）
- 错开动画的默认设置
面向主视觉动效
- 使用时间线（或关键帧），并标注各个节拍。
- 先锁定镜头／场景移动，再叠加文本。
要询问用户的问题
- 品牌风格方向是什么：Stripe（精致）、Linear（简约）、Apple（电影感）、Vercel（开发者／产品）？
- 关键场景有哪些？（主视觉、滚动叙事、悬停卡片、导航栏过渡）
- 有哪些性能限制？（移动设备、低端设备）
- 是否需要满足减少动态效果的要求？
输出格式（用户要求“添加 Stripe/Linear 风格的动画”时）
返回：
- 动效目标（我们希望传达什么）
- 动效令牌（时长 + 缓动 + 偏移量）
- 编排方案（时间线节拍）
- 实现说明（性能 + 减少动态效果）
- 简短的代码示例（根据技术栈使用 CSS 或 GSAP/Framer）
评论
支持 Markdown