缓动函数指定动画效果在执行时的速度,使其看起来更加真实。

现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板。

本页可以在每次你需要时,帮助你找到想要的缓动函数。

linear

xt

  • SineEaseIn

  • SineEaseOut

  • SineEaseInOut

  • QuadEaseIn

  • QuadEaseOut

  • QuadEaseInOut

  • CubicEaseIn

  • CubicEaseOut

  • CubicEaseInOut

  • QuartEaseIn

  • QuartEaseOut

  • QuartEaseInOut

  • QuintEaseIn

  • QuintEaseOut

  • QuintEaseInOut

  • ExpoEaseIn

  • ExpoEaseOut

  • ExpoEaseInOut

  • CircEaseIn

  • CircEaseOut

  • CircEaseInOut

  • BackEaseIn

  • BackEaseOut

  • BackEaseInOut

  • ElasticEaseIn

  • ElasticEaseOut

  • ElasticEaseInOut

  • BounceEaseIn

  • BounceEaseOut

  • BounceEaseInOut

linear

直线方式运动,无缓动效果

------------------------------------------------------------------------------------------------------------------------

quadratic

二次方的缓动,f(t) = t^2;其中 f(x) 表示动画进度,t 表示时间,以下相同

------------------------------------------------------------------------------------------------------------------------

cubic

三次方的缓动,f(t) = t^3;

------------------------------------------------------------------------------------------------------------------------

Quartic

四次方的缓动,f(t) = t^4;

------------------------------------------------------------------------------------------------------------------------

Quintic

五次方的缓动,f(t) = t^5;

------------------------------------------------------------------------------------------------------------------------

Sinusoidal

正弦曲线的缓动,f(t) = sin(t);

------------------------------------------------------------------------------------------------------------------------

Exponential

指数曲线的缓动,f(t) = 2^t;

------------------------------------------------------------------------------------------------------------------------

Circular

圆形曲线的缓动,f(t) = sqrt(1 - t^2);

------------------------------------------------------------------------------------------------------------------------

Elasitc

指数衰减的正弦曲线缓动;

------------------------------------------------------------------------------------------------------------------------

Back

超过范围的三次方缓动,f(t) = (s + 1) * t^3 - 3 * t^2;

------------------------------------------------------------------------------------------------------------------------

Bounce

指数衰减的反弹缓动;

------------------------------------------------------------------------------------------------------------------------

Elasitc

指数衰减的正弦曲线缓动;

------------------------------------------------------------------------------------------------------------------------

Elasitc

指数衰减的正弦曲线缓动;

------------------------------------------------------------------------------------------------------------------------

Elasitc

指数衰减的正弦曲线缓动;

------------------------------------------------------------------------------------------------------------------------

每种缓动算法效果都可以分为三个缓动方式,分别是:

easeIn:从0开始加速的缓动;

easeOut:减速到0的缓动;

easeInOut:前半段从0开始加速,后半段减速到0的缓动;

------------------------------------------------------------------------------------------------------------------------

还可以通过贝塞尔曲线自定义缓动效果,贝塞尔效果查询http://cubic-bezier.com