| 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,视技术栈而定)