码迷,mamicode.com
首页 > 其他好文 > 详细

关于cubic-bezier 贝塞尔曲线的简单了解

时间:2019-09-30 13:10:01      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:code   jpg   取值   调整   技术   超出   函数   了解   image   

在animation和transition两个属性中,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的坐标,最后形成的曲线就是动画曲线。

关于cubic-bezier 贝塞尔曲线的简单了解

标签:code   jpg   取值   调整   技术   超出   函数   了解   image   

原文地址:https://www.cnblogs.com/yuanyanbk/p/11611918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!