二阶与三阶贝塞尔曲线详解（含 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)：
- 左半段 = 一条贝塞尔
- 右半段 = 一条贝塞尔
用途：
- 曲线细分（渲染）
- 路径动画分段
- 碰撞检测
六、小结
贝塞尔曲线本质上就是：
对控制点做"逐层线性插值"
或者从数学角度：
对控制点做"参数化加权平均"