如何可视化 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三次贝塞尔插值使用曲线上的两个隐式点表示插值函数的图形，即P0 =（0,0）和P3 = (1,1)。此处指定的四个数字代表另外两个领先点。

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