如何可视化CSS3立方贝塞尔曲线？

Question

在CSS3 transitions的规范中写道，加速度的标准Bézier曲线定义如下：

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）（隐式）。