css - 如何可视化 CSS3 三次贝塞尔曲线？

Question

在 CSS3 transitions 的规范中写的是加速度的标准贝塞尔曲线定义如下:

The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) 
The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0)
The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)

您如何可视化这些曲线？我想看看他们(像这里:http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html)。

三次贝塞尔函数中有四个点，但只有一个值。但是要绘制曲线，每个都需要 x 和 y 吗？

Answer 1

只要我明白了，CSS cubic-bezier插值使用曲线上的两个隐式点代表插值函数的图形，即P0 = (0,0) 和P3 = (1,1)。此处指定的四个数字代表另外两个领先点。

例如，线性插值图等于具有以下前导点的贝塞尔曲线:P0 = (0,0)(隐式)，P1 = (0,0)(前两个参数)，P2 = (1,1 )(最后两个参数)和 P3 = (1,1)(隐式)。