二阶与三阶贝塞尔曲线详解（含 De Casteljau 与公式推导）

在 UI 动画、路径规划、字体渲染、Unity 动画曲线中，我们几乎每天都在使用一种“看似简单但极其强大”的工具——贝塞尔曲线（Bezier Curve）。

但很多开发者对它的理解停留在：

“就是几个点拉一条弯曲的线”

实际上，贝塞尔曲线背后是一套非常优雅的数学与几何体系。

这篇文章将带你从直觉 → 构造 → 数学 → 工程理解，彻底掌握：

• 二阶贝塞尔曲线
• 三阶贝塞尔曲线（重点）
• De Casteljau 算法（核心思想）
• 通用数学公式（Bernstein 表达）

---

一、从线性插值开始（所有贝塞尔的根）

在进入贝塞尔曲线之前，我们先理解一个最基础的操作：

线性插值（Lerp）

给定两个点：

• (P_0)
• (P_1)

定义一个参数 (t∈ [0,1])，则：

含义是：

• (t = 0) → 在 (P_0)
• (t = 1) → 在 (P_1)
• 中间值 → 在两点之间移动

这就是所有贝塞尔曲线的“原子操作”

---

二、二阶贝塞尔曲线：三点生成平滑曲线

2.1 三个点如何生成一条曲线？

二阶贝塞尔曲线由三个点定义：

• (P_0)：起点
• (P_1)：控制点
• (P_2)：终点

关键问题：

如何从三个点生成一条“弯曲”的曲线？

---

2.2 De Casteljau 算法（核心思想）

我们不用公式，直接用“构造过程”理解。

Step 1：两两插值

对两段做插值：

Step 2：再插一次

这个 (B(t)) 就是曲线上的点

---

2.3 直觉理解（非常重要）

可以这样理解：

• 第一层：连接控制点形成“折线”
• 第二层：在折线上滑动
• 第三层：再连接一次

最终：

得到一条“平滑曲线”

---

2.4 二阶贝塞尔公式推导

将插值公式展开：

权重解释：

点	权重
P0	((1-t)^2)
P1	(2(1-t)t)
P2	(t^2)

本质：加权平均

---

2.5 几何特性

• 曲线一定经过：

  • (P_0)
  • (P_2)

• 不一定经过：

  • (P_1)

• 曲线始终在三点构成的三角形内部（凸包性质）

---

三、三阶贝塞尔曲线：工程中的主角

3.1 为什么三阶最常用？

三阶贝塞尔曲线使用四个点：

• (P_0)：起点
• (P_1)：起点切线控制
• (P_2)：终点切线控制
• (P_3)：终点

优势：

• 可以控制起点方向
• 可以控制终点方向
• 表达能力强
• 计算成本低

所以被广泛用于：

• CSS cubic-bezier
• Unity AnimationCurve
• SVG Path

---

3.2 De Casteljau 三阶构造

构造过程：

第一层

第二层

第三层

---

3.3 控制点真正的作用（重点理解）

很多人误解：

控制点在曲线上

其实：

控制点决定的是“方向和速度”

更准确理解：

• P1：控制起点的“出发方向”
• P2：控制终点的“进入方向”

曲线的切线：

• 在 P0：方向为 (P1 - P0)
• 在 P3：方向为 (P3 - P2)

---

3.4 三阶公式

展开后得到：

和二阶一样，本质仍是加权平均

---

四、通用贝塞尔公式（统一理解）

4.1 一般形式

对于 n 阶贝塞尔曲线：

---

4.2 关键组成

二项式系数

---

Bernstein 基函数

作用：

• 控制每个点的影响权重
• 保证平滑变化

---

4.3 非常重要的性质

权重和为 1

保证是“加权平均”

---

非负性

所有权重 ≥ 0

曲线不会“飞出去”

---

凸包性质

曲线始终在控制点构成的区域内

非常适合做动画与路径

---

五、De Casteljau 算法（更深一层）

5.1 递归定义

---

5.2 为什么它很重要？

相比直接用公式：

优点：

• 数值稳定（避免浮点误差）
• 易实现（只用 lerp）
• 可扩展（任意阶）

---

5.3 曲线分割（工程非常重要）

De Casteljau 还能做：

曲线拆分

在某个 (t)：

• 左半段 = 一条贝塞尔
• 右半段 = 一条贝塞尔

用途：

• 曲线细分（渲染）
• 路径动画分段
• 碰撞检测

---

六、小结

贝塞尔曲线本质上就是：

对控制点做“逐层线性插值”

或者从数学角度：

对控制点做“参数化加权平均”

---