码迷,mamicode.com
首页 > 其他好文 > 详细

【转~】初识贝塞尔曲线(Bézier curve)

时间:2015-08-03 06:29:00      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

本文图文大多转自http://www.html-js.com/article/1628

QAQ我居然去扒维基,,,看不懂啊,,,我要去补数学,,,

 

在做变形小鸡的时候用到CSS3 transition-timing-function 属性,其语法如下:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

总而言之可以用cubic-bezier(n,n,n,n)的形式来表示全部的属性值,这里就涉及到贝塞尔曲线(Bézier curve)。

 

由De Casteljau算法计算得出的贝塞尔曲线,用很少的控制点就能够生成复杂平滑曲线。它的具体含义通过下面一个例子来初步理解一下:

 

在平面内任选 3 个不共线的点,依次用线段连接。

技术分享

 

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD,与该线段总长 AB 的比例。

技术分享

 

根据上一步得到的比例,从第二条线段上找出对应的点 E,使得 AD:AB = BE:BC

技术分享

 

连接这两点 DE。

技术分享

 

从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB = BE:BC

技术分享

 

到这里,我们就确定了贝塞尔曲线上的一个点 F。接下来,请稍微回想一下中学所学的极限知识,让选取的点 D 在第一条线段上从起点 A 移动到终点 B,找出所有的贝塞尔曲线上的点 F。所有的点找出来之后,我们也得到了这条贝塞尔曲线。

技术分享

 

感受一下动态图咯:

技术分享

 

这条贝塞尔曲线,为了确定曲线上的一个点,需要进行两轮取点的操作,因此我们称得到的贝塞尔曲线为二次曲线。

 

当控制点个数为 4 时,情况是怎样的?

步骤都是相同的,只不过我们每确定一个贝塞尔曲线上的点,要进行三轮取点操作。如图,AE:AB = BF:BC = CG:CD = EH:EF = FI:FG = HJ:HI,其中点 J 就是最终得到的贝塞尔曲线上的一个点。

技术分享

 

这样我们得到的是一条三次贝塞尔曲线。

技术分享

 

看过了二次和三次曲线,更高次的贝塞尔曲线大家应该也知道要怎么画了吧。那么比二次曲线更简单的一次(线性)贝塞尔曲线存在吗?长什么样?根据前面的介绍,只要稍作思考,想必你也能猜出来了。哈!就是一条直线~

技术分享

 

能画曲线也能画直线,是不是很厉害?要绘制更复杂的曲线,控制点的增加也仅仅是线性的。这一特点使其不光在工业设计领域大展拳脚,就连数学基础不好的人也可以比较容易地掌握,比如大多数平面美术设计师们(吐槽吗这是...)。

技术分享

 

动态绘制贝塞尔曲线的在线演示

 

所以,CSS3中cubic-bezier(n,n,n,n)中那四个n可以视作两个控制点坐标.見贝塞尔曲线设计器,这里固定第二、三个控制点坐标分别为(0,0)和(1,1),需要设定另两点坐标,即(x1,y1,x4,y4)(x1,y1,x4,y4∈[0,1]),所成曲线为translate速度曲线。

 

数学真的是好厉害〒▽〒!

 

【END】

 

 

【转~】初识贝塞尔曲线(Bézier curve)

标签:

原文地址:http://www.cnblogs.com/suzyc/p/4697185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!