mcpField
U
universal-timing

universal-timing

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

关于 universal-timing

一项依据迪士尼原则制定不同动画时长的设计技能，提供时序比例、缓动建议及结合场景选择时长的规则。

主要功能

  1. 01适用于不同动画时长的指导
  2. 02预备与跟随动作比例
  3. 03交错延迟建议
  4. 04按时长选择缓动方式
  5. 05基于场景的时长规则

适用场景

  1. 01设定短动画与长动画的时长
  2. 02为序列选择交错延迟
  3. 03调整动作以传达重要程度

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-timing

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

详细介绍

通用时序原则

一些动画真理不受时长限制。这些原则适用于 50ms 和 5000ms。掌握它们，就能在任何时间尺度上做出良好的时序决策。

迪士尼原则——普遍适用

始终适用

挤压与拉伸：按比例缩放——100ms 时缩放 5%，2000ms 时缩放 30%。绝不省略，始终按比例调整。

预备动作：比例保持不变——预备动作占主要动作时长的 20-30%，与总时长无关。

演出布局：聚焦于一个明确重点——无论是瞬间动画还是电影级动画，都只能有一项内容吸引主要注意力。

连续动作／关键姿势：复杂度与时长相匹配——短动画采用连续动作，长动画采用关键姿势。

跟随动作：适用于所有时长——即使是 100ms，也可以有微小的过冲。幅度应与时长相匹配。

缓入／缓出：始终使用缓动——无论时长如何，线性运动看起来都很机械。

弧线：自然路径按比例缩放——短动画采用细微曲线，长动画采用大幅弧线。

次要动作：起辅助作用，绝不喧宾夺主——无论是 50ms 还是 5000ms，这一点都成立。

时序：时长决定感知——相同的动作在不同速度下会呈现不同效果。

夸张：与时长和重要性相匹配——时长越长，越适合夸张表现。

扎实绘制：变形必须一致——无论速度如何，一致性都很重要。

吸引力：最终目标——无论时长如何，动画都应起到增强效果，而非造成阻碍。

通用比例

动画时序的黄金比例
Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms
错开比例
Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items
缓动强度与时长
Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible

适用于所有场景的缓动

/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

通用法则

  1. 距离越短，时长越短——运动应与空间距离成比例。

  2. 较大的元素移动得更慢——感知到的重量需要更多时间来体现。

  3. 进入要快，退出更要快——用户关心的是即将出现的内容，而不是正在离开的内容。

  4. 情境决定容忍度——首次访问时，动画可以比重复使用时更长。

  5. 注意力有限——无论时长如何，都应明智地争取注意力。

  6. 物理规律提供直觉——无论速度如何，都要符合对现实世界的预期。

  7. 缓动不可或缺——无论时长如何，线性运动看起来都不自然。

  8. 在极端情况下测试——如果在 2x 和 0.5x 下都能正常工作，就说明它足够稳健。

时长选择框架

What should the user feel?
├── Instant (< 100ms)
│   └── Confirmation, responsiveness
├── Quick (100-300ms)
│   └── Efficiency, polish
├── Standard (300-500ms)
│   └── Clarity, communication
├── Deliberate (500-1000ms)
│   └── Importance, attention
└── Dramatic (> 1000ms)
    └── Story, emotion, memory

核心观点

时长是一项设计决策。它传达重要性、引导注意力并塑造情绪。迪士尼原则是工具——时序决定了你如何运用它们。掌握这些原则，然后根据情境决定时长。

评论

支持 Markdown