贝塞尔曲线

贝塞尔曲线(Bézier curve)有着十分广泛的用途。在讨论贝塞尔曲线之前,我们还得先回顾上一篇文章《伯恩斯坦多项式》。在这篇文章中,我们提到了伯恩斯坦多项式的一般形式

$$
B_n(t) = \sum_{i=0}^{n}\beta_i \cdot b_{i, n}(t)
$$

其中,

$$
b_{i,n}(t) = \binom{n}{i}\cdot t^{i} \cdot (1-t)^{(n-i)}, \quad t\in[0, 1]
$$

是 n 阶伯恩斯坦基底多项式。而 $\beta_i$ 叫做伯恩斯坦系数。当伯恩斯坦系数是二维平面中的一系列固定点时,伯恩斯坦多项式就演变成了本篇要讨论的贝塞尔曲线。

阅读余文贝塞尔曲线

伯恩斯坦多项式

我们在研究贝塞尔曲线的时候,首先遇到的就是伯恩斯坦多项式(Bernstein polynomial),为此,有必要专门开出一篇文章来探讨伯恩斯坦多项式的性质。

从定义出发,伯恩斯坦多项式的第n阶项有如下形式:

$$
b_{i,n}(t) = \binom{n}{i}\cdot t^{i} \cdot (1-t)^{(n-i)}, \quad t\in[0, 1]
$$

其中 $i=0, 1, …, n$, 而

$$
\binom{n}{i} = \frac{n!}{i!(n-i)!}
$$

是二项式系数。伯恩斯坦 n 阶多项式可以形成一组 n 阶指数多项式的基底。一般伯恩斯坦多项式可以表示为:

$$
B_n(t) = \sum_{i=0}^{n}\beta_i \cdot b_{i, n}(t)
$$

其中,$\beta_i$ 叫做伯恩斯坦系数。读者看到这个形式可能一下子就联想到贝塞尔曲线了。是的,这就是贝塞尔曲线的函数形式。不过,贝塞尔曲线我们会在下一篇文章中去详细论述,本篇只探讨伯恩斯坦多项式的特性。

阅读余文伯恩斯坦多项式

缓动曲线

缓动曲线在UI动画中的应用十分广泛。缓动曲线可以用来控制动画的运动速率,使其按照我们的意愿模拟真实物体的运动规律。举个例子,当我们往上抛出一个石块时,在不考虑空气阻力的情况下,石块会在重力的作用下,先匀减速上升,直至速度为零。而后,石块的速度又会从零开始匀加速下降。那么,如何模拟这样的运动过程呢?在高中物理课上,我们已经知道,石块的位移和时间之间满足平方关系:
$$
h(t) = v_0t – \frac{1}{2}gt^2 + h_0
$$

其中,$h(t)$ 是石块在 $t$ 时刻的高度,$v_0$ 是石块的初速度,$g$ 是重力加速度,$h_0$ 是石块的初始高度。从这个式子可以看出,我们需要一条二次方的运动曲线(抛物线)来模拟这样的运动过程。而类似这样的一条曲线,就是本文要讨论的缓动曲线。

总的来说,缓动曲线包含四大类,分别是线性(linear)、缓入(ease in)、缓出(ease out)和缓入缓出(ease in and out)。除了线性类,其余三大类又可以细分出各种子类,比如二次方缓动曲线(Quadratic)就是其中的一个子类。以上文提到的石块为例,石块的运动曲线满足二次方缓动曲线,而上升过程满足缓出的过程(速度先快后慢),下降过程则满足缓入过程(速度先慢后快)。本文将对线性类和缓动类的 10 种子类共 11 种类别 31 种组合情况进行公式化整理,并绘制相应的缓动曲线图,供大家查阅。这 11 种类别分别为:

  • Linear
  • Sinusoidal
  • Quadratic
  • Cubic
  • Quartic
  • Quintic
  • Exponential
  • Circular
  • Back
  • Elastic
  • Bounce

阅读余文缓动曲线