JS运动计算公式图解

现在页面里面很流行一些动态效果，比如单击打开某个矩形框，其一般是通过改变div的高度来实现；或者遮罩效果，改变层的透明度。

在大部分情况下，其改变值是随时间呈线性关系，比较枯燥，通过一些函数，可以改变线性关系，获得良好的用户体验。前些天看到网址兽http://www.webbeast.cn/show-39-1.html文，对文章介绍的几个运动公式感兴趣。

这里我通过matlab画出部分函数的曲线图。下面是js代码

Fx.expoIn = function(pos){return Math.pow(2, 10 * (pos - 1))};
Fx.expoOut = function(pos){return (-Math.pow(2, -10 * pos) + 1)};

Fx.quadIn = function(pos){return Math.pow(pos, 2)};
Fx.quadOut = function(pos){return -(pos)*(pos-2)};

Fx.circOut = function(pos){return Math.sqrt(1 - Math.pow(pos-1,2))};
Fx.circIn = function(pos){return -(Math.sqrt(1 - Math.pow(pos, 2)) - 1)};

Fx.backIn = function(pos){return (pos)*pos*((2.7)*pos - 1.7)};
Fx.backOut = function(pos){return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1)};

Fx.sineOut = function(pos){return Math.sin(pos * (Math.PI/2))};
Fx.sineIn = function(pos){return -Math.cos(pos * (Math.PI/2)) + 1};
Fx.sineInOut = function(pos){return -(Math.cos(Math.PI*pos) - 1)/2};

Fx.wobble = function(pos){return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5};
Fx.pulse = function(pos){return (Math.floor(pos*10) % 2 == 0 ? (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)))};

backIn

circOut

expoIn

expoOut

quadIn

sineOut

wobble

通过这些很直观的函数图，可以轻易选择使用一些效果函数来实现某些效果。