当前位置: 萬仟网 > IT编程>网页制作>CSS > css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)

css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)

2019年09月21日 18:05  | 萬仟网IT编程  | 我要评论

css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3

有几个属性:

  linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
  ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

其中p0(0,0),p3(1,1)是固定点,p1(x1,y1),p2(x2,y2)是操作点;

依次连接p0p1p2p3,假设p0p1上有一动点a,p1p2上有一动点b,p2p3上有一动点c,有p0a/p0p1=p1b/p1p2=p2c/p2p3=t

确定a,b,c点后,依次连接abc,假设ab上有一动点e,bc上有一动点f,有ae/ab=bf/bc=t

确定e,f点后,依次连接ef,假设ef上有一动点p,有ep/ef=t

点p的移动轨迹就是所得结果,cubic-bezier(n,n,n,n)中的四个参数为(x1,y1,x2,y2)

 

 想看效果图可以参考:https://www.jianshu.com/p/55099e3a2899

 

想实际操作可以参考:https://cubic-bezier.com

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com