小松的技术博客

六和敬

若今生迷局深陷,射影含沙。便许你来世袖手天下,一幕繁华。 你可愿转身落座,掌间朱砂,共我温酒煮茶。

缓动公式小析

其实知道缓动公式(Tween算法)这个存在,但基本很少去用它,更不用说去理解它了,一般写css时用它的time-function轻松做出各种运动类型。由于一直没有去搞清楚原理,来个需求就得去折腾下,感觉不爽。所以来深入了解了下缓动公式的实现。其实原理还是挺简单的,与android中属性动画的插值器原理一样,表现不同而已。

代码实现可以去看jquery.easing.js的源码:https://github.com/gdsmith/jquery.easing

参数解析

首先说说四个参数的含义:

  • t:timestamp,动画执行到当前帧所进过的时间
  • b:begining,起始值
  • c:change,需要变化的量
  • d:duration,动画的总时间

数学原理

首先要清楚的是所做的动画其实是帧动画,每一帧所经过的时间相同,只是由于上一帧与下一帧的位移量不同,因此速度在视觉上感受不同,位移量小,感觉上速度就慢了。

下面简要分析一下原理,一步一步来:

  1. 动画执行时间的变化可表达为0 -> d,提取出常数d,就变成d*(0 -> 1),变化部分为(0->1),记为x轴变化;
  2. 动画总的变化量和开始值是已知的,其变化可以表达为b -> b+c,提取一下变为b+c*(0 -> 1),变化部分也是(0->1),记为y轴变化;
  3. t用来指示事件当前的时间点,将其变为指示动画完成的百分比,即t/d;
  4. 通过上面的变换,我们需要做的事情就是构造x轴区间为[0,1],y轴区间也为[0,1]的线性或者非线性关系了(也可以说是经过(0,0)和(1,1)点的线性或非线性关系),线性关系太就是y=x,也就是常用的linear了,非线性复杂一点。
  5. 然后我们看看可以构造出哪些非线性关系,并给出函数关系表达式:

    1. 利用指数函数(x的n次方)可以构造一大堆easein的效果,再根据他们的轴对称或者中心对称做翻转和位移,又可以构造出其对应的easeout效果:

       

    2. 利用平方根(Math.sqrt)或者立方根来实现这种非线性关系:

    3. sin或者cos函数可以通过调节参数构造两种运动趋势(下面主要给函数表达式):

      • easein: y = 1-cos(0.5πx)
      • easeout: y = sin(0.5πx)
    4. 通过幂函数或者对数函数:
      • easein: y = 2^(10x-10) (当x=0时,y=0)
      • easeout: y = 1-2^(-10x) (当x=1时,y=1)
    5. 效果还可以叠加呀,叠加的结果除以2,就能创造弹簧效果了。
  6. 下面来看看缓动公式运用了哪些吧:
    • Sine表示由三角函数实现
    • Quad是二次方,Cubic是三次方,Quart是四次方,Quint是五次方
    • Circ是开平方根(Math.sqit),Expo是幂函数Math.pow)
    • Elastic是结合三角函数和开立方根
    • Back则引入了常数1.70158

代码实现

原理也就差不多分析完了,那么来看看具体实现吧,下面一2次方Quad为例子来实现,其它的都差不多。

首先是实现easein:

函数表达是为: y = x*x(比较懒,就不去配图了)

因此实现为:

function easeInQuad(t,b,c,d){
    var x = t/d; //x值
    var y = x*x; //y值
    return b+c*y; //套入最初的公式
}

然后来看看easeout,就是变换了下图型(懒,不想画图):

函数表达式为: y = -xx+2x;

因此实现为:

function easeOutQuad(t,b,c,d){
    var x = t/d;         //x值
    var y = -x*x + 2*x;  //y值
    return b+c*y;        //套入最初的公式
}

清楚了原理,上面都只是套公式,源码的计算公式被简化了,就没有这么直观了,下面再看看easeinout的实现,它的实现就是一半的时间用easein走完一半的路程,另一半时间用easeout走完另一半路程,那么我们计算就套用上面两个公式就会非常直观了。

function easeInoutQuad(t,b,c,d){
    if(t<d/2){ //前半段时间
      return easeInQuad(t,b,c/2,d/2);//改变量和时间都除以2
    }else{
      var t1 = t-d/2; //注意时间要减去前半段时间
      var b1 = b + c/2;//初始量要加上前半段已经完成的
      return easeOutQuad(t1,b1,c/2,d/2);//改变量和时间都除以2
    }
}

jquery.easing.js里面一样是经过代码优化的,不会那么好理解。这里这样写只是为了便于理解

其它的原理都差不多,这里就不一一去分析了,完全数学知识的运用。最后来这个网址看看各种实现效果吧: http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html

←支付宝← →微信 →