CSS--贝塞尔曲线(cubic-bezier)--使用/教程/实例

简介

说明

        本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。

        cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。

        贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。其对应的属性为：​​transition-timing-function​​​、​​animation-timing-function​​。

在线贝塞尔调试工具

​​cubic-bezier.com​​

​​Ceaser - CSS Easing Animation Tool - Matthew Lein​​

​​缓动函数速查表​​

贝塞尔曲线坐标系

格式：cubic-bezier(<x1>,<y1>,<x2>,<y2>)。 

P0：默认值(0,0)

P1：动态取值(x1,y1)

P2：动态取值(x2,y2)

p3：默认值(1,1)

取值

        需要关注的是P1和P2两点的取值，而其中x轴的取值范围是0到1。当取值超出范围时cubic-bezier将失效；Y轴的取值没有规定。 

坐标系的理解

        x轴：时间，y轴：距离轴。通过斜率来判断速度的变化。（我不知道这样是否正确，但这样的解释符合所有cubic-bezier的运动情况）

预定义值

        animation-timing-function和transition-timing-function中预定义的五个贝塞尔曲线cubic-bezier()对应的值

1.linear ：cubic-bezier(0,0,1,1)   匀速运动

    实际上只要x1=y1,x2=y2都可以是匀速的效果 例如：cubic-bezier(0.25.0.25,0.75,0.75)、cubic-bezier(0.1.0.1,0.7,0.7)等

    看的是纵坐标和横坐标的比值，所以linear属于：y1/x1=1 y2/x2=1的其中一个;

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 ：cubic-bezier(0.42,0,0.58,1),先慢后快再慢

    和ease的区别就是开始更慢一些，结束更慢一些。

​