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

Question

在CSS3 过渡规范中，加速度的标准贝塞尔曲线定义如下：

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