关于cubic-bezier

2018-08-28  本文已影响188人  AmazRan

在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的坐标,最后形成的曲线就是动画曲线。


常用预设属性

  1. linear cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)
  2. ease cubic-bezier(0.25,0.1,0.25,1)
  3. ease-in cubic-bezier(0.42,0,1,1)

总结

css3动画的速率曲线并不需要了解贝塞尔曲线的核心内容,靠两个控制点去调整。基本easings.net给出的缓动函数能满足大部分的动画需求了。
用了一圈发现其实还是ease最好用


参考

贝塞尔曲线——cubic-bezier详解
缓动函数

上一篇下一篇

猜你喜欢

热点阅读