mcpField
T
transition-sequences

transition-sequences

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

关于 transition-sequences

这是一项设计技能，运用 Disney 的 12 项动画原则规划多步骤 UI 动效，并为设计师和开发者提供时序建议与实现模式。

主要功能

  1. 01将 12 项动画原则用于序列动效
  2. 02按序列类型提供时序建议
  3. 03展示 CSS 错开动画与 JavaScript 延迟模式
  4. 04建议减少动态效果与跳过选项

适用场景

  1. 01编排页面或模态框过渡
  2. 02错开引导流程中的元素动画
  3. 03检查序列时序与动态效果无障碍性

安装

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

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

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

详细介绍

转场序列动画

将迪士尼的 12 条原则应用于编排式多步骤动效。

原则应用

挤压与拉伸：序列中的每个元素都可以独立压缩或拉伸，营造自然的感觉。

预备动作：序列以准备阶段开始。在动作开始前稍作停顿或蓄势。

舞台调度：通过序列引导注意力。让最重要的元素先动或最后动。

连续动作与关键姿势：为每个步骤规划关键帧。实现前先规划完整序列。

跟随动作与重叠动作：元素不会同步移动。错开 50-100ms 开始，让动作层层传递。

慢入慢出：每个步骤都要有缓动，整个序列也应如此——中间较快，两端较慢。

弧线运动：跨越空间的转场应沿弧线运动。例如，页面向左滑动时应略带弧度，而非直线滑动。

次要动作：主要转场搭配次要细节。页面滑动的同时，内部元素淡入或缩放。

时长：

  • 步骤重叠：占前一步时长的 30-50%
  • 序列总时长：UI 为 300-800ms，戏剧性场景最长可达 1500ms
  • 步骤间隔：0-100ms（优先重叠）

夸张：序列本身就是一种夸张。单个步骤应保持细微。

扎实绘制：保持空间一致性。如果 A 向左移动，B 就应从左侧进入。

吸引力：序列应讲述一个故事，有令人满意的开始、中间和结尾。

时长建议

序列类型总时长步骤数步骤重叠
标签页切换300ms250%
页面转场500-600ms2-330%
模态框打开400ms340%
向导步骤400ms250%
引导流程800-1200ms4-630%
戏剧性揭示1000-1500ms5-840%

实现模式

/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

序列编排公式

// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});

关键规则

  1. 步骤重叠 30-50%——不要留空隙，也不要同时开始
  2. 功能性 UI 的序列总时长不超过 800ms
  3. 以 0.5 倍速测试，验证编排效果
  4. 对超过 500ms 的序列提供跳过选项
  5. prefers-reduced-motion：立即切换状态，不播放序列

评论

支持 Markdown