micro-100-200ms

用途

本技能用于指导构建 100-200ms 区间的微交互动画。该时长范围被认为是微交互的“最佳区间”：快到足以让人感觉响应迅速，慢到能被感知为有意的运动。

主要能力

技能围绕迪士尼动画原则在微速度下的应用展开，说明哪些原则适用、哪些不适用。

适用（Works Well）

• 挤压与拉伸（Squash & Stretch）：轻度应用，5-10% 适用于有弹性的按钮和出现元素。
• 预备动作（Anticipation）：可做微预备，在 150ms 动作前有 20-30ms 的蓄力。
• 舞台布置（Staging）：单一焦点，一个元素运动，其余保持静止。
• 逐帧/关键帧（Straight Ahead/Pose to Pose）：两者皆可，简单到可逐帧，也可控到用关键帧。
• 跟随动作（Follow Through）：最小过冲，超出目标 2-5%，快速稳定。
• 缓入缓出（Slow In/Slow Out）：以 ease-out 为主，元素应自信地到达。
• 弧线（Arcs）：可有轻微曲线，下拉项可略微弧线而非直下。
• 次要动作（Secondary Action）：最多一个次要动作，例如菜单打开时图标旋转。
• 时间（Timing）：60fps 下 6-12 帧，足以实现平滑运动。
• 夸张（Exaggeration）：适度，缩放 0.9-1.1，旋转最多 30 度。
• 扎实的绘画（Solid Drawing）：简单变换，缩放、透明度、短距离位移。
• 吸引力（Appeal）：快速动画显得现代而精致。

不适用（Doesn't Work）

• 长距离移动
• 复杂编排
• 重物理模拟
• 多阶段揭示
• 繁复的预备动作序列

使用方式

缓动建议

/* Standard micro-interaction */
transition: all 150ms ease-out;

/* Appearing elements - start fast, land soft */
transition: opacity 120ms ease-out, transform 150ms ease-out;

/* Bouncy micro-feedback */
transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);

实现模式

.tooltip {
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition: opacity 120ms ease-out,
              transform 150ms ease-out;
}

.trigger:hover .tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  opacity: 0;
  transform: translateY(-8px);
  transition: all 150ms ease-out;
}

适用场景

• 工具提示出现
• 下拉菜单打开
• 图标状态变化
• 小型悬停动画
• 通知徽章
• 标签切换
• 手风琴标题

限制

该时长区间不适合长距离移动、复杂编排、重物理模拟、多阶段揭示和繁复的预备动作序列。

关键洞察

微动画更多是被“感受”而非被“观看”。用户会在缺失时注意到它们，但不会刻意观察它们。这正是精致感所在之处。