贝塞尔曲线——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)
这里写图片描述 这里写图片描述

更多缓动函数请查看:
https://easings.net/zh-cn#


本文属转载,在原文基础上稍作修改。
转自:http://www.jianshu.com/p/d999f090d333

  • 30
    点赞
  • 77
    收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值