mcpField
A
anticipation-mastery

anticipation-mastery

github.com/dylantarre创意与媒体132521 次安装43 周前更新
代码仓库

关于 anticipation-mastery

一项讲解预备动作的设计技能,说明如何通过动作准备让后续行为更易读,并营造张力。适用于动画师和交互设计师,可按动作需求安排身体、认知与情绪提示的时机。

主要功能

  1. 01为观众预告即将发生的动作
  2. 02用预备姿势引导注意力
  3. 03按动作规模调整时长
  4. 04让预备动作配合时机与构图
  5. 05用反转制造惊喜或喜剧效果

适用场景

  1. 01设计清晰可读的攻击前摇
  2. 02为页面转场加入预备动作
  3. 03在角色反应前营造张力
  4. 04让游戏技能蓄力过程易于理解

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill anticipation-mastery

安装后在 Claude Code 中输入/anticipation-mastery确认已加载。

详细介绍

预备动作精要

预备动作原则

预备动作能让观众为即将发生的动作做好准备。迪士尼动画师通过观察戏剧表演发现,如果没有预备动作,动作就会显得“凭空发生”,让人困惑而非兴奋。该原则是:任何重要动作开始前,都必须有一个反向动作。

核心理论

牛顿第三定律的视觉呈现:身体动作需要预备。投手投球前会先蓄力,猫扑击前会先蹲伏。预备动作让这种机械上的必要性变得清晰而富有戏剧性。

引导注意力:预备动作告诉观众该看哪里,以及该期待什么。它将惊讶转化为悬念,带来更引人入胜的情绪体验。

三大功能

  1. 身体准备:身体必须先收紧蓄力,才能弹射而出(跳跃、投掷、出拳)
  2. 心理准备:观众需要时间来意识到即将发生的动作
  3. 情绪准备:释放前不断累积的紧张感会增强冲击力

时长变化

时长传达动作幅度:小动作的预备时间较短(2-4 帧),重大时刻的预备时间较长(12-24 帧)。蓄势整整一秒,会让观众知道有大事即将发生。

反比关系:预备动作越充分,后续动作就可以越快,同时仍保持清晰易读。

与其他原则的相互作用

调度依赖预备动作:预备姿势会将注意力引向动作即将发生的位置。

预备动作比例决定时序:经典公式为 1:2,即一拍预备动作对应两拍主要动作。

这里常会运用挤压与拉伸:角色在爆发式动作前会先压缩身体。

夸张手法能强化预备动作:卡通角色的蓄势动作会超出现实可能性,以达到喜剧效果。

不同领域的应用

UI/动效设计
  • 按钮悬停状态:轻微放大,预示点击后的响应
  • 页面过渡:导航前短暂停顿或进行微小动作
  • 加载状态:内容出现前的脉动或蓄势动画
  • 拖动交互:元素“松开”前略微产生阻力
角色动画
  • 跳跃准备:先充分蹲下并保持姿势,再起跳
  • 出拳动作:向前挥拳前先向后转动肩膀
  • 情绪转变:做出反应前先静止片刻
微交互
  • 切换开关:切换到新状态前短暂压缩
  • 通知:从屏幕外轻微进入,然后停稳
  • 工具提示:短暂延迟,并从原点轻微放大
游戏设计
  • 攻击前摇:提供清晰可读的预警,让玩家有机会应对
  • 技能蓄力:视觉效果随力量累积逐渐增强
  • Boss 攻击模式:夸张的预备动作能形成可供玩家掌握的机制

常见错误

  1. 完全省略预备动作:动作会显得机械且突兀
  2. 对小动作过度预备:整体感觉会迟缓,动画也会显得过多
  3. 方向错误:预备动作必须与动作方向相反
  4. 时长一成不变:应根据动作的重要性调整预备时长

反转技巧

想要营造喜剧或惊喜效果,可以打破观众对预备动作的预期。蓄势很久,最后只做一个小动作;或者完全没有蓄势,就突然做出巨大动作。违反这一原则会让人感到多么突兀,恰恰证明了它的力量。

实施启发

任何持续时间超过 200ms 的动作都应有预备动作。预备动作的时长应为主要动作时长的 30-50%。当动作感觉“空洞”时,通常就是缺少了预备动作。

评论

支持 Markdown