首頁 > web前端 > html教學 > 贝塞尔曲线的一些事情_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:18:08
原創
1095 人瀏覽過

贝塞尔曲线(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:核心技术与案例实战 》。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板