Back to Details

animation-director

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animation Director

动效指导（Animation Director）

Use this skill when the page needs motion that feels deliberate, premium, and technically sound.
The goal is not to add more animation. The goal is to make motion clarify order, depth, affordance, and identity.
当页面需要具备目的性、高品质且技术合理的动效时，可使用该技能。
我们的目标并非添加更多动效，而是通过动效明确内容顺序、层次结构、交互提示以及品牌特性。

Core Rule

核心原则

Motion follows structure.
Before writing animation code:
  1. Identify the dominant layout idea already chosen by the page.
  2. Decide what motion jobs are actually needed:
    • entry sequence
    • hover feedback
    • sticky narrative
    • product demonstration
    • state transition
  3. Choose one motion profile from references/motion_profiles.md.
  4. If the page uses sticky or scroll-led storytelling, load references/scroll_choreography.md.
  5. Choose the right interaction patterns from references/interaction_patterns.md.
  6. If the user needs help phrasing the motion request, load references/prompt_recipe.md.
  7. Enforce the constraints in references/performance_guardrails.md.
  8. Run the final pass in references/review_rubric.md.
动效依从结构。
在编写动效代码前：
  1. 明确页面已确定的主导布局思路。
  2. 确定实际需要的动效任务：
    • 入场动效序列
    • 悬停反馈
    • 粘性叙事动效
    • 产品展示动效
    • 状态切换动效
  3. 从references/motion_profiles.md中选择一种动效配置。
  4. 如果页面采用粘性或滚动引导式叙事，加载references/scroll_choreography.md。
  5. 从references/interaction_patterns.md中选择合适的交互模式。
  6. 如果用户需要帮助梳理动效需求表述，加载references/prompt_recipe.md。
  7. 严格遵循references/performance_guardrails.md中的性能约束规则。
  8. 使用references/review_rubric.md进行最终审核。

Section-To-Motion Pairing

页面区块与动效的配对

Motion must reinforce the section's job, not merely add movement.
Default pairings:
  • hero -> staged reveal
  • bento -> staggered depth
  • sticky story -> progress-linked transitions
  • proof rail -> continuous drift
  • CTA -> tactile hover/press
Use these as structural defaults unless the brief clearly calls for something else.
Interpret them this way:
  • hero -> staged reveal
    : reveal headline, support copy, and action in a controlled reading order
  • bento -> staggered depth
    : give priority tiles more presence through offset timing, depth, or light motion rather than moving the entire grid
  • sticky story -> progress-linked transitions
    : tie visual state changes to narrative progress so the user understands what changed and why
  • proof rail -> continuous drift
    : allow subtle belt-like motion or chip movement only when it improves liveliness without stealing attention
  • CTA -> tactile hover/press
    : interactions should feel responsive and physical, not flashy
动效必须强化区块的功能，而非单纯增加动态效果。
默认配对方案：
  • 首屏区块（hero）→ 分阶段展示
  • 便当式布局区块（bento）→ 错落层次动效
  • 粘性叙事区块 → 与进度关联的切换动效
  • 案例展示栏（proof rail）→ 持续微动效
  • 行动召唤按钮（CTA）→ 拟物化悬停/按压动效
除非需求文档明确要求其他方案，否则将这些作为默认的结构配对规则。
具体说明如下：
  • 首屏区块→分阶段展示
    ：按照可控的阅读顺序依次展示标题、辅助文案和操作按钮
  • 便当式布局区块→错落层次动效
    ：通过偏移时序、层次或轻微动效提升重点模块的存在感，而非移动整个网格
  • 粘性叙事区块→与进度关联的切换动效
    ：将视觉状态变化与叙事进度绑定，让用户清楚了解变化内容及原因
  • 案例展示栏→持续微动效
    ：仅在提升页面活力且不分散注意力的前提下，使用类似传送带的细微动效或标签移动效果
  • 行动召唤按钮→拟物化悬停/按压动效
    ：交互应具备响应感和真实触感，而非华而不实

How It Combines With Design Skill

与设计技能的配合方式

Use 
$animation-director
as a companion layer, not as a substitute for layout judgment.
Typical pairing:
  • $design-skill
    decides structure, hierarchy, and style direction
  • $animation-director
    decides sequencing, interaction behavior, scroll choreography, and motion restraint
If no strong structure exists yet, fix layout first.
将
$animation-director
作为辅助层使用，而非替代布局判断。
典型配合模式：
  • $design-skill
    负责确定结构、层级和风格方向
  • $animation-director
    负责确定动效序列、交互行为、滚动编排以及动效克制原则
如果尚未形成清晰的结构，应优先优化布局。

Design Intent

设计目标

Good motion should:
  • make reading order clearer
  • reinforce hierarchy
  • make UI feel tactile
  • help product surfaces feel alive
  • stay performant on real devices
  • respect the structural role of each section
Bad motion:
  • decorates weak layouts
  • loops everywhere
  • competes with the content
  • animates layout properties unnecessarily
  • gives every section the same fade-up treatment regardless of purpose
优质动效应具备以下特点：
  • 提升阅读顺序的清晰度
  • 强化层级结构
  • 让UI具备拟物化触感
  • 让产品界面富有生机
  • 在真实设备上保持高性能
  • 尊重每个区块的结构功能
劣质动效的表现：
  • 为薄弱的布局做装饰
  • 到处使用循环动效
  • 与内容争夺注意力
  • 不必要地对布局属性做动效
  • 不区分区块用途，统一使用淡入上移动效

Compositional Motion Rules

动效编排规则

  • choose motion after the page structure is already clear
  • concentrate the largest motion budget in one or two moments
  • let quiet sections stay quiet
  • if a section is already visually dense, reduce animation complexity
  • if motion does not improve reading order, affordance, or persuasion, remove it
  • 在页面结构确定后再选择动效
  • 将大部分动效预算集中在一两个关键节点
  • 让视觉简洁的区块保持简洁，不添加多余动效
  • 如果区块视觉元素已较为密集，降低动效复杂度
  • 如果动效无法提升阅读顺序、交互提示或说服力，则移除该动效

Output Expectations

输出要求

When using this skill:
  • keep motion scoped to meaningful places
  • use transform and opacity first
  • avoid animation systems that force constant rerenders
  • preserve accessibility and readability
  • dial intensity according to the brief, not personal taste
  • simplify or remove decorative motion on mobile when clarity drops
使用该技能时：
  • 仅在有意义的位置添加动效
  • 优先使用transform和opacity属性实现动效
  • 避免使用会导致持续重渲染的动效系统
  • 保障可访问性和可读性
  • 根据需求文档调整动效强度，而非个人喜好
  • 在移动设备上，若清晰度下降，简化或移除装饰性动效