mcpField
O
orchestrated-sequences

orchestrated-sequences

github.com/dylantarre设计与 UI132513 次安装43 周前更新
代码仓库

关于 orchestrated-sequences

面向动画与界面设计者的编排动画技能，指导多个元素按时序协同运动。内容结合迪士尼动画原则、延迟与缓动建议及 CSS、JavaScript 实现模式。

主要功能

  1. 01多元素时序编排
  2. 02错开延迟与时长变化
  3. 03统一缓动曲线
  4. 04CSS 与 JavaScript 示例

适用场景

  1. 01页面加载动画
  2. 02仪表板内容揭示
  3. 03卡片网格动画
  4. 04导航菜单展开

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --skill orchestrated-sequences

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

详细介绍

编排序列

编排序列协调多个元素随时间的变化。就像指挥家指挥管弦乐团一样，你可以控制每个元素何时登场、如何移动，以及各个元素之间的关系。

迪士尼编排原则

合奏协调

挤压与拉伸：风格统一——所有元素都应具有一致的弹性。混合有弹性和僵硬的效果会显得杂乱。

预备动作：错开准备动作——领头元素先做预备动作，其他元素依次跟上。

演出布局：层次清晰——主要动作引领全局，次要元素提供辅助，但不与其争抢焦点。

连续动作／关键姿势：必须采用关键姿势法——编排需要精确控制时序。

跟随动作：依次收势——各元素按顺序落定，跟随动作彼此重叠。

缓入／缓出：使用同一缓动曲线系列——采用同一曲线的不同变体，以保持协调一致。

弧线运动：路径协调——元素应朝互相配合的方向移动，而不是毫无规律地运动。

次要动作：有意辅助——每个元素都应在构图中发挥作用。

时序：编排的核心——错开延迟、调整时长并改变节奏。

夸张：强调有度——主要元素的动作更夸张，辅助元素则相对克制。

扎实绘制：维持一致的维度逻辑——共享透视、深度和比例关系。

吸引力：表演统一——整个序列应呈现为一个连贯编排的瞬间。

时序策略

/* Linear stagger - equal delays */
.item:nth-child(n) {
  transition-delay: calc(var(--index) * 50ms);
}

/* Accelerating stagger - getting faster */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }

/* Decelerating stagger - slowing down */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }

缓动建议

/* Cohesive family - same curve, different durations */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Sequence curve - smooth start, confident end */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

最佳使用场景

  • 页面加载序列
  • 仪表板内容展示
  • 卡片网格动画
  • 导航菜单展开
  • 功能区块展示
  • 数据可视化构建
  • 引导流程步骤序列
  • 列表内容填充动画

实现模式

/* Staggered reveal system */
.orchestrated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.orchestrated-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Apply delays via CSS custom properties or nth-child */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }

// JS orchestration for complex sequences
const sequence = [
  { el: '.hero', delay: 0, duration: 500 },
  { el: '.title', delay: 100, duration: 400 },
  { el: '.subtitle', delay: 200, duration: 350 },
  { el: '.cta', delay: 350, duration: 400 },
];

关键要点

编排就是时间中的构图。正如视觉设计在空间中安排元素，动画编排则在时间中安排动作。目标是呈现一场完整、连贯的表演，而不是一组独立动画。

评论

支持 Markdown