贝塞尔曲线基础

1,030 阅读2分钟

贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线

在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。

贝塞尔曲线的有趣之处更在于它的“皮筋效应”,也就是说,随着点有规律地移动,曲线将产生皮筋伸引一样的变换,带来视觉上的冲击。

1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

image.png

在css中有一个贝塞尔曲线的函数

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。

贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。

image.png

P0:默认值 (0, 0)
P1:动态取值 (x1, y1)
P2:动态取值 (x2, y2)
P3:默认值 (1, 1)

最直白的理解是,将以一条直线放在范围只有 1 的坐标轴中,并从中间拿出两个点来拉扯(X 轴的取值区间是 [0, 1],Y 轴任意),最后形成的曲线就是动画的速度曲线。

几个常用的固定值对应的 cubic-bezier 值以及速度曲线

linear类型动画

transition: all 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 

image.png

ease类型动画

transition: all 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);

image.png

ease-in类型动画

transition: all 1000ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 

image.png

ease-out类型动画

transition: all 1000ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 

image.png

ease-in-out类型动画

transition: all 1000ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 

image.png

最后贴一个贝塞尔曲线工具链接:web.chacuo.net/css3beziert…