animation-systems

name	animation-systems
description	当设计或实现 Stripe、Linear、Apple、Vercel 那样产品级的 Web 动效时使用。涵盖动效原则、缓动/时长默认值、编排模式、滚动/悬停交互、性能、无障碍（reduced motion）与实现指引。

Animation Systems（Stripe × Linear × Apple × Vercel）

本技能帮你交付有品味、产品级的动效。 不是「更多动画」。 而是更好的动画：清晰、层级、反馈与愉悦——且不卡顿。

---

目标（动效为何存在）

用动画来：

1. 解释层级（什么重要）
2. 确认动作（反馈）
3. 引导注意（下一步看哪里）
4. 维持连续性（空间关系）
5. 增添精致（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 风格动画」时）

返回：

1. 动效目标（我们想传达什么）
2. 动效 token（时长 + 缓动 + 偏移）
3. 一份编排计划（时间线节拍）
4. 实现说明（性能 + reduced motion）
5. 一小段代码配方（CSS 或 GSAP/Framer，视技术栈而定）