动效系统工程：从缓动曲线到滚动触发的完整实践

本文是设计系统系列的第三篇。前两篇分别从 Token 架构和风格光谱的宏观视角讨论了 UI 设计系统，本文则聚焦一个被广泛误解的技术细节——动效。不是"加个过渡就好"，而是一套从缓动函数数学原理到滚动触发阈值选择的完整工程体系。

一、动效不是装饰，是交互语言

在七轮 UI 风格迭代中，每一轮都使用了不同的缓动函数：

/* Apple Minimalist — 弹簧 */
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

/* Linear — 果断 */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

/* Skeuomorphism — 机械弹簧 */
--ease-mechanical: cubic-bezier(0.175, 0.885, 0.32, 1.275);

/* Industrial — 标准 */
--ease: cubic-bezier(0.4, 0, 0.2, 1);

这四个缓动函数的差异，不是"哪个更好看"的问题，而是它们定义了界面的交互性格。Apple 的弹簧让按钮感觉"活泼"，Linear 的 expo-out 让卡片感觉"果断"，Skeuomorphism 的机械弹簧让开关感觉"物理"，Industrial 的标准 ease 让一切感觉"功能性"。

核心论点：缓动函数是动效系统中最关键的决策——它比动效时长、位移幅度、触发方式都更重要。因为缓动函数定义了运动的"性格"，而性格决定了用户对界面的情感认知。

二、贝塞尔曲线的数学与感知

2.1 cubic-bezier 的四个参数

cubic-bezier(x1, y1, x2, y2) 定义了一条三次贝塞尔曲线，控制点为 (x1, y1) 和 (x2, y2)。曲线的起点固定在 (0, 0)，终点固定在 (1, 1)。

• x 轴：时间进度（0 = 动画开始，1 = 动画结束）
• y 轴：属性进度（0 = 起始值，1 = 结束值）

关键约束：x 值必须在 [0, 1] 范围内（时间不能倒流），但 y 值可以超出 [0, 1]——这就是 overshoot 的来源。

2.2 y 值超出 1 的物理意义

当 y2 > 1 时，属性值会超过目标值，然后回弹。这就是"弹簧"效果的数学本质：

/* y2 = 1.4 → 属性会超过目标值 40%，然后回弹 */
cubic-bezier(0.34, 1.4, 0.64, 1);

在视觉上，这意味着一个按钮从 translateY(0) 过渡到 translateY(-4px) 时，会先冲到大约 translateY(-5.6px)（超过 40%），然后回弹到 -4px。这个"冲过头再回来"的运动模式，正是物理弹簧的行为特征。

为什么这比 transition: transform 0.3s ease 更有"物理感"？ 因为 ease（cubic-bezier(0.25, 0.1, 0.25, 1)）的 y 值始终在 [0, 1] 内——属性值单调递增，永远不会超过目标。这在物理世界中是不自然的：没有任何一个物理对象能瞬间精确停止在目标位置，所有物理运动都有惯性。

2.3 控制点与运动阶段

贝塞尔曲线的两个控制点将运动分为三个阶段：

阶段 1: 起点到 (x1, y1) — 启动阶段
阶段 2: (x1, y1) 到 (x2, y2) — 主运动阶段
阶段 3: (x2, y2) 到终点 — 收尾阶段

以 Linear 的 cubic-bezier(0.16, 1, 0.3, 1) 为例：

• 阶段 1（0 → 0.16）：y 从 0 急速上升到 1——属性值在 16% 的时间内完成了 100% 的变化。启动极快。
• 阶段 2（0.16 → 0.3）：y 已经到达 1，保持不变——属性值已经到位，但时间还在推进。
• 阶段 3（0.3 → 1）：y 保持 1——剩余 70% 的时间什么都不做。

这就是 expo-out 的本质：动画在 16% 的时间内完成所有工作，然后用 84% 的时间"展示结果"。用户感知到的是"瞬间到位，然后稳定"——果断、不犹豫、不拖泥带水。

对比 Apple 的 cubic-bezier(0.34, 1.4, 0.64, 1)：

• 阶段 1（0 → 0.34）：y 从 0 上升到 1.4——属性值在 34% 的时间内超过目标 40%。
• 阶段 2（0.34 → 0.64）：y 从 1.4 回落到约 0.9——属性值从超调位置回弹。
• 阶段 3（0.64 → 1）：y 从 0.9 缓慢回到 1——属性值稳定在目标位置。

用户感知到的是"冲过去 → 弹回来 → 稳定"——有活力但不混乱。

三、三种缓动曲线的物理隐喻

3.1 弹簧（Spring）：Apple 的 cubic-bezier(0.34, 1.4, 0.64, 1)

物理隐喻：一个轻质弹簧悬挂的物体，被向下拉然后释放。物体先冲过平衡点（overshoot），然后回弹，最终稳定。

位移
  ↑
  │    ╱╲    ← overshoot (y=1.4)
  │   ╱  ╲
  │  ╱    ╲___← 回弹后稳定
  │ ╱
  │╱
  └──────────→ 时间

适用场景：需要"活力感"的交互——按钮悬浮、卡片抬升、徽标弹出。但不适合需要精确感的交互——数据加载、状态切换、表单验证。

overshoot 值的选择：1.4 是一个温和的 overshoot——足以感知到弹跳，但不至于让用户觉得"失控"。如果 overshoot 设为 1.6 以上，弹跳会变得夸张，适合 playful 风格但不适合专业工具。

3.2 Expo-out：Linear 的 cubic-bezier(0.16, 1, 0.3, 1)

物理隐喻：一个高速运动的物体瞬间制动——没有惯性、没有回弹，精确停在目标位置。

位移
  ↑
  │ ╱─────── ← 瞬间到位，然后保持
  │╱
  └──────────→ 时间

适用场景：需要"精确感"的交互——开发者工具中的面板展开、数据更新、状态切换。Linear 作为开发者工具，使用 expo-out 是一个语义选择：开发者不希望界面"弹来弹去"，他们希望界面"说到做到"。

为什么 x1 = 0.16 而不是 0.1 或 0.2？ 0.16 意味着动画在前 16% 的时间内完成所有变化。如果设为 0.1，启动太快，用户可能感知不到动画的存在（看起来像瞬间切换）；如果设为 0.25，启动太慢，用户会觉得界面"拖沓"。0.16 是一个经验性的甜蜜点——快到果断，慢到可感知。

3.3 机械弹簧：Skeuomorphism 的 cubic-bezier(0.175, 0.885, 0.32, 1.275)

物理隐喻：一个机械开关被按下——有物理阻尼、有明确回弹、运动轨迹遵循机械结构约束。

位移
  ↑
  │    ╱╲     ← overshoot (y=1.275)
  │   ╱  ╲___ ← 回弹后稳定
  │  ╱
  │ ╱
  │╱
  └──────────→ 时间

与 Apple 弹簧的区别：

• Apple 的 overshoot 是 1.4（超过目标 40%），机械弹簧是 1.275（超过目标 27.5%）——机械弹簧的弹跳更克制
• Apple 的第一控制点 x1 是 0.34，机械弹簧是 0.175——机械弹簧启动更快
• Apple 的第二控制点 x2 是 0.64，机械弹簧是 0.32——机械弹簧回弹更快

结论：机械弹簧 = 更快的启动 + 更小的 overshoot + 更快的回弹。它模拟的不是"自由弹簧"，而是"有阻尼的机械结构"——像一个真实的按钮开关，有明确的行程和回弹点。

四、动效时长与缓动的配对策略

缓动函数定义了运动的"形状"，时长定义了运动的"规模"。两者必须配对使用——同一个缓动函数在不同时长下会产生截然不同的感知。

4.1 时长感知的非线性

人类对动效时长的感知是非线性的：

关键原则：时长越短，缓动函数的差异越不明显。在 150ms 的按钮按压中，弹簧和 expo-out 几乎无法区分。缓动函数的差异在 300ms 以上才开始显著。

4.2 七轮迭代中的配对实践

/* Apple Minimalist — 弹簧 + 中等时长 */
.btn:hover { transition: transform 0.3s var(--ease-spring); }
.card:hover { transition: box-shadow 0.3s var(--ease-spring), transform 0.3s var(--ease-spring); }

/* Linear — expo-out + 快速时长 */
.card:hover { transition: transform 0.4s var(--ease-snap); }
.btn:active { transition: transform 0.2s var(--ease-out); }

/* Skeuomorphism — 机械弹簧 + 分阶段时长 */
.btn { transition: box-shadow 0.2s var(--ease-mechanical), transform 0.2s var(--ease-mechanical); }
.btn:active { transition: box-shadow 0.15s var(--ease-mechanical); }

/* Industrial — 标准 ease + 快速时长 */
.int-row { transition: background 0.15s var(--ease), padding-left 0.2s var(--ease); }

配对规律：

• 弹簧类缓动 → 配 300-400ms（需要时间展示弹跳）
• expo-out 类缓动 → 配 200-400ms（快速启动需要中等时长来展示收尾）
• 标准 ease → 配 150-200ms（不需要展示个性，越快越好）

4.3 入场动画的特殊配对

入场动画（reveal）的时长需要比交互动画更长，因为用户需要时间感知"从无到有"的变化：

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

为什么用 0.7s 而不是 0.3s？ 因为入场动画的目的是"引导注意力"——用户需要看到元素"正在出现"。如果时长太短（0.3s），用户可能只看到"突然出现了"，感知不到过渡过程。0.7s 给用户足够的时间感知"渐入"的运动，但又不至于让他们等待。

为什么入场动画用 expo-out 而不是弹簧？ 因为入场动画不需要"活力"——它需要"流畅"。弹簧的 overshoot 在入场场景中会产生"弹过头再回来"的视觉，让元素看起来"不稳定"。expo-out 的"快速到位然后稳定"更适合入场——元素迅速到达目标位置，然后安静地待在那里。

五、Stagger 设计：交错入场的节奏感

5.1 什么是 Stagger

Stagger（交错）是指多个元素的入场动画不是同时开始，而是依次延迟启动，形成"逐个浮现"的节奏感：

document.querySelectorAll(".reveal").forEach(function (el, i) {
  el.style.transitionDelay = (i % 3) * 0.08 + "s";
  observer.observe(el);
});

这段代码的实现策略是：每 3 个元素为一组，组内依次延迟 0s、0.08s、0.16s。为什么是 3 个一组而不是全局递增？ 因为全局递增（i * 0.08s）会导致页面底部的元素延迟过长——第 20 个元素要等 1.6s 才开始入场，用户早已滚动过去了。

5.2 Stagger 间隔的选择

0.08s 是最常用的甜蜜点——足以让用户感知到"依次出现"的节奏，又不至于让后面的元素等待太久。

5.3 分组 Stagger 的工程实现

在七轮迭代中，所有版本都使用了 i % 3 的分组策略。但不同风格的分组逻辑有细微差异：

/* Apple Minimalist — 3 组，0.09s 间隔 */
el.style.transitionDelay = (i % 3) * 0.09 + "s";

/* Linear — 3 组，0.08s 间隔 */
el.style.transitionDelay = (i % 3) * 0.08 + "s";

/* Skeuomorphism — 3 组，0.08s 间隔 */
el.style.transitionDelay = (i % 3) * 0.08 + "s";

/* Editorial — 3 组，0.08s 间隔 */
el.style.transitionDelay = (i % 3) * 0.08 + "s";

/* Industrial — 3 组，0.06s 间隔（更快，功能优先） */
el.style.transitionDelay = (i % 3) * 0.06 + "s";

Industrial 的间隔更短（0.06s vs 0.08s），因为功能导向的界面不需要"优雅的依次浮现"——它需要"快速就绪"。这又一次印证了装饰-功能光谱：stagger 间隔越短，界面越"功能化"；间隔越长，界面越"叙事化"。

六、IntersectionObserver 阈值选择

6.1 阈值的含义

IntersectionObserver 的 threshold 参数定义了"元素可见面积达到多少比例时触发回调"：

var observer = new IntersectionObserver(callback, { threshold: 0.12 });

threshold: 0.12 意味着当元素有 12% 的面积进入视口时，触发入场动画。

6.2 不同元素的阈值策略

在七轮迭代中，不同类型的元素使用了不同的阈值：

/* 入场动画 — threshold: 0.12 */
var revealObserver = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) { entry.target.classList.add("is-visible"); }
  });
}, { threshold: 0.12 });

/* 数字 count-up — threshold: 0.5 */
var countObserver = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (!entry.isIntersecting) return;
    /* 启动数字递增动画 */
  });
}, { threshold: 0.5 });

/* 进度条填充 — threshold: 0.4 + rootMargin */
var fillObserver = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (!entry.isIntersecting) return;
    entry.target.style.width = entry.target.getAttribute("data-fill") + "%";
  });
}, { threshold: 0.4, rootMargin: "0px 0px -40px 0px" });

为什么数字 count-up 用 0.5 而入场动画用 0.12？

• 入场动画的目的是"在元素即将可见时就开始过渡"——如果等元素完全可见（threshold: 1.0）才触发，用户会先看到元素的初始状态（opacity: 0），然后突然开始动画，体验不连贯。0.12 确保动画在元素刚进入视口边缘时就开始，用户看到的是"正在浮现"而非"突然出现"。
• 数字 count-up 的目的是"在用户能清楚看到数字时才开始递增"——如果阈值太低（0.12），数字可能在用户还没注意到它时就开始递增，用户只看到结果而非过程。0.5 确保数字至少有一半在视口内时才开始，用户能完整感知"从 0 递增到目标值"的过程。

6.3 rootMargin 的作用

进度条填充使用了 rootMargin: "0px 0px -40px 0px"：

{ threshold: 0.4, rootMargin: "0px 0px -40px 0px" }

rootMargin 调整了观察区域的边界——-40px 的底部边距意味着视口底部向上收缩 40px。元素需要进入这个收缩后的区域才会触发回调。

为什么需要这个？ 因为进度条位于卡片底部——如果不收缩视口，当卡片顶部进入视口时（threshold: 0.4 满足），进度条可能还在视口外。收缩 40px 确保进度条本身（而非仅仅是包含它的卡片）已经进入可视区域。

七、动效降级的工程实践

7.1 prefers-reduced-motion 的正确实现

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

关键细节：

1. * 选择器确保所有元素都被覆盖——不只是 .reveal 类的元素
2. !important 确保降级规则优先级最高——不会被组件级样式覆盖
3. .reveal 的 opacity: 1; transform: none; 是必须的——如果只禁用 transition 而不重置 opacity，元素会永远停留在 opacity: 0 的初始状态，变成不可见的幽灵

7.2 降级不等于删除

动效降级的正确理解是"提供等效的即时状态"，而非"删除所有视觉反馈"：

/* 错误：只禁用动画，不重置初始状态 */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
  /* .reveal 仍然是 opacity: 0 → 元素不可见！ */
}

/* 正确：禁用动画 + 重置到最终状态 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

7.3 JavaScript 动效的降级

CSS 动效可以通过 prefers-reduced-motion 降级，但 JavaScript 驱动的动效（如 count-up、progress fill）需要额外的检查：

var prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

counters.forEach(function (el) {
  if (prefersReducedMotion.matches) {
    /* 降级：直接设置最终值，不执行递增动画 */
    el.textContent = el.getAttribute("data-count");
  } else {
    countObserver.observe(el);
  }
});

在七轮迭代的实践中，这一点并未完全实现——所有版本的 count-up 和 progress fill 都依赖 IntersectionObserver 触发，没有在 prefers-reduced-motion 下提供即时降级。这是一个工程债，在生产环境中应该补上。

八、动效系统的 Token 化

将动效参数提取为设计 Token，是实现主题切换的基础：

:root[data-theme="apple"] {
  --ease-primary: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-secondary: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.7s;
  --stagger-interval: 0.09s;
}

:root[data-theme="linear"] {
  --ease-primary: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-secondary: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.7s;
  --stagger-interval: 0.08s;
}

:root[data-theme="industrial"] {
  --ease-primary: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-secondary: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.5s;
  --stagger-interval: 0.06s;
}

组件引用语义 Token，主题切换时只需替换映射：

.btn {
  transition: transform var(--duration-normal) var(--ease-primary),
              background var(--duration-fast) var(--ease-primary);
}

.reveal {
  transition: opacity var(--duration-slow) var(--ease-secondary),
              transform var(--duration-slow) var(--ease-secondary);
}

这是动效系统工程的终极目标：缓动函数、时长、stagger 间隔全部 Token 化，主题切换时动效性格随之改变——Apple 的按钮弹跳，Linear 的按钮果断，Industrial 的按钮高效——组件代码零修改。

九、总结：动效系统工程的三层架构

与颜色 Token 的三层架构完全平行——设计系统的每个维度都应该遵循同样的分层逻辑。颜色如此，阴影如此，动效也如此。

最终洞察：动效系统不是"给界面加动画"，而是"定义界面如何运动"。前者是装饰，后者是工程。区分两者的标准很简单——如果你的动效参数可以被 Token 化并在主题间切换，那就是工程；如果只能硬编码在某个组件里，那就是装饰。

本文是设计系统系列的第三篇。系列文章：

1. 《从 Token 到主题：用设计系统思维构建可切换的前端 UI》— Token 三层架构、阴影体系、主题切换实现
2. 《从装饰到功能：七种 UI 风格的实践边界》— 风格光谱、Editorial 与 Industrial 实践、决策框架
3. 《动效系统工程：从缓动曲线到滚动触发的完整实践》— 缓动函数数学、时长配对、stagger 设计、IntersectionObserver 阈值、降级实践