技能介绍

为什么加了动效反而更糟

很多团队在交付设计稿后会再补一轮动效，问题往往不在有没有动效，而在动效全靠直觉挑：每个卡片都做入场、每个按钮都要弹跳，页面最终变成动画演示，内容反而被淹没。

这个技能做什么

核心目标是让界面活起来但不喧宾夺主。技能假设设计产物已经存在（HTML 页面、组件或选中元素），工作流程是：

先检查现有结构——动手前先读当前的 HTML、组件或页面元素
挑选最少的动效时刻——只选能澄清状态或层级的：

- 主要内容的入场显现
- 重要控件的 hover / active 反馈
- UI 状态之间的过渡
- 仅在有助于叙事时用滚动显现

动画化 transform 与 opacity——避免动画 top、left、width、height 等布局属性
统一动效语言——不混用无关的缓动、时长或物理参数
添加 prefers-reduced-motion 兜底——为自动或滚动联动的动效提供降级
保持文案、数据与布局意图不变——除非用户明确要求重新设计

动效规则速查

默认 UI 过渡要快且有用：多数控件控制在 140-220ms
大页面显现可以更慢，但不能阻塞阅读
除非传达状态或进度，避免无休止的装饰性循环
不加自定义光标、噪点粒子或与内容争夺注意力的动效
交错动画只用于小分组，长列表逐个错开会让界面显得慢

实现与边界

纯 HTML 场景下 CSS keyframes 加少量 JavaScript observers 即可；React 或框架项目使用仓库已有的技术栈。若需要序列化动画且项目已有 GSAP，可配合 gsap-core、gsap-timeline 或 gsap-scrolltrigger。用完务必清理 observers、定时器与动画实例。

需要注意：这个技能是给已有设计产物打补丁，不是从零搭建动效系统。如果项目本身没有动效基础设施，或设计稿尚未完成，它的适用性会打折扣。