用途
Web Animation Design 用于设计、实现或诊断一个有明确范围的网页动效任务，涉及时间、缓动、中断、手势或动画性能。当任务涉及动画、动效或交互手感，或系统识别出具体动效缺陷时使用。对于普通 UI 工作，基线动效参考即可。该技能负责任务的实现、权限、审查与修复预算，是动效实现专家，而非第二套框架。
主要能力
- 从实际请求与已有的基础组件、状态和项目令牌出发，识别动效要承担的层级、因果或反馈职责。
- 在动效无价值时保留清晰的静态反馈。
- 审查请求保持只读；实现请求在既有授权范围内推进。
- 提供缓动蓝图：ease-out（最常用，用于用户发起的交互，如下拉、模态、提示、进入或退出屏幕的元素）、ease-in-out（用于屏幕上已有元素的移动或变形）、ease（用于悬停状态与颜色过渡）、linear（匀速运动、真实时间/进度可视化或直接滚动/手势映射）、ease-in（几乎不用，避免延迟用户反馈）。
- 提供时长指南：微交互 100–150ms，标准 UI（提示、下拉）150–250ms，模态与抽屉 200–300ms；产品控件动效通常保持在 100–300ms 内，无弹跳或弹性过冲；较大元素动画慢于较小元素；退出动画可比进入快约 20%。
- 提供频率判断：高频使用不加动效或最小反馈，偶尔使用用标准动画，罕见/首次可更特别。
- 说明何时该动画与不该动画，并区分营销页与产品 UI。
- 弹簧动画：用于带惯性的拖拽、可中途打断的手势，或经明确批准的表现性交互；给出基于时长与基于物理的配置示例。
- 可中断性：验证已安装 API 是否在重定向时保留当前速度；在动画窗口内练习关闭/重开/关闭，确保最新意图胜出，取消或失效过期工作，处理零时长减少动效路径。
- 布局动画（Framer Motion）：layout 属性自动动画化布局变化；layoutId 连接两个独立元素实现形变；动态高度动画需显式测量。
- AnimatePresence：sync、wait、popLayout 三种模式；使用 custom 传递动态数据实现方向感知过渡；关键规则包括始终添加 key、用 initial={false} 跳过挂载动画。
- Motion 值与钩子：useMotionValue（即时更新，用于手势）、useSpring（动画更新，用于跟随）、useTransform（值映射）、useMotionTemplate（字符串插值）、MotionConfig（子树默认过渡）。
- 编排与错峰：CSS 与 Framer Motion 的 stagger 示例；延迟保持小（30–80ms），并计入最后一项时长。
- 品牌表达：通过动画速度体现即时、克制或俏皮，产品 UI 通常应感觉快速，营销页用于表达品牌个性。
- 性能：优先使用 transform 与 opacity；高度、宽度、内边距、外边距动画可能触发布局；模糊/滤镜成本取决于绘制区域、半径、设备与浏览器；保持每帧变化局部化；避免每帧 React 状态更新；仅在测量支持时添加 will-change。
- 无障碍：通过现有 CSS 或库机制尊重 prefers-reduced-motion，为装饰性 CSS 动画提供局部回退。
使用方式
从实际请求和项目已有的基础组件、状态与设计令牌开始。保留现有组件与动效库，不因示例而安装或迁移依赖；验证已安装包/版本及其支持的 API。交互式悬停、按压与开关状态变化优先使用 CSS 过渡，它们可从当前插值状态重定向。关键帧描述时间线，适用于刻意序列或真实加载循环，但不会像过渡那样自动重定向到变更后的终点。手势物理、协调退出或共享布局在复杂度合理时使用已有的 Motion/动画库方案。检查减少动效设置，并保留可访问基础组件的焦点、键盘、隐藏内容与卸载生命周期。
适用场景
- 用户发起的交互：下拉、模态、提示、进入或退出屏幕的元素。
- 屏幕上已有元素的移动或变形。
- 悬停状态与颜色过渡。
- 带惯性的拖拽、可中途打断的手势。
- 标签高亮、卡片到模态扩展、按钮到弹出层形变、图片在容器间移动等共享布局动画。
- 方向感知的步骤切换。
- 滚动联动效果、光标距离效果、值格式化。
- 营销页面的品牌动效表达。
限制
- 审查请求保持只读；实现请求在既有授权范围内推进。
- 不因示例而安装或迁移依赖；需验证已安装包/版本及其支持的 API。
- CSS 或 JavaScript 单独都不保证合成器执行；CSS 声明或库属性不是 GPU/帧率保证。
- 高度、宽度、内边距、外边距动画可能触发布局，仅在空间连续性合理时使用并测量真实消费端。
- 模糊/滤镜没有普遍安全的 20px 截止值；不要用模糊掩盖未解决的过渡或状态缺陷。
- will-change 是提示，有内存与层叠上下文成本，不是强制 GPU 执行。
- 基线产品动效无弹跳或弹性过冲；仅在手势/边界响应或品牌表达且经批准简报支持时可有克制例外。
- 数字示例仅在项目令牌未定义决策时作为起点。
- 关于收费、价格、平台等具体信息暂未提供。