CSS3 三次贝塞尔曲线(cubic-bezier)

作者: poxiao 分类: Egret-Laya-Cocos 发布时间: 2020-02-14 16:09

贝塞尔曲线在线调试:

https://cubic-bezier.com/

 

例子:transition:all 1s cubic-bezier(.21,.2,.65,.1)

最近在看animation模块,其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease,liner,ease-in,ease-out,ease-in-out几个预设速度,还可以同过cubic-bezier来自定义速度,想要深入了解CSS3动画,实现随心所欲的动画效果,还是有必要理解下其中的原理。

CSS3动画速度的控制通过三次贝塞尔曲线函数实现,定义规则为

cubic-bezier (x1,y1,x2,y2)

原理:
看一下什么是三次贝塞尔曲线,以及这几个参数的含义:

贝塞尔曲线坐标系

贝塞尔曲线坐标系

贝塞尔曲线通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形,绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。

参数点

参数点

分别用A,B,C,D表示这四个点,其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。
规则
x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。
CSS3提供的几个预设速度:

ease效果

ease效果



linear效果

linear效果



ease-in效果

ease-in效果



ease-out效果

ease-out效果



ease-in-out效果

ease-in-out效果

用法

demo中红色方块采用预设速度liner呈现匀速直线运动,绿色方块采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。
bezier曲线图:

 

 

来源:

https://www.cnblogs.com/tuspring/p/9722704.html

参考资料:

https://forum.cocos.org/t/cocos2d-x/57403/27

https://github.com/cocos-creator/engine/blob/79b9133d6e0e44b4b8f033ba86231ae21522f2dc/cocos2d/actions/CCActionEase.js#L592

 

本文链接:CSS3 三次贝塞尔曲线(cubic-bezier)

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:破晓(http://www.code2048.net),谢谢!^^


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

邮箱地址不会被公开。 必填项已用*标注