| name | animation-systems |
| description | 当设计或实现 Stripe、Linear、Apple、Vercel 那样产品级的 Web 动效时使用。涵盖动效原则、缓动/时长默认值、编排模式、滚动/悬停交互、性能、无障碍（reduced motion）与实现指引。 |
Animation Systems（Stripe × Linear × Apple × Vercel）
本技能帮你交付有品味、产品级的动效。
不是「更多动画」。
而是更好的动画：清晰、层级、反馈与愉悦——且不卡顿。
目标（动效为何存在）
用动画来：
- 解释层级（什么重要）
- 确认动作（反馈）
- 引导注意（下一步看哪里）
- 维持连续性（空间关系）
- 增添精致（craft 信号）
如果一个动画不服务于其中之一，删掉它。
Stripe/Linear/Apple/Vercel 风格（共同特质）
1) 克制
- 更少的动画，选得更好。
- 一个强有力的 hero 时刻；其余是辅助动效。
2) 清晰的编排
- 主元素先动。
- 次要元素以小交错跟随。
- 动效确立一种「阅读顺序」。
3) 有物理感但不卡通
- 用感觉像人的缓动（柔和加速 + 温和落定）。
- 严肃产品 UI 避免弹跳默认。
4) 质感 + 深度（细微）
- 小视差、柔和阴影、模糊渐隐、光束。
- 除非它是 hero，否则避免重度 3D。
动效基元（先建这些）
以能到处复用的基元来思考。
A) 淡入 + 上升（默认入场）
用于：文字块、卡片、模态。
- Opacity：0 → 1
- Y：12–24px → 0
- 时长：视尺寸 300–700ms
B) 缩放 + 淡入（微强调）
用于：popover、toast、选中态。
- Scale：0.98 → 1
- Opacity：0 → 1
C) 滑动（导航）
用于：抽屉、步骤过渡。
- 用 transform translate；避免对布局做动画。
D) 变形 / 共享元素（高 craft）
用于：tab 指示器、展开卡片。
默认值（实用数字）
把这些作为起始系统。
时长（经验法则）
- 微（悬停/按下）：120–200ms
- UI 状态变化（toggle、选择）：180–260ms
- 小过渡（popover、toast）：220–320ms
- 页面分区入场：400–800ms
- Hero 序列：800–1600ms（含内部节拍）
缓动（安全集）
选一个小集合并复用。
- UI：ease-out 配温和落定
- 强调：稍强的缓动
- 进入：ease-out
- 退出：ease-in（更快）
如果实现：
- 用你动画库中「power2.out / expo.out」的对应项。
- 除非品牌活泼，否则避免 elastic/bounce。
交错
- 每个元素 40–90ms（文字行/卡片）
- 移动端用更小的交错
编排模式
1)「Hero → 辅助元素」
- Hero 视觉先入场。
- 标题接着出现。
- CTA 最后出现。
2)「滚动时分区显现」
- 分区约 20–30% 可见时触发。
- 只动画一次（不在微小滚动时重播）。
3)「悬停：抬升 + 发光」
- Y：-2 到 -6px
- 阴影：细微增加
- 可选：边框/渐变发光
4)「焦点环 + 微位移」
- 对表单字段：焦点环 + 微小缩放/平移以体现响应。
性能规则（不可妥协）
对正确的属性做动画
优先：
transform（translate/scale/rotate）opacity
避免（除非必要）：
- width/height/top/left
- 大面积上的昂贵滤镜
尊重 GPU
- 在重度 canvas 中钳制设备像素比（1–2）
- 保持模糊细微且小
- 避免许多同时动画的阴影
减少重排
- 不要每帧测量布局。
- 对滚动效果，用能批处理读/写的库。
无障碍：Reduced Motion
始终支持 prefers-reduced-motion。
策略：
- 保持内容可见。
- 用瞬间状态 + 细微透明度替换动效。
- 禁用滚动擦除/钉住。
问用户：
- 「你想要一个禁用所有非必要动效的 reduced-motion 模式吗？」
实现指引（与库无关）
对于简单站点
- 小悬停/toggle 用 CSS 过渡。
- 复杂序列用单一动画库（GSAP 或 Framer Motion）。
对于产品站点
- 创建一套动效 token：
- 时长
- 缓动曲线
- 标准偏移（8/16/24px）
- 交错默认值
对于 hero 时刻
- 用带标注节拍的时间线（或 keyframes）。
- 先锁定相机/场景运动，再叠加文字。
该问用户什么
- 品牌路线是哪种：Stripe（精致）、Linear（极简）、Apple（电影感）、Vercel（开发者/产品）？
- 关键时刻是什么？（hero、滚动叙事、悬停卡片、导航过渡）
- 有性能约束吗？（移动、低端设备）
- 有 reduced motion 要求吗？
输出格式（当被要求「加 Stripe/Linear 风格动画」时）
返回：
- 动效目标（我们想传达什么）
- 动效 token（时长 + 缓动 + 偏移）
- 一份编排计划（时间线节拍）
- 实现说明（性能 + reduced motion）
- 一小段代码配方（CSS 或 GSAP/Framer，视技术栈而定）
