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