motion-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMotion Design Skill
动效设计技能
When to Apply
适用场景
Use this skill when:
- Creating UI animations (buttons, cards, modals, page transitions)
- Designing micro-interactions and feedback animations
- Building loading, success, or error states
- Animating illustrations or decorative elements
- Planning scroll-triggered or progress-based animations
- Establishing brand motion identity
- Choreographing multi-element sequences
Decision tree:
- Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
- Does it express brand personality? → Motion Personality archetypes
- Does it tell a story or guide attention? → Disney principles + choreography
- Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
在以下场景中使用本技能：
- 创建UI动画（按钮、卡片、模态框、页面转场）
- 设计微交互与反馈动画
- 构建加载、成功或错误状态动效
- 为插画或装饰元素添加动画
- 规划滚动触发或基于进度的动画
- 建立品牌动效识别体系
- 编排多元素动画序列
决策树：
- 是否具备功能性目的（反馈、引导）？→ 响应式timing规则
- 是否要传递品牌个性？→ Motion Personality原型
- 是否要讲述故事或引导注意力？→ 迪士尼动画原则 + Choreography技巧
- 是否为复杂多元素场景？→ 1/3规则 + stagger模式
Quick Reference: 8-Step Checklist
快速参考：8步检查清单
Before creating any animation:
- Emotional target? — joy, calm, urgency, elegance
- Motion Personality? — Playful, Premium, Corporate, Energetic
- Primary property? — position, scale, rotation, opacity
- Duration? — see duration table below
- Easing family? — entrance=decelerate, exit=accelerate
- Hero element? — apply staging principles
- Secondary + ambient layers? — add richness
- 1/3 rules? — motion distance, simultaneous elements
创建任何动画前，请完成以下检查：
- 情感目标？ — 愉悦、平静、紧迫、优雅
- 动效风格（Motion Personality）？ — 活泼型、高端型、商务型、活力型
- 核心属性？ — position、scale、rotation、opacity
- 时长（Duration）？ — 参考下方时长表格
- 缓动家族（Easing family）？ — 入场=decelerate，退场=accelerate
- 核心元素？ — 运用staging原则
- 次要+背景层？ — 丰富动效层次
- 1/3规则？ — 动效距离、同时运动元素数量
Three Pillars (CRITICAL)
三大核心支柱（至关重要）
Every animation must satisfy three pillars before any technical decisions:
| Pillar | Question | Drives |
|---|---|---|
| Emotional Intent | What should the viewer FEEL? | Easing, timing, amplitude |
| Visual Narrative | What's the micro-story? | Setup → Action → Resolution |
| Motion Craft | How do we make it believable? | Physics, secondary motion, paths |
Three motion layers (flat animation = missing layers):
- Primary: Main action the viewer follows
- Secondary: Supporting richness (shadows, icons shifting)
- Ambient: Background life (gradients, subtle pulses)
Deep dive: director/core-philosophy.md
在做出任何技术决策前，每个动画都必须满足以下三大支柱：
| 核心支柱 | 问题 | 决定因素 |
|---|---|---|
| 情感意图 | 观众应产生何种感受？ | Easing、timing、amplitude |
| 视觉叙事 | 微故事是什么？ | 铺垫 → 动作 → 收尾 |
| 动效工艺 | 如何让动效真实可信？ | 物理效果、secondary motion、运动路径 |
三层动效结构（扁平化动画缺少这些层次）：
- 主层：观众关注的核心动作
- 次层：辅助丰富效果（阴影、图标位移）
- 背景层：背景动态（渐变、微妙脉动）
深度解读：director/core-philosophy.md
Motion Personality
动效风格（Motion Personality）
Select ONE archetype per project. Apply consistently.
| Archetype | Duration | Easing | Overshoot | Keywords |
|---|---|---|---|---|
| Playful | 150-300ms | ease-out-back | 10-20% | fun, whimsical, bouncy, cute |
| Premium | 350-600ms | cubic-bezier(0.4,0,0.2,1) | 0% | elegant, minimal, luxury, sophisticated |
| Corporate | 200-400ms | cubic-bezier(0.2,0,0,1) | 0-3% | clean, professional, business, dashboard |
| Energetic | 100-250ms | ease-out-expo | 15-30% | dynamic, energetic, bold, exciting |
Default: Corporate for UI, Playful for illustrations.
Brand Motion Identity — define three constants:
- Signature easing: One curve for 80% of animations
- Duration palette: 3 durations (quick / standard / slow)
- Entrance pattern: One consistent entry style
Deep dive: director/motion-personality.md
每个项目选择一种原型，并保持一致性应用。
| 原型 | 时长（Duration） | 缓动（Easing） | 过冲量（Overshoot） | 关键词 |
|---|---|---|---|---|
| 活泼型 | 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
Property Selection
属性选择
| Effect Goal | Primary Property | Secondary Properties |
|---|---|---|
| Entrance/Exit | position | opacity, scale |
| Emphasis/Attention | scale | rotation (subtle), opacity pulse |
| State Change | opacity, color | scale (press feedback) |
| Direction/Flow | position | rotation (follow path) |
| Depth/3D Feel | scale + shadow | position (parallax) |
| Loading/Progress | rotation (spinner) | scale, opacity pulse |
| Success | scale (pop) | color, rotation (checkmark draw) |
| Error/Alert | position (shake) | color, rotation (wobble) |
Simplicity threshold: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.
Deep dive: reference/property-selection.md
| 效果目标 | 核心属性 | 次要属性 |
|---|---|---|
| 入场/退场 | position | opacity、scale |
| 强调/吸引注意力 | scale | rotation（微妙）、opacity脉冲 |
| 状态变更 | opacity、color | scale（按压反馈） |
| 方向/流程 | position | rotation（沿路径跟随） |
| 深度/3D感 | scale + shadow | position（视差） |
| 加载/进度 | rotation（旋转器） | scale、opacity脉冲 |
| 成功状态 | scale（弹出） | color、rotation（对勾绘制） |
| 错误/警告 | position（震动） | color、rotation（摇晃） |
简洁性阈值：使用最少必要的属性。1个=直接明了，2个=精致，3个及以上=可能过于繁杂。
深度解读：reference/property-selection.md
Duration Table
时长表格
| Element Type | Duration | Rationale |
|---|---|---|
| Tooltip / micro-feedback | 80-120ms | Must feel instant |
| Button press / toggle | 120-180ms | Responsive feedback |
| Icon transition | 150-250ms | Clear state change |
| Card enter / exit | 200-350ms | Spatial awareness |
| Modal / dialog | 300-400ms | Focus shift |
| Page transition | 400-600ms | Context switch |
| Dramatic reveal | 600-1200ms | Theatrical build |
Distance scales duration: 100px = base. 200px = 1.3x. 400px = 1.6x.
Enter > Exit: Entrances 30-50% longer than exits. Users care about what appears.
Interactive feedback:
- Hover: <100ms
- Press: <150ms
- Release/settle: 200-300ms
- Error shake: 300-400ms (2-3 oscillations)
Deep dive: reference/timing-easing-tables.md
| 元素类型 | 时长（Duration） | 原理 |
|---|---|---|
| 提示框 / 微反馈 | 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
Easing Selection
缓动选择（Easing Selection）
Directional rules:
- Entrance → decelerate (fast start, gentle landing): ease-out family
- Exit → accelerate (gentle start, fast departure): ease-in family
- On-screen → smooth both ends: ease-in-out family
- Looping ambient → seamless: sine-based ease-in-out
Industry standards:
| Standard | Cubic Bezier | Use For |
|---|---|---|
| Material Design 3 | (0.2, 0, 0, 1) | Default on-screen |
| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | Entrances, attention |
| MD3 Accelerate | (0.3, 0, 1, 1) | Exits, dismissals |
| Apple HIG | (0.25, 0.1, 0.25, 1) | Standard iOS |
| Snappy UI | (0.2, 0, 0, 1) | Fast, decisive |
| Gentle float | (0.4, 0, 0.2, 1) | Ambient, background |
| Bounce settle | (0.175, 0.885, 0.32, 1.275) | Overshoot, playful |
Material-based easing:
| Material | Duration Scale | Overshoot |
|---|---|---|
| Rigid (metal, stone) | 1.2x | 0% |
| Elastic (rubber, gel) | 0.8x | 15-25% |
| Fluid (water, paint) | 1.5x | 5% |
| Paper (cards, sheets) | 1.0x | 3-5% |
| Gas (smoke, fog) | 2.0x | 0% |
| Glass (brittle) | 0.9x | 0% |
Deep dive: reference/timing-easing-tables.md
方向性规则：
- 入场 → decelerate（快启动，缓着陆）：ease-out家族
- 退场 → accelerate（缓启动，快离开）：ease-in家族
- 屏幕内动效 → 两端平滑：ease-in-out家族
- 循环背景动效 → 无缝衔接：基于sine的ease-in-out
行业标准：
| 标准 | 三次贝塞尔曲线（Cubic Bezier） | 适用场景 |
|---|---|---|
| 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) | 过冲、活泼型动效 |
基于材质的缓动：
| 材质 | 时长比例 | 过冲量（Overshoot） |
|---|---|---|
| 刚性（金属、石头） | 1.2x | 0% |
| 弹性（橡胶、凝胶） | 0.8x | 15-25% |
| 流体（水、颜料） | 1.5x | 5% |
| 纸张（卡片、薄片） | 1.0x | 3-5% |
| 气态（烟雾、雾） | 2.0x | 0% |
| 玻璃（易碎） | 0.9x | 0% |
深度解读：reference/timing-easing-tables.md
Common Patterns
常见模式
Button Press (Playful)
按钮按压（活泼型）
- Anticipation: Scale to 0.97 (50ms, ease-out)
- Squash: Scale to [1.04, 0.96] (100ms, ease-in)
- Follow through: Overshoots to 1.02, settles to 1.0 (spring, 200ms)
- Secondary: Shadow shrinks during press, icon shifts down 2px
- Total: ~150ms press + 200ms settle
- 预备动作：缩放到0.97（50ms，ease-out）
- 挤压：缩放到[1.04, 0.96]（100ms，ease-in）
- 跟随动作：过冲到1.02，然后稳定到1.0（spring，200ms）
- 次层动效：按压时阴影缩小，图标下移2px
- 总时长：~150ms按压 + 200ms稳定
Card Entrance (Premium)
卡片入场（高端型）
- Start: 20px below target, opacity 0
- Path: Slight curve (10px X offset at midpoint)
- Easing: ease-out-cubic deceleration
- Follow through: Shadow arrives 50ms after card
- Secondary: Content fades in 100ms after card lands
- Staging: Other cards dim to 80%
- 起始状态：位于目标位置下方20px，opacity为0
- 路径：轻微曲线（中点X轴偏移10px）
- 缓动：ease-out-cubic减速
- 跟随动作：阴影在卡片到达后50ms出现
- 次层动效：卡片稳定后100ms内容渐入
- 舞台效果：其他卡片变暗至80%透明度
Success State (Playful)
成功状态（活泼型）
- Primary: Scale pop with ease-out-back
- Secondary: Checkmark draws in
- Ambient: Subtle particle burst
- Color: Green fill
- Total: 300-400ms
- 主层动效：使用ease-out-back的缩放弹出
- 次层动效：对勾绘制动画
- 背景层动效：微妙粒子爆发
- 颜色：绿色填充
- 总时长：300-400ms
Error Shake (Corporate)
错误震动（商务型）
- Primary: Position oscillates 2-3 times, ±10-15px horizontal
- Easing: ease-in-out for sharp stops
- Color: Red tint
- Total: 300-400ms
- No overshoot: Errors feel firm
More patterns: patterns/entrance-exit.md | patterns/state-feedback.md
- 主层动效：位置振荡2-3次，水平方向±10-15px
- 缓动：ease-in-out实现急停
- 颜色：红色 tint
- 总时长：300-400ms
- 无过冲：错误动效应给人坚定感
更多模式：patterns/entrance-exit.md | patterns/state-feedback.md
Choreography Essentials
编排要点（Choreography Essentials）
Coordinated entry:
- Lead with the hero — primary element enters first or most prominently
- Spatial consistency — all elements enter from same direction
- Counter-motion — hero moves right → ambient moves left at 20-30% speed
1/3 Rule (distance): No motion travels more than 1/3 of screen without a keyframe change.
1/3 Rule (elements): With 3+ elements, no more than 1/3 in active motion simultaneously.
Stagger budgets:
| Pattern | Delay | Total Budget | Use Case |
|---|---|---|---|
| Micro cascade | 20-40ms | <200ms | List items, grid cells |
| Standard | 50-100ms | <400ms | Cards, panels, nav |
| Dramatic | 100-200ms | <600ms | Hero sections |
| Wave | 30-60ms | <500ms | Data visualizations |
Critical: Total stagger must stay under 500ms.
Deep dive: director/choreography.md
协同入场：
- 核心元素优先 — 主元素先入场或最突出
- 空间一致性 — 所有元素从同一方向入场
- 反向运动 — 核心元素向右移动 → 背景元素以20-30%速度向左移动
1/3规则（距离）：动效移动距离不超过屏幕1/3，否则需添加关键帧变化。
1/3规则（元素）：3个及以上元素时，同时运动的元素不超过1/3。
** stagger预算**：
| 模式 | 延迟 | 总预算 | 适用场景 |
|---|---|---|---|
| 微级联 | 20-40ms | <200ms | 列表项、网格单元 |
| 标准级联 | 50-100ms | <400ms | 卡片、面板、导航 |
| 戏剧级联 | 100-200ms | <600ms | 核心区块 |
| 波浪式 | 30-60ms | <500ms | 数据可视化 |
关键要求：总stagger时长必须低于500ms。
深度解读：director/choreography.md
Emotion-to-Motion Map
情感-动效映射表
| Emotion | Character | Path | Easing | Duration |
|---|---|---|---|---|
| Joy | Bouncy, arcs | Curved, upward | ease-out-back | 200-400ms |
| Calm | Smooth, flowing | Gentle curves | sine ease-in-out | 500-1000ms |
| Urgency | Sharp, fast | Straight lines | ease-out | 100-200ms |
| Sadness | Slow, downward | Drooping curves | cubic ease-in-out | 600-1200ms |
| Surprise | Sudden, expanding | Radial outward | ease-out-expo | 150-300ms |
| Elegance | Slow, controlled | Long arcs | (0.4,0,0.2,1) | 400-700ms |
| Playfulness | Bouncy, irregular | Arcs, squiggly | ease-out-back | 200-350ms |
Path as language: Angular = tense. Curved = friendly. Spiral = whimsical. Diagonal = purposeful. Vertical = growth/weight. Horizontal = progress.
Deep dive: director/emotion-mapping.md
| 情感 | 特征 | 路径 | 缓动（Easing） | 时长（Duration） |
|---|---|---|---|---|
| 愉悦 | 有弹性、弧线 | 曲线、向上 | 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
Weight Classification
重量分类
| Weight | Examples | Duration | Overshoot | Easing |
|---|---|---|---|---|
| Heavy | Modals, overlays | 300-500ms | 0% | Gentle, high damping |
| Medium | Cards, panels | 200-350ms | 3-5% | Moderate |
| Light | Tooltips, badges, icons | 80-200ms | 5-15% | Responsive |
| 重量 | 示例 | 时长（Duration） | 过冲量（Overshoot） | 缓动（Easing） |
|---|---|---|---|---|
| 重型 | 模态框、遮罩层 | 300-500ms | 0% | 平缓、高阻尼 |
| 中型 | 卡片、面板 | 200-350ms | 3-5% | 中等 |
| 轻型 | 提示框、徽章、图标 | 80-200ms | 5-15% | 响应式 |
Quality Rules
质量规则
CRITICAL — never break
至关重要 — 绝对不能违反
- Never linear for spatial movement — always use easing curves (linear only for spinners, progress bars)
- Never opacity-only for important state changes — combine with position or scale
- Never exceed 1/3 screen without intermediate keyframe
- Always three motion layers — primary + secondary + ambient
- 空间移动绝不用linear — 始终使用缓动曲线（linear仅用于旋转器、进度条）
- 重要状态变更绝不能仅用opacity — 结合position或scale
- 移动距离绝不能超过屏幕1/3而无中间关键帧
- 始终包含三层动效 — 主层 + 次层 + 背景层
HIGH — strongly follow
高度推荐 — 严格遵循
- Match duration to element type (see tables)
- Use directional easing (ease-out entrance, ease-in exit)
- Apply Disney principles (especially anticipation, follow-through)
- Maintain consistent personality across scene
Full checklist: reference/quality-checklist.md
- 根据元素类型匹配时长（参考表格）
- 使用方向性缓动（入场用ease-out，退场用ease-in）
- 运用迪士尼动画原则（尤其是预备动作、跟随动作）
- 保持场景内动效风格一致
完整检查清单：reference/quality-checklist.md
Troubleshooting Quick Reference
故障排查快速参考
| Problem | Likely Cause | Fix |
|---|---|---|
| Looks robotic | Linear easing or no arcs | Add easing curves + arc paths |
| Feels too slow | Duration too long for element type | Check duration table, use ease-out |
| Feels cheap/flat | Missing secondary + ambient | Add shadow motion + background life |
| Too distracting | Too many elements moving | Apply 1/3 rule, reduce amplitude |
| No personality | Generic easing everywhere | Apply personality archetype consistently |
Deep dive: reference/troubleshooting.md
| 问题 | 可能原因 | 修复方案 |
|---|---|---|
| 看起来机械生硬 | 使用linear缓动或无弧线 | 添加缓动曲线 + 弧形路径 |
| 感觉太慢 | 时长与元素类型不匹配 | 参考时长表格，使用ease-out |
| 感觉廉价/扁平化 | 缺少次层+背景层动效 | 添加阴影动效 + 背景动态 |
| 过于分散注意力 | 同时运动元素过多 | 应用1/3规则，降低振幅 |
| 无风格特色 | 全用通用缓动曲线 | 一致应用动效风格原型 |
深度解读：reference/troubleshooting.md
File Reference
文件参考
Philosophy (director/):
- core-philosophy.md — Three Pillars deep dive
- decision-framework.md — Full decision pipeline
- disney-principles.md — 12 principles, UI-adapted
- motion-personality.md — 4 archetypes + brand identity
- emotion-mapping.md — Emotion → motion + color psychology
- choreography.md — Multi-element coordination
- narrative-structure.md — Micro-story framework
- context-adaptation.md — Platform, a11y, performance
Reference (reference/):
- timing-easing-tables.md — Duration + easing lookups
- property-selection.md — Property communication guide
- troubleshooting.md — Animation smells + fixes
- quality-checklist.md — Evaluation criteria
Patterns (patterns/):
- entrance-exit.md — Entrance/exit recipes
- state-feedback.md — Success, error, loading, hover
- ambient-continuous.md — Looping, breathing, parallax
- multi-element.md — Stagger + choreography recipes
理念类（director/）：
- core-philosophy.md — 三大核心支柱深度解读
- decision-framework.md — 完整决策流程
- disney-principles.md — 12项迪士尼动画原则的UI适配版
- motion-personality.md — 4种风格原型 + 品牌动效识别
- emotion-mapping.md — 情感→动效 + 色彩心理学
- choreography.md — 多元素协同技巧
- narrative-structure.md — 微故事框架
- context-adaptation.md — 平台、无障碍、性能适配
参考类（reference/）：
- timing-easing-tables.md — 时长+缓动速查表
- property-selection.md — 属性使用指南
- troubleshooting.md — 动效问题及修复方案
- quality-checklist.md — 评估标准
模式类（patterns/）：
- entrance-exit.md — 入场/退场方案
- state-feedback.md — 成功、错误、加载、悬停动效
- ambient-continuous.md — 循环、呼吸、视差动效
- multi-element.md — 级联+编排方案