缓入缓出曲线：默认线性运动太机械，调曲线让动画瞬间专业

一、为什么线性运动让人感到“机械”

在真实物理世界中，几乎不存在“瞬间达到匀速”的物体。任何有质量的物体从静止到运动，都需要经历加速过程；从运动到停止，也需要经历减速过程。线性动画（linear）假设速度恒定，位移与时间成正比，这在数学上最简洁，却在感知上最不自然。

我们可以做一个简单的思想实验：想象一辆汽车在 0 秒时静止，在 1 秒时突然以 60km/h 匀速行驶，在 2 秒时又突然停止。这种运动在现实中不可能发生，因为它需要无穷大的加速度。线性动画正是这种“无穷大加速度”的离散近似——它在起点和终点处制造了速度的突变，而人眼对速度突变极其敏感。

1.1 速度突变与视觉不适

人类视觉系统经过数百万年进化，对加速度变化形成了高度敏感的检测机制。研究表明，当物体运动的速度发生突变时，观察者的眼动系统需要额外的调整时间，这种“视觉冲击”会被主观解读为“生硬”或“廉价”。本文评述：线性动画的问题不在于“快”或“慢”，而在于加速度的不连续——它让大脑无法预测运动轨迹，从而产生认知负荷。

在界面设计中，这种不适感会被放大。因为界面元素通常承载着功能语义：一个按钮的按下反馈、一个卡片的展开、一个模态框的弹出，用户需要从运动中获得“操作已被响应”的确认。线性运动无法传达这种确认感，反而让用户怀疑系统是否卡顿。

1.2 从“机械”到“有机”的认知跃迁

迪士尼动画十二原则中的“缓入缓出”（Slow In and Slow Out）最早系统性地阐述了这一规律。动画师发现，让动作在起始和结束阶段放慢，中间阶段加速，能够显著提升动作的自然感和表现力。这一原则后来被引入数字界面设计，成为动效设计的基石之一。

笔者认为，缓动曲线的本质是“时间重映射”：它不改变动画的起点、终点和总时长，只改变时间轴上各时刻对应的进度值。这种重映射让运动在感知上获得“质量”——起始时克服惯性，结束时释放动能。正是这种质量感，让界面从“机械”走向“有机”。

关键洞察：线性动画描述的是“位置随时间均匀变化”，而缓动动画描述的是“速度随时间连续变化”。前者是数学抽象，后者是物理直觉。

二、缓动曲线的感知心理学基础

要理解缓动曲线为何有效，需要从感知心理学入手。人眼对运动的感知并非逐帧分析，而是通过预测和补偿机制构建连续的运动印象。缓动曲线之所以“自然”，是因为它模拟了这种预测机制所期待的运动模式。

2.1 运动预测与贝叶斯感知

现代视觉神经科学认为，大脑对运动的感知是一种贝叶斯推理过程：先验知识（物体通常如何运动）与感官输入（视网膜上的光流）相结合，产生对运动状态的后验估计。当动画的运动模式与先验知识一致时，感知流畅；不一致时，产生“突兀感”。

真实物体的运动通常遵循“加速—匀速—减速”的三段式模式，且加速度变化连续（即加加速度 jerk 有界）。缓动曲线通过控制加速度的连续性，让动画更符合大脑的先验预期。本文评述：这意味着缓动不仅是美学选择，更是降低认知负荷的工程手段——它让用户无需额外注意力就能理解界面状态变化。

2.2 时间感知与动画时长

动画时长与缓动曲线是耦合的。同样的曲线，在 100ms 和 1000ms 下的感知效果截然不同。根据 Nielsen Norman Group 的经典研究，界面动画的合理时长通常在 100ms 到 500ms 之间：低于 100ms 用户感觉不到动画，高于 500ms 用户会感到等待。

但这一范围并非绝对。对于小元素的微交互（如按钮按下），100–200ms 足够；对于大面积的转场（如页面切换），300–500ms 更合适。缓动曲线的作用是在给定总时长内，重新分配“感知时间”——让起始和结束阶段占据更多感知权重，从而让动画显得更“有内容”。

动画类型	推荐时长	推荐曲线	感知目标
按钮反馈	80–150ms	ease-out	即时响应
卡片展开	200–300ms	ease-in-out	平滑过渡
模态弹出	250–350ms	cubic-bezier(.34,1.56,.64,1)	弹性入场
页面转场	300–500ms	ease-in-out	空间连续
列表滚动惯性	物理模拟	弹簧阻尼	真实惯性

表 1：常见动画类型的时长与曲线推荐（综合 Material Design、Apple HIG 与 Nielsen Norman Group 建议整理）

2.3 方向性与空间连续性

缓动曲线还承载方向性信息。例如，ease-out（先快后慢）常用于“进入”场景，暗示元素从外部进入并稳定下来；ease-in（先慢后快）常用于“退出”场景，暗示元素加速离开。这种约定俗成的用法并非任意，而是基于对物理世界的隐喻。

Material Design 的动效规范中明确提出了“共享轴”（Shared Axis）和“容器变换”（Container Transform）等模式，其核心都是利用缓动曲线维持空间连续性。笔者认为，缓动曲线的方向性语义是界面动效“可学习性”的关键——用户通过反复使用，内化了“ease-out 意味着出现”的认知模型，从而降低每次交互的认知成本。

三、数学本质：从贝塞尔到弹簧阻尼

缓动曲线的工程实现依赖于具体的数学模型。目前主流的模型有三类：三次贝塞尔曲线、弹簧阻尼系统、分段样条。理解它们的数学本质，是精准调参的前提。

3.1 三次贝塞尔曲线

CSS 中的 cubic-bezier(x1, y1, x2, y2) 定义了一条三次贝塞尔曲线，其中 P0=(0,0) 和 P3=(1,1) 固定，P1=(x1,y1) 和 P2=(x2,y2) 为控制点。曲线的横轴表示时间进度，纵轴表示动画进度。

// 三次贝塞尔曲线参数方程
// B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
// 其中 P0=(0,0), P3=(1,1)
// 展开后：
// x(t) = 3(1-t)²t·x1 + 3(1-t)t²·x2 + t³
// y(t) = 3(1-t)²t·y1 + 3(1-t)t²·y2 + t³

function cubicBezier(x1, y1, x2, y2) {
  return function(t) {
    const mt = 1 - t;
    const mt2 = mt * mt;
    const t2 = t * t;
    const x = 3 * mt2 * t * x1 + 3 * mt * t2 * x2 + t2 * t;
    const y = 3 * mt2 * t * y1 + 3 * mt * t2 * y2 + t2 * t;
    return { x, y };
  };
}

需要注意的是，贝塞尔曲线的参数 t 并不等于时间进度。给定时间进度 x，需要反解 t，再求 y。这一反解过程通常使用牛顿迭代法或二分法。浏览器引擎内部正是这样做的，因此 cubic-bezier 的计算开销略高于线性插值。

本文评述：贝塞尔模型的优势在于表达力强、参数直观（控制点位置直接对应曲线形状），且被 CSS 标准原生支持。其局限在于无法表达“过冲”（overshoot）后的多次振荡——虽然 y 值可以超过 1，但曲线形状受限于两个控制点，难以模拟复杂的弹簧行为。

3.2 弹簧阻尼系统

弹簧模型源自物理仿真，其运动由胡克定律和阻尼力共同决定。一维弹簧阻尼系统的微分方程为：

// 弹簧阻尼系统微分方程
// m·a = -k·x - c·v
// 其中 m 为质量，k 为劲度系数，c 为阻尼系数
// x 为位移，v 为速度，a 为加速度

// 离散化求解（半隐式欧拉法）
function springStep(state, dt, stiffness, damping, mass = 1) {
  const force = -stiffness * state.x - damping * state.v;
  const acceleration = force / mass;
  state.v += acceleration * dt;
  state.x += state.v * dt;
  return state;
}

弹簧模型的关键参数是阻尼比 ζ = c / (2√(km))。当 ζ < 1 时为欠阻尼，系统会振荡；ζ = 1 时为临界阻尼，系统最快回到平衡位置且不振荡；ζ > 1 时为过阻尼，系统缓慢回到平衡位置。

iOS 的 UIKit 和 Android 的 SpringAnimation 都内置了弹簧模型。Apple 在 WWDC 2018 的“Designing Fluid Interfaces”演讲中详细介绍了弹簧动画的参数调优方法，推荐使用“响应时间”（response）和“阻尼比”（damping ratio）两个参数来描述弹簧行为，而非直接暴露劲度系数和阻尼系数。

阻尼比 ζ	行为特征	适用场景
0.2–0.4	明显振荡，多次过冲	游戏化反馈、趣味动效
0.5–0.7	轻微过冲，快速稳定	模态弹出、卡片拖拽
0.8–1.0	几乎无过冲，平滑收敛	页面转场、列表滚动
> 1.0	无过冲，收敛缓慢	需要“稳重感”的场景

表 2：阻尼比与运动行为的对应关系（来源：Apple WWDC 2018 Session 803，参数范围为工程经验总结）

3.3 分段样条与自定义曲线

对于更复杂的运动模式，可以使用分段样条（如 Catmull-Rom 样条）或自定义函数。例如，某些设计系统使用“三段式”曲线：前 30% 时间加速，中间 40% 匀速，后 30% 减速。这种曲线无法用单个三次贝塞尔精确表达，但可以通过分段拼接实现。

笔者认为，分段样条的价值在于将“设计意图”直接映射为数学表达。设计师可以用关键帧描述期望的运动节奏，工程师将其转换为样条控制点。这种“设计—工程”的中间表示层，是动效系统化的重要基础设施。

四、CSS 缓动实现与参数调优

CSS 是缓动曲线最广泛的应用场景。掌握 CSS 中的缓动语法与调优技巧，是前端工程师的基本功。

4.1 关键字与 cubic-bezier 的对应关系

CSS 提供了五个缓动关键字：linear、ease、ease-in、ease-out、ease-in-out。它们本质上是预设的贝塞尔曲线：

linear      → cubic-bezier(0, 0, 1, 1)
ease        → cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in     → cubic-bezier(0.42, 0, 1, 1)
ease-out    → cubic-bezier(0, 0, 0.58, 1)
ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

值得注意的是，ease 并非对称曲线，它的加速段比减速段更短，这在大多数场景下表现良好，但并非万能。本文评述：许多开发者习惯性地使用 ease，却忽略了它可能不适合特定场景。例如，对于“进入”动画，ease-out 通常比 ease 更自然，因为元素应该快速进入然后减速稳定。

4.2 调参实战：从“能用”到“好用”

调参的核心是理解四个控制点的几何意义。对于 cubic-bezier(x1, y1, x2, y2)：

• x1 越大，起始加速越慢（因为控制点向右移动，曲线起始段更平缓）
• y1 越大，起始阶段进度越快（曲线起始段更陡）
• x2 越小，结束减速越晚（控制点向左移动，曲线结束段更陡）
• y2 越大，结束阶段进度越快（曲线结束段更陡）

一个实用的调参流程是：

1. 先确定动画的“性格”：是轻快、稳重还是弹性？
2. 根据性格选择基础曲线：轻快用 ease-out，稳重用 ease-in-out，弹性用带过冲的贝塞尔
3. 在浏览器 DevTools 的动画面板中实时调整控制点，观察效果
4. 用慢放功能（DevTools 动画检查器的 10% 速度）检查加速度连续性
5. 在真实设备上验证，因为不同设备的刷新率会影响感知

推荐一个在线调参工具：cubic-bezier.com，它可以直观地拖拽控制点并对比不同曲线。另一个值得参考的资源是 easings.net，收录了数十种常用缓动函数及其贝塞尔参数。

4.3 过冲曲线的正确用法

过冲（overshoot）是指动画进度超过 1 后再回落到 1 的现象。在贝塞尔曲线中，只要 y1 或 y2 大于 1，就会产生过冲。例如 cubic-bezier(0.34, 1.56, 0.64, 1) 会产生约 10% 的过冲。

过冲曲线适合表达“弹性”和“活力”，但不适合所有场景。对于需要精确对齐的元素（如进度条、数据可视化），过冲会造成误导。笔者认为，过冲的使用应遵循“语义匹配”原则：只有当动画的语义本身包含“弹性”或“活力”时，才使用过冲。

五、JavaScript 与 Web Animations API

当 CSS 缓动无法满足需求时，JavaScript 提供了更灵活的控制能力。Web Animations API（WAAPI）是现代浏览器推荐的动画接口，它结合了 CSS 动画的声明式语法和 JavaScript 的可编程性。

5.1 Web Animations API 中的缓动

// 使用 WAAPI 定义缓动
const animation = element.animate(
  [
    { transform: 'translateX(0)', opacity: 0 },
    { transform: 'translateX(100px)', opacity: 1 }
  ],
  {
    duration: 300,
    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
    fill: 'forwards'
  }
);

// 使用弹簧缓动（需要自定义）
// WAAPI 支持 linear() 缓动函数（Chrome 113+）
const springEasing = 'linear(0, 0.1 10%, 0.5 30%, 0.9 50%, 1.05 70%, 1 100%)';
element.animate(keyframes, { duration: 400, easing: springEasing });

Chrome 113 引入的 linear() 缓动函数是一个重要进展。它允许开发者用一系列点定义任意缓动曲线，包括弹簧振荡。这弥补了贝塞尔曲线无法表达多次振荡的局限。

本文评述：linear() 的意义在于将“物理仿真”和“声明式动画”统一起来。开发者可以用物理引擎生成关键点，再以声明式方式应用，兼顾真实感和性能。

5.2 自定义弹簧动画的 JavaScript 实现

// 基于 requestAnimationFrame 的弹簧动画
class SpringAnimation {
  constructor({ stiffness = 170, damping = 26, mass = 1, onUpdate }) {
    this.stiffness = stiffness;
    this.damping = damping;
    this.mass = mass;
    this.onUpdate = onUpdate;
    this.state = { x: 0, v: 0 };
    this.target = 0;
    this.rafId = null;
  }

  setTarget(target) {
    this.target = target;
    this.start();
  }

  start() {
    if (this.rafId) return;
    let lastTime = performance.now();

    const tick = (now) => {
      const dt = Math.min((now - lastTime) / 1000, 0.064); // 限制最大步长
      lastTime = now;

      const displacement = this.state.x - this.target;
      const springForce = -this.stiffness * displacement;
      const dampingForce = -this.damping * this.state.v;
      const acceleration = (springForce + dampingForce) / this.mass;

      this.state.v += acceleration * dt;
      this.state.x += this.state.v * dt;

      this.onUpdate(this.state.x);

      // 判断是否停止
      if (Math.abs(this.state.v) < 0.01 && Math.abs(displacement) < 0.01) {
        this.state.x = this.target;
        this.state.v = 0;
        this.onUpdate(this.state.x);
        this.rafId = null;
        return;
      }

      this.rafId = requestAnimationFrame(tick);
    };

    this.rafId = requestAnimationFrame(tick);
  }

  stop() {
    if (this.rafId) {
      cancelAnimationFrame(this.rafId);
      this.rafId = null;
    }
  }
}

上述实现使用半隐式欧拉法积分，数值稳定性较好。需要注意的是，dt 需要限制最大值，避免标签页切换后产生过大步长导致数值爆炸。

5.3 与 CSS 动画的性能对比

CSS 动画和 WAAPI 动画通常运行在合成线程（compositor thread），不阻塞主线程。而 JavaScript 逐帧动画运行在主线程，容易受到布局、脚本执行的影响。因此，对于简单的位移、缩放、透明度动画，优先使用 CSS 或 WAAPI；对于需要物理仿真或复杂交互的动画，才使用 JavaScript。

特性	CSS 动画	WAAPI	JS 逐帧
运行线程	合成线程	合成线程	主线程
缓动表达力	贝塞尔 + linear()	贝塞尔 + linear()	任意函数
动态控制	有限	强	最强
性能开销	低	低	中–高

表 3：三种动画实现方式的对比（来源：MDN Web Docs 与 Chrome 开发者文档整理）

六、原生平台：iOS、Android 与游戏引擎

缓动曲线在不同平台上的实现各有特色。理解这些差异，有助于跨平台动效的一致性设计。

6.1 iOS：UIView 动画与弹簧

iOS 从 iOS 7 开始引入 UIViewPropertyAnimator，支持交互式中断和弹簧动画。iOS 17 进一步引入了 SpringAnimation 的 SwiftUI 封装。

// SwiftUI 弹簧动画
withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    self.isExpanded.toggle()
}

// UIKit 弹簧动画
UIView.animate(
    withDuration: 0.4,
    delay: 0,
    usingSpringWithDamping: 0.7,
    initialSpringVelocity: 0,
    options: .curveEaseInOut
) {
    self.view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}

Apple 推荐的弹簧参数是 response（响应时间，类似周期）和 dampingFraction（阻尼比）。response 越小，弹簧越“硬”；dampingFraction 越小，振荡越明显。

6.2 Android：MotionLayout 与 SpringAnimation

Android 的 SpringAnimation 类基于 Facebook 的 Rebound 库，提供了类似的弹簧模型。MotionLayout 则支持在 XML 中定义关键帧和缓动曲线。

// Android SpringAnimation
SpringAnimation(view, DynamicAnimation.TRANSLATION_X, 0f).apply {
    spring = SpringForce(0f)
        .setStiffness(SpringForce.STIFFNESS_MEDIUM)
        .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY)
    start()
}

Material Design 3 的动效规范中，推荐使用“强调”（emphasized）曲线，其贝塞尔参数为 cubic-bezier(0.2, 0, 0, 1)，用于表达“快速启动、缓慢停止”的 Material 风格。

6.3 游戏引擎：Unity 与 Unreal

游戏引擎中的缓动通常由动画曲线（Animation Curve）或缓动函数库实现。Unity 的 AnimationCurve 允许在编辑器中可视化编辑曲线，支持任意关键帧。Unreal 的 CurveFloat 类似。

游戏引擎的优势在于曲线编辑的可视化程度高，且支持运行时动态修改。笔者认为，Web 动效工具链可以借鉴游戏引擎的“曲线资产”概念——将缓动曲线作为可复用的设计令牌（Design Token）管理，而非散落在各处。

七、性能预算与合成层优化

缓动曲线的性能影响主要体现在两个方面：曲线计算本身的开销，以及动画属性的渲染开销。前者通常可以忽略，后者才是性能瓶颈。

7.1 只动画合成属性

浏览器渲染流水线包括：样式计算 → 布局 → 绘制 → 合成。只有 transform 和 opacity 可以跳过布局和绘制，直接在合成线程处理。因此，缓动动画应优先使用这两个属性。

如果需要动画 width、height、top、left 等布局属性，可以考虑使用 transform: scale() 或 translate() 替代。例如，展开一个卡片时，不要动画 height，而是动画 transform: scaleY()，同时用 transform-origin 控制缩放中心。

7.2 will-change 的正确使用

will-change 可以提前告知浏览器元素即将变化，从而提前创建合成层。但滥用 will-change 会导致内存占用过高。推荐的做法是：在动画开始前添加 will-change，动画结束后移除。

// 动画前
element.style.willChange = 'transform, opacity';
element.animate(keyframes, options).finished.then(() => {
  element.style.willChange = 'auto';
});

7.3 帧率与刷新率适配

高刷新率屏幕（90Hz、120Hz）对缓动曲线的感知有影响。同样的曲线在 120Hz 下显得更平滑，但也可能暴露曲线本身的加速度不连续。因此，在高刷新率设备上，建议使用更平滑的曲线（如弹簧模型），并适当缩短动画时长。

本文评述：性能优化的核心不是“让动画更快”，而是“让动画更稳定”。一个 60fps 的稳定动画，比一个 120fps 但偶尔掉帧的动画感知更好。缓动曲线的选择应服务于稳定性，而非追求极致的视觉冲击。

八、可访问性与降级策略

动效设计必须考虑可访问性。对于前庭功能障碍（vestibular disorders）用户，过度的动画可能引发眩晕、恶心等不适。因此，缓动曲线的使用需要提供降级策略。

8.1 prefers-reduced-motion 媒体查询

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

上述代码将所有动画时长降至接近零，从而禁用动效。但更精细的做法是：保留必要的状态反馈（如颜色变化），仅禁用大幅度的位移和缩放动画。

8.2 降级策略的分级

笔者建议将动效降级分为三级：

• 一级降级：保留透明度变化，移除位移和缩放
• 二级降级：保留颜色和边框变化，移除所有空间变换
• 三级降级：完全禁用动画，仅保留即时状态切换

分级降级的好处是：在满足可访问性要求的同时，尽可能保留界面的反馈质量。具体采用哪一级，可以根据用户偏好设置和系统能力动态决定。

九、前沿方向与工程预判

缓动曲线的研究和应用仍在演进。以下几个方向值得关注。

9.1 基于机器学习的个性化缓动

近年来，有研究探索使用机器学习模型根据用户交互历史预测最优缓动参数。例如，2023 年 CHI 会议上有论文探讨了“自适应动效”的概念，通过分析用户的点击速度、滚动模式等行为数据，动态调整动画时长和曲线。本文评述：这一方向有潜力，但需警惕过度个性化带来的可预测性下降——用户可能无法形成稳定的认知模型。

9.2 物理引擎与声明式动画的融合

CSS linear() 函数的出现，标志着声明式动画开始吸收物理仿真的能力。未来，我们可能看到更多“物理感知”的 CSS 属性，如直接声明弹簧参数而非贝塞尔控制点。

9.3 动效设计令牌的系统化

设计系统（Design System）正在将缓动曲线纳入令牌体系。例如，Material Design 3 定义了“标准”“强调”“减速”“加速”四类曲线令牌。这种系统化做法有助于跨团队、跨平台的一致性。

笔者认为，缓动曲线的系统化不仅是技术问题，更是组织问题。它要求设计师和工程师共同定义“动效语言”，并将其作为设计系统的第一公民。推荐参考 Material Design 3 动效令牌规范 和 Apple HIG 动效章节。

十、实战：一套可复用的调参流程

最后，将上述内容整合为一套可复用的调参流程。这套流程适用于大多数 Web 和移动端动效场景。

10.1 步骤一：定义动效语义

在调参之前，先回答三个问题：

1. 这个动画的触发原因是什么？（用户操作、系统状态变化、还是装饰性？）
2. 动画的语义是什么？（进入、退出、强调、还是过渡？）
3. 用户需要从动画中获得什么信息？（位置变化、层级关系、还是操作确认？）

10.2 步骤二：选择基础曲线

根据动效语义选择基础曲线：

• 进入 → ease-out 或带轻微过冲的贝塞尔
• 退出 → ease-in
• 过渡 → ease-in-out
• 强调 → 弹簧模型（阻尼比 0.5–0.7）

10.3 步骤三：确定时长

参考表 1 的推荐范围，结合元素大小和移动距离调整。一般来说，移动距离越大，时长越长；元素越小，时长越短。

10.4 步骤四：在 DevTools 中微调

使用 Chrome DevTools 的动画面板，可以慢放动画并实时调整贝塞尔控制点。建议在 10% 速度下检查加速度连续性，确保没有突兀的速度突变。

10.5 步骤五：真机验证与性能检查

在真实设备上验证动画效果，并使用 Performance 面板检查帧率。确保动画期间没有长任务（long task）阻塞主线程。

10.6 步骤六：可访问性测试

开启系统的“减少动态效果”设置，验证降级策略是否生效。推荐使用 Chrome DevTools 的媒体特性模拟 进行测试。

核心结论：缓动曲线的调参不是“找一条好看的曲线”，而是“为特定的动效语义匹配最合适的运动模型”。理解感知、数学、工程三层映射，才能从“会用”走向“精通”。

参考文献