贝塞尔曲线——cubic-bezier详解

在animation和transition两个属性中，cubic-bezier是控制变化的速度曲线，下面我们来了解下什么是cubic-bezier。

cubic-bezier称为三次贝塞尔曲线，主要是生成速度曲线的函数，规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>) .

图片描述 图片描述

从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即：P1(x1,y1)，P2(x2,y2)
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。

下面以我们常用到的曲线为例：
1、linear，即cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)，左边cubic-bezier曲线，右边浏览器动画曲线展示。下同。

图片描述 图片描述

2、ease，即cubic-bezier(0.25,0.1,0.25,1)。

图片描述 图片描述

3、ease-in，即cubic-bezier(0.42,0,1,1)。

图片描述 图片描述

4、ease-out，即cubic-bezier(0,0,0.58,1)。

图片描述 图片描述

5、ease-in-out，即这里写代码片。

图片描述 图片描述

6、随机示例1：cubic-bezier(0.68,-0.55,0.27,0.55)。

图片描述 图片描述

7、随机示例2：cubic-bezier(0.17,0.86,0.73,0.14)。

图片描述 图片描述
8、抛物线常用的实例：cubic-bezier(0.5,-0.35,0.85,0.3)

这里需要提醒一下各位朋友，等你画好坐标轴之后你需要把原点的位置转到你的右上角，从原点开始向下抛。

本文属于转载：https://blog.csdn.net/wjnf012/article/details/78795573