技能介绍

动效失控是真实存在的

一个产品里出现十几种不同时长的动画并不罕见：A 组件 180ms 入场，B 组件 420ms 入场；有的弹跳，有的滑行——没有任何规则约束时，每个组件的动画都是一次即兴发挥。结果产品没有统一的节奏语言，用户感知不到连贯性，开发者也说不清某个 270ms 是从哪来的。动效应该像字体和颜色一样被设计成系统：有刻度、有角色、有规则，而不是散落在各处的巧合。

这套技能如何工作

核心思路是把动效当作 design tokens 来管理，流程分六步：

读懂品牌：审计现有代码库里全部动画的时长、缓动和效果，判断产品气质是沉稳、轻快、活泼还是肃穆。
定义刻度：时长分四档——instant（约 100ms，状态反馈）、fast（约 180-220ms，微交互）、base（约 300ms，揭示）、slow（约 500ms+，场景切换）；缓动词汇中最多保留一种签名弹簧/回弹，产品的个性就押在这里，全部按品牌校准而非通用默认值。
编排规则：明确什么动、什么永远不动；出场比入场快；子元素级联间隔 30-60ms 且设上限，长列表不至于拖到秒级；每屏只有一个主角动效，其余做配角；元素移动距离控制在 8-24px；每个动画都附带 prefers-reduced-motion 的降级行为。
命名招牌动作：提炼 3-5 个可复用组合（如 card-lift、panel-reveal、count-up），逐个写清触发条件、动画属性、使用的 token 以及何时不该用。
导出产物：motion-tokens.json、motion.css（自定义属性 + 关键帧 + reduced-motion 守卫）、motion.ts（Framer Motion variants），外加一份新成员动笔前必读的 MOTION.md 规范。
改造存量（可选）：把第一步的清点结果映射到新系统——哪些直接归位到 token、哪些偏离需要改、哪些纯属无信息量的动效该删掉。

适用边界与注意点

几条硬红线值得留意：只允许动画 transform 和 opacity，动 width、height、top 这类布局属性必须在规范里显式记录例外；时长只能来自刻度，270ms 的一次性取值和代码库里的野 hex 值一样是失控信号。减动效契约不是可选项，它和动画本体写在同一个文件里随包发布。另外记住一条判断原则：不确定时选快的——用户读 200ms 觉得响应快，读 500ms 觉得迟钝，而且这种感知远早于他们对“美”的评价。动效要么承担沟通职责，要么就别存在：入场负责定位，反馈负责确认，转场负责保住上下文，“看起来挺酷”不是它的岗位。