javascript动画算法实例分析_javascript技巧

本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下：

动画算法

Linear：无缓动效果(匀速运动)；
Quadratic：二次方的缓动；
Cubic：三次方的缓动
Quartic：四次方的缓动；
Quintic：五次方的缓动；
Sinusoidal：正弦曲线的缓动；
Exponential：指数曲线的缓动；
Circular：圆形曲线的缓动；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动）；
Bounce：指数衰减的反弹缓动。

每个效果都分三个缓动方式（方法），分别是：

easeIn：从0开始加速的运动；
easeOut：减速到0的运动；
easeInOut：前半段从0开始加速，后半段减速到0的运动。

函数的四个参数分别代表：

t--- current time（当前时间）；
b--- beginning value（初始值）；
c--- change in value（变化量）；
d---duration（持续时间）

运算的结果就是当前的运动路程。

Tween.js如下：

Tween = { 
 Linear: function(t,b,c,d){ return c*t/d + b; },
 Quad: {
  easeIn: function(t,b,c,d){
   return c*(t/=d)*t + b;
  },
  easeOut: function(t,b,c,d){
   return -c *(t/=d)*(t-2) + b;
  },
  easeInOut: function(t,b,c,d){
   if ((t/=d/2) 

希望本文所述对大家的javascript程序设计有所帮助。