2018-06-13

贝塞尔曲线

一、甚忙，短言之

最近谷歌那谁谁因为自己的相好被老大抢了，就去小米了！狗血的三角关系要比烂掉的TVB神剧好看多了。

但这只是小菜，贝塞尔曲线才是很角色，因为有外国血统，因此，和CSS3动画、SVG以及canvas都有基情，基情绽放如盛夏的菊花。

然而，有基情好啊，搞在一起就可以一锅端了，不是有这么一首歌嘛~

互撸娃，互撸娃，一根藤上七朵花；
连根一拔，全死啦！啦~啦啦啦……

so, 如此一锅端的好戏怎能错过呢！

好戏不容错过.gif

认识主角——贝塞尔

选我，我是天然卷.jpg

选我，我长得比较帅 (2).jpg

贝塞尔，Pierre Bézier，法国数学家~

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。

css3-transition.jpg

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。

而在CSS3中，常用的几个动画效果，用cubic-bezier表示分别为：

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

贝塞尔曲线进阶

1、线性曲线

1.gif

线性贝塞尔曲线演示动画，t in [0,1]

2、二次曲线

为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：
由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。

2.png

2.gif

二次贝塞尔曲线演示动画，t in [0,1]
3、高阶曲线

为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构：

3.png

三次贝塞尔曲线的结构

3.gif

三次贝塞尔曲线演示动画，t in [0,1]

对于四次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2、Q3，由二次贝塞尔曲线描述的点R0、R1、R2，和由三次贝塞尔曲线描述的点S0、S1所建构：

4 (2).png

四次贝塞尔曲线的结构

3.png

四次贝塞尔曲线演示动画，t in [0,1]