第二章 缓动函数(Easing)深度解析：线性、缓入、缓出、弹跳、弹性曲线的数学原理与CSS实现

好，咱们直接进入正题。缓动函数这东西，说白了就是控制动画速度变化的工具。你想想看，现实世界里哪有东西是匀速运动的？汽车起步要加速，刹车要减速，皮球落地会弹跳。如果我们的UI动画全是匀速，用户会觉得特别生硬、不自然。

我个人习惯把缓动函数分成三类：基础型（线性、缓入、缓出）、物理型（弹跳、弹性）、以及自定义型（贝塞尔曲线）。咱们一个一个来拆解。

2.1 线性缓动：最基础，但别滥用

线性缓动，数学上就是一条直线：y = t。t从0到1，y也从0到1，完全同步。CSS里用 linear 关键字。

/* 线性缓动 */
.element {
  transition: transform 1s linear;
}

我在项目中遇到过，有些新手喜欢所有动画都用linear，结果做出来的页面像机器人一样僵硬。线性缓动适合什么场景？进度条、加载指示器这种需要恒定速度反馈的元素。但用在弹窗出现、卡片翻转这些场景，就太死板了。

注意： 线性缓动不等于没有缓动。它只是匀速变化，但依然有动画过程。千万别把线性动画和瞬间切换混为一谈。

2.2 缓入与缓出：让动画有「呼吸感」

缓入（ease-in）是慢开始、快结束。缓出（ease-out）是快开始、慢结束。数学上，缓入是 y = t²，缓出是 y = 1 - (1-t)²。

为什么会这样？你想想看，物体从静止到运动，需要克服惯性，所以开始慢。运动中的物体要停下来，也需要逐渐减速。这就是缓入和缓出的物理直觉。

/* 缓入：慢开始 */
.element {
  transition: transform 0.5s ease-in;
}

/* 缓出：慢结束 */
.element {
  transition: transform 0.5s ease-out;
}

/* 缓入缓出：两头慢，中间快 */
.element {
  transition: transform 0.5s ease-in-out;
}

嗯，这里要注意：ease-in-out 是缓入和缓出的结合，适合入场+出场同时发生的动画，比如弹窗出现后又消失。但如果你只做入场动画，我个人建议用 ease-out，因为用户更关注动画结束时的状态。

我的经验： 按钮悬停效果用 ease-out，0.2秒就够了。弹窗出现用 ease-out，0.3秒。页面切换用 ease-in-out，0.5秒。这些是我踩过坑后总结的「黄金比例」。

2.3 弹跳与弹性：模拟真实物理

弹跳（bounce）和弹性（elastic）是高级缓动，它们模拟了物理世界的回弹效果。弹跳像皮球落地，弹性像橡皮筋拉伸后回弹。

数学原理上，弹跳函数是分段函数，模拟了多次碰撞衰减。弹性函数则用了正弦波加上指数衰减：y = e^(-kt) * sin(ωt + φ)。别被公式吓到，CSS已经帮我们封装好了。

/* CSS 弹跳效果 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  10% { transform: translateY(-30px); }
  30% { transform: translateY(-15px); }
  50% { transform: translateY(-5px); }
  70% { transform: translateY(-2px); }
  90% { transform: translateY(-1px); }
}

/* 使用 cubic-bezier 实现弹性效果 */
.element {
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

我曾经在做一个下拉菜单时，用了弹性缓动，结果菜单弹出来时像果冻一样晃来晃去，用户反馈说「头晕」。后来我改成轻微弹跳，效果就好多了。所以弹跳和弹性虽然酷，但别滥用。

核心区别：
  • 弹跳（bounce）：物体撞击表面后反弹，振幅逐渐减小。适合模拟物理碰撞。
  • 弹性（elastic）：物体被拉伸后回弹，会越过目标位置再回来。适合模拟弹簧、橡皮筋。

2.4 贝塞尔曲线：自定义缓动的终极武器

CSS 的 cubic-bezier() 函数允许你自定义缓动曲线。它接受四个参数：cubic-bezier(x1, y1, x2, y2)，控制两个控制点的坐标。

说白了，你就是在画一条从 (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) */

/* 自定义：先快后慢再快 */
.element {
  transition: transform 0.6s cubic-bezier(0.1, 0.9, 0.9, 0.1);
}

/* 自定义：带轻微回弹 */
.element {
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
调试技巧： Chrome DevTools 的「样式」面板里，点击 cubic-bezier 旁边的曲线图标，可以直接拖拽控制点预览效果。我每次调动画都靠这个工具，比手写参数快多了。

2.5 实战对比：不同缓动函数的效果差异

咱们用一个简单的例子来对比：一个方块从左侧移动到右侧，使用不同的缓动函数。

缓动函数 开始速度 中间速度 结束速度 适用场景
linear 恒定 恒定 恒定 进度条、加载动画
ease-in 慢 快 最快 物体离开画面（如消失）
ease-out 快 慢 最慢 物体进入画面（如出现）
ease-in-out 慢 快 慢 页面切换、弹窗
bounce 快 波动 回弹 通知提示、图标弹跳
elastic 快 波动 过冲回弹 强调效果、趣味交互

你看，不同缓动函数对应不同场景。我曾经在一个电商项目中，把「加入购物车」的动画用了弹性缓动，结果商品图标弹来弹去，用户以为出bug了。后来改成缓出+轻微弹跳，反馈就好多了。

2.6 避坑指南：我踩过的那些坑

做缓动动画这么多年，我总结了几条血泪教训：

  • 不要过度使用弹跳和弹性：用户是来用产品的，不是来看杂技的。弹跳动画用一次是惊喜，用十次就是灾难。
  • 注意动画时长：缓动函数配合时长才能发挥效果。0.1秒的动画用啥缓动都差不多，0.5秒以上才能看出区别。
  • 保持一致性：整个产品里，同类型动画用同一种缓动。别让用户觉得「这个弹窗和那个弹窗感觉不一样」。
  • 性能问题：复杂的贝塞尔曲线计算量更大，在低端设备上可能掉帧。我建议用 transform 和 opacity 做动画，它们由GPU加速。
我曾经踩过的坑： 有一次我用 cubic-bezier(0.5, 2, 0.5, -1) 做弹性效果，结果动画直接「飞」出去了，因为控制点的y值超过了1，导致动画超出目标位置太多。后来我学会了：控制点的y值最好在0到1之间，除非你故意要过冲效果。

2.7 总结：选对缓动，动画就成功了一半

缓动函数是前端动画的灵魂。线性、缓入、缓出是基础，弹跳、弹性是进阶，贝塞尔曲线是终极武器。我的建议是：

  • 80%的场景用 ease-out 或 ease-in-out
  • 15%的场景用自定义贝塞尔曲线
  • 5%的场景用弹跳或弹性

记住，好的动画用户感觉不到它的存在，但会觉得「嗯，这个交互很舒服」。这就是缓动函数的魅力。

下一章咱们聊聊「动画时序与编排」，到时候我会分享怎么让多个动画像交响乐一样协调工作。

← 上一章 📖 返回目录 下一章 →