motion-design

动效设计技能

何时应用

在以下情况使用此技能：

创建UI动画（按钮、卡片、模态框、页面过渡）
设计微交互和反馈动画
构建加载、成功或错误状态
为插图或装饰元素添加动画
规划滚动触发或基于进度的动画
建立品牌动效标识
编排多元素序列

决策树：

是否服务于功能目的（反馈、引导）？→ 响应式时序规则
是否表达品牌个性？→ 动效个性原型
是否讲述故事或引导注意力？→ 迪士尼原则 + 编排
是否为复杂的多元素场景？→ 1/3规则 + 交错模式

快速参考：8步检查清单

在创建任何动画之前：

情感目标？ — 喜悦、平静、紧迫、优雅
动效个性？ — 俏皮、高级、商务、活力
主要属性？ — 位置、缩放、旋转、不透明度
持续时间？ — 见下方持续时间表
缓动系列？ — 进入=减速，退出=加速
主角元素？ — 应用舞台原则
次要和环境层？ — 增加丰富度
1/3规则？ — 动效距离、同时运动元素

三大支柱（关键）

每个动画在技术决策前必须满足三大支柱：

支柱	问题	驱动因素
情感意图	观众应该感受到什么？	缓动、时序、幅度
视觉叙事	微故事是什么？	设置 → 动作 → 解决
动效工艺	如何使其可信？	物理、次要运动、路径

三个动效层（平面动画=缺少层次）：

主要层：观众跟随的主要动作
次要层：支撑丰富度（阴影、图标移动）
环境层：背景生命力（渐变、微妙脉冲）

深入阅读：director/core-philosophy.md

动效个性

每个项目选择一个原型。一致应用。

原型	持续时间	缓动	过冲	关键词
俏皮	150-300ms	ease-out-back	10-20%	有趣、异想天开、有弹性、可爱
高级	350-600ms	cubic-bezier(0.4,0,0.2,1)	0%	优雅、极简、奢华、精致
商务	200-400ms	cubic-bezier(0.2,0,0,1)	0-3%	干净、专业、商业、仪表盘
活力	100-250ms	ease-out-expo	15-30%	动态、充满活力、大胆、激动人心

默认：UI使用商务，插图使用俏皮。

品牌动效标识 — 定义三个常量：

标志性缓动：80%动画使用一个曲线
持续时间调色板：3个持续时间（快速/标准/慢速）
进入模式：一个一致的进入风格

深入阅读：director/motion-personality.md

属性选择

效果目标	主要属性	次要属性
进入/退出	位置	不透明度、缩放
强调/吸引注意	缩放	旋转（微妙）、不透明度脉冲
状态变化	不透明度、颜色	缩放（按压反馈）
方向/流动	位置	旋转（跟随路径）
深度/3D感	缩放 + 阴影	位置（视差）
加载/进度	旋转（旋转器）	缩放、不透明度脉冲
成功	缩放（弹出）	颜色、旋转（勾选绘制）
错误/警告	位置（抖动）	颜色、旋转（摆动）

简洁阈值：使用最少的必要属性。一个=直接。两个=精致。三个以上=可能过于复杂。

深入阅读：reference/property-selection.md

持续时间表

元素类型	持续时间	理由
工具提示/微反馈	80-120ms	必须感觉即时
按钮按压/切换	120-180ms	响应式反馈
图标过渡	150-250ms	清晰的状态变化
卡片进入/退出	200-350ms	空间感知
模态框/对话框	300-400ms	焦点转移
页面过渡	400-600ms	上下文切换
戏剧性揭示	600-1200ms	戏剧性构建

距离缩放持续时间：100px = 基准。200px = 1.3倍。400px = 1.6倍。

进入 > 退出：进入比退出长30-50%。用户关心出现的内容。

交互反馈：

悬停：<100ms
按压：<150ms
释放/稳定：200-300ms
错误抖动：300-400ms（2-3次振荡）

深入阅读：reference/timing-easing-tables.md

缓动选择

方向规则：

进入 → 减速（快速开始，温和着陆）：ease-out系列
退出 → 加速（温和开始，快速离开）：ease-in系列
屏幕上 → 两端平滑：ease-in-out系列
循环环境 → 无缝：基于正弦的ease-in-out

行业标准：

标准	三次贝塞尔	用途
Material Design 3	(0.2, 0, 0, 1)	默认屏幕上
MD3 强调	(0.05, 0.7, 0.1, 1)	进入、吸引注意
MD3 加速	(0.3, 0, 1, 1)	退出、关闭
Apple HIG	(0.25, 0.1, 0.25, 1)	标准iOS
快速UI	(0.2, 0, 0, 1)	快速、果断
温和浮动	(0.4, 0, 0.2, 1)	环境、背景
弹跳稳定	(0.175, 0.885, 0.32, 1.275)	过冲、俏皮

基于材质的缓动：

材质	持续时间缩放	过冲
刚性（金属、石头）	1.2倍	0%
弹性（橡胶、凝胶）	0.8倍	15-25%
流体（水、颜料）	1.5倍	5%
纸张（卡片、纸张）	1.0倍	3-5%
气体（烟雾、雾）	2.0倍	0%
玻璃（易碎）	0.9倍	0%

深入阅读：reference/timing-easing-tables.md

常见模式

按钮按压（俏皮）

预期：缩放到0.97（50ms，ease-out）
挤压：缩放到[1.04, 0.96]（100ms，ease-in）
跟随：过冲到1.02，稳定到1.0（弹簧，200ms）
次要：按压时阴影缩小，图标下移2px
总计：~150ms按压 + 200ms稳定

卡片进入（高级）

开始：目标下方20px，不透明度0
路径：轻微曲线（中点处X偏移10px）
缓动：ease-out-cubic减速
跟随：阴影在卡片后50ms到达
次要：内容在卡片落地后100ms淡入
舞台：其他卡片变暗至80%

成功状态（俏皮）

主要：使用ease-out-back缩放弹出
次要：勾选绘制
环境：微妙粒子爆发
颜色：绿色填充
总计：300-400ms

错误抖动（商务）

主要：位置振荡2-3次，±10-15px水平
缓动：ease-in-out实现尖锐停止
颜色：红色色调
总计：300-400ms
无过冲：错误感觉坚定

更多模式：patterns/entrance-exit.md | patterns/state-feedback.md

编排要点

协调进入：

以主角引领 — 主要元素最先或最突出地进入
空间一致性 — 所有元素从同一方向进入
反向运动 — 主角向右移动 → 环境以20-30%速度向左移动

1/3规则（距离）：没有运动在无关键帧变化的情况下超过屏幕的1/3。

1/3规则（元素）：当有3个以上元素时，同时处于活跃运动的元素不超过1/3。

交错预算：

模式	延迟	总预算	用例
微级联	20-40ms	<200ms	列表项、网格单元格
标准	50-100ms	<400ms	卡片、面板、导航
戏剧性	100-200ms	<600ms	主角区域
波浪	30-60ms	<500ms	数据可视化

关键：总交错必须保持在500ms以下。

深入阅读：director/choreography.md

情感到动效映射

情感	特征	路径	缓动	持续时间
喜悦	有弹性、弧形	弯曲、向上	ease-out-back	200-400ms
平静	平滑、流畅	温和曲线	sine ease-in-out	500-1000ms
紧迫	尖锐、快速	直线	ease-out	100-200ms
悲伤	缓慢、向下	下垂曲线	cubic ease-in-out	600-1200ms
惊讶	突然、扩展	径向向外	ease-out-expo	150-300ms
优雅	缓慢、受控	长弧线	(0.4,0,0.2,1)	400-700ms
俏皮	有弹性、不规则	弧线、波浪线	ease-out-back	200-350ms

路径作为语言：角度=紧张。曲线=友好。螺旋=异想天开。对角线=有目的。垂直=成长/重量。水平=进展。

深入阅读：director/emotion-mapping.md

重量分类

重量	示例	持续时间	过冲	缓动
重	模态框、覆盖层	300-500ms	0%	温和、高阻尼
中	卡片、面板	200-350ms	3-5%	中等
轻	工具提示、徽章、图标	80-200ms	5-15%	响应式

质量规则

关键 — 绝不违反

空间运动绝不使用线性 — 始终使用缓动曲线（仅旋转器、进度条可用线性）
重要状态变化绝不只使用不透明度 — 结合位置或缩放
绝不超出屏幕1/3 而无中间关键帧
始终三个动效层 — 主要 + 次要 + 环境

高 — 强烈遵循

持续时间与元素类型匹配（见表）
使用方向性缓动（进入ease-out，退出ease-in）
应用迪士尼原则（尤其是预期、跟随）
场景中保持一致的个性

完整检查清单：reference/quality-checklist.md

故障排查快速参考

问题	可能原因	修复
看起来机械	线性缓动或无弧线	添加缓动曲线 + 弧形路径
感觉太慢	持续时间对于元素类型过长	检查持续时间表，使用ease-out
感觉廉价/扁平	缺少次要和环境层	添加阴影运动 + 背景生命力
太分散注意力	太多元素在运动	应用1/3规则，减小幅度
无个性	到处使用通用缓动	一致应用个性原型