贝塞尔曲线的一些事情_html/css_WEB-ITnose

贝塞尔曲线(Bezier curves)是曲率的一种典型代表，而且在很多应用中都会运用到，比如计算机的图形学中、字体和动画。如果你以前玩过CSS，那么你可能就运到过贝塞尔曲线。例如，在CSS的时间函数(timing function)中就有一个贝塞尔曲线—— x 轴和 y 轴的距离用来确定时间。

为什么要使用它们

从自己的角度来说，我们需要画一条曲线，它可以会消耗 100px 。画这样的一条曲线是非常的方便。不幸运的是，画这样的曲线会有非常多的原因，最明显的就是存储的开销非常的大。

如果我们可以调用一个函数 100 次，而且每次收集一个点。为了这个目标，我们可以创建一个函数：

/** * @param {Number} t Number from 0 to 1. * @return {Array} Point on the curve */function getCurveLocation(t) { ... }

函数需要一个从 0 到 1 的数字，这主要是我们需要画 100 个点，我们把这个函数称之为 getCurveLocation ，它的值空间将是 100 次。

var points = []for(var i = 0; i <= 100; i++) {    points.push(getCurveLocation(i * .01))}

我们都完成了，这个设置代表我们的曲线在任意的像素位置。这个很简单——我们只是增加和减少循环计数从而得到所需要的像素数量，然后再渲染到屏幕上。

定义

getCurveLocation 是如何定义的呢？那是贝塞尔曲线发挥作用的地方。它的定义一般如下：

让我们来分解这个公式。这一开始只是一个实现一个方式。就算你不理解这个公式的每一个部分，这并不重要，稍后我们会通过示例将这一切联系在一起。

B 是一个函数，它接收一个数字的参数 t ，而且它的值是从 0 到 1 ，并且其返回的是曲线上的每个点。

n 代表贝塞尔曲线的程度，其角度越高，曲线形状就越复杂。大多数的时候，二次平方和三次立方是我们所需要的。 i 是一个整数，从 0 开始，并且每个循环将增加一次。

代表二项式系数。如果我们扩展出二次项，比如 (x+y)^n 。我们这可以走一个捷径。不管是不是二次项，比如 n=3 和 i=2 ，都可以快速通过这个组合快速的评估这个表达式。

代表一个多项式中的特定项。 PI 是其中的一个控制点。

知识点

从下面的向个示例开始，让我们创建一个贝塞尔曲线：

P0 = (0,0)P1 = (.2, .8)P2 = (.9, .6)P3 = (1, 1)

因为这有 4 个点，而这个贝塞尔曲线有三个点，而它有四个循环点，而且每个循环点的结果如下：

循环1：

循环2：

循环3:

循环4:

最后的多项式:

让欠通过 P 的变量来绘制其对应的方程式：

你可以觉得这条曲线不太有用，但这个从 0 到 1 的域是非常有意义的：

看起来应该蛮熟悉的，它是文章开始使用的贝塞尔曲线。从 0 至 1 之间的域是非常重要的，因为所有有趣的事情都发生在这两个值上面。先来看看 t=0 时的多项式：

接下来再看看 t=1 的多项式：

我们得到了最后一个点。不管第一个点和最后一个点在哪里， t=0 将始终返回第一个点， t=1 将始终返回最后一个点。这点真的非常的强大，不管多项式有多复杂，都可以很容易的分析路径的开始点和结束点。任何其他的 t 值不会取消。例如，在这里可以改变 P1 这个第二点，得到不同的曲线咱径：

当 P1 增加时，曲线向上弯曲，然而它的速度越来越慢。可以修改 P1 的值来证明这一点。而且我们可以通过公式来阐述这一切。

让我们来看看 t=.25 时曲线的弯曲程度：

显而易见， P1 比 P2 更有发言权。现在我们来看看 t=.75 的效果：

现在 P2 更高，实现逆转。所以当 t 每增加一次，那么其会有一个独特的控制点。

在文中使用了三次贝塞尔曲线作为示例，直觉上也适用于其他的贝塞尔曲线。例如，贝塞尔曲线有三个点，两点终端生个控制点：

曲线会根据控制点 P1 做变化。随着 P1 和端端在同一直线上时，会得到一条直线。这也就是得到我们常见的 linear 效果。这一现象非常值得我们去探索。同时希望你能通过这篇文章得到一些洞察力。从一个简单的输入 0 到 1 可以得到对应的曲线。

扩展阅读

• Understanding CSS Timing Functions
• Easing Functions (aka Timing Functions) in CSS3

本文根据 @Shawn O'Mara 的《 Mathematical Intuition Behind Bezier Curves 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： https://buildingvts.com/mathematical-intuition-behind-bezier-curves-2ea4e9645681#.k6pdvyhgc 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。