夏日博客

A-A+

javascript中的缓动效果实现程序

2016年01月28日 前端设计 评论 1 条 阅读 6 views 次

javascript中的缓动效果可以应用于很多地方，比如距离位移上的变化：图片的滚动、焦点图的轮转切换，透明度上的变化：渐隐渐现。凡是存在运动的状态都适用，下面以最基本的块在容器内从左到右滑动为例，讲下几种不同的缓动处理方式。

常见的动画有四种类型，介绍一下：

linear：线性动画，即匀速

easeIn：速度从小到大，即淡入

easeOut ：速度从大到小，即淡出

easeInOut：开始时速度从小到大，结束时速度从大到小，即淡入淡出

其实说到缓动，就不得不提Robert Penner，他发明了N多缓动公式，举个例子

我还是解释一下吧：

设当前变化量为X，则

t / d = X / c，所以X = c * t / d，然后X + b就可以获得当前属性值

再看一个稍复杂的：

这个有淡入效果，也就是说动画开始时，值的变化量从小到大。

可以发现两者唯一的区别就是 t / d 和 (t /= d) * t，刚才说了t / d是一个>=0 && = Math.pow(a, 2)是肯定的

2. 每次调用函数时，t / d 这个比值也是匀速变大的，比如第1次调用时是0.1(平方0.01)，第2次调用时是0.2(平方0.04)等，那第10次调用时，肯定是1没错吧，这时候 c * 1 + b，动画就到此结束了

3. 第2点证明了比值越小，值的变化量就越小，比值越大，值的变化量就越大，如果不用平方而是三次方，那淡入效果就更明显了。

样式、结构及公共函数如下:

  1.  <style>  
  2.         #container {width:500px;height:100px;border:1px #d1d1d1 solid;position:relative;}  
  3.         #drag {width:100px;height:100px;background:#369;position:absolute;left:0;top:0;}  
  4.     </style>  
  5. <div id="container">  
  6. <div id="drag"></div>  
  7. </div>  
  8.    
  9.     <script type="text/javascript">  
  10.         function $(id) {  
  11.             return typeof id == 'string' ? document.getElementById(id) : id;  
  12.         }  
  13.         function getStyle(el,styleProp){  
  14.             return el.currentStyle ? el.currentStyle[styleProp] : document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);  
  15.         }  
  16.     </script>   

首先，从最简单的入手：设定开始位置和结束位置及步长，每次增加固定的值，直至终止条件.

  1. var timer = null;  
  2.         var begin = 0, end = 400, step = 5;  
  3.         var drag = $("drag");  
  4.         function run() {  
  5.             if((iLeft = parseInt(getStyle(drag,"left"))) < end){  
  6.                 drag.style.left = iLeft + step + "px";  
  7.             }else{  
  8.                 clearInterval(timer);  
  9.             }  
  10.         }  
  11.         var timer = setInterval(run, 20);  

上面这种方法是匀速，每次运动的距离是固定的，下面来看另外一种实现方式,代码如下:

  1. var timer = null;  
  2.        var begin = 0, end = 400;  
  3.        var drag = $("drag");  
  4.        function run() {  
  5.            if((iLeft = parseInt(getStyle(drag,"left"))) < end){  
  6.                var step = Math.ceil((400 - iLeft)/7);  
  7.                drag.style.left = iLeft + step + "px";  
  8.            }else{  
  9.                clearInterval(timer);  
  10.            }  
  11.        }  
  12.        var timer = setInterval(run, 20);  

上面这种方式是通过当前的位置距离目标的距离来计算此次位移的步长,在flash中有专门处理缓动的类tween，转化为javascript的代码为：

  1. var Tween = {  
  2.  Linear: function(t,b,c,d){ return c*t/d + b; },  
  3.  Quad: {  
  4.   easeIn: function(t,b,c,d){  
  5.    return c*(t/=d)*t + b;  
  6.   },  
  7.   easeOut: function(t,b,c,d){  
  8.    return -c *(t/=d)*(t-2) + b;  
  9.   },  
  10.   easeInOut: function(t,b,c,d){  
  11.    if ((t/=d/2) < 1) return c/2*t*t + b;  
  12.    return -c/2 * ((--t)*(t-2) - 1) + b;  
  13.   }  
  14.  },  
  15.  Cubic: {  
  16.   easeIn: function(t,b,c,d){  
  17.    return c*(t/=d)*t*t + b;  
  18.   },  
  19.   easeOut: function(t,b,c,d){  
  20.    return c*((t=t/d-1)*t*t + 1) + b;  
  21.   },  
  22.   easeInOut: function(t,b,c,d){  
  23.    if ((t/=d/2) < 1) return c/2*t*t*t + b;  
  24.    return c/2*((t-=2)*t*t + 2) + b;  
  25.   }  
  26.  },  
  27.  Quart: {  
  28.   easeIn: function(t,b,c,d){  
  29.    return c*(t/=d)*t*t*t + b;  
  30.   },  
  31.   easeOut: function(t,b,c,d){  
  32.    return -c * ((t=t/d-1)*t*t*t - 1) + b;  
  33.   },  
  34.   easeInOut: function(t,b,c,d){  
  35.    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;  
  36.    return -c/2 * ((t-=2)*t*t*t - 2) + b;  
  37.   }  
  38.  },  
  39.  Quint: {  
  40.   easeIn: function(t,b,c,d){  
  41.    return c*(t/=d)*t*t*t*t + b;  
  42.   },  
  43.   easeOut: function(t,b,c,d){  
  44.    return c*((t=t/d-1)*t*t*t*t + 1) + b;  
  45.   },  
  46.   easeInOut: function(t,b,c,d){  
  47.    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;  
  48.    return c/2*((t-=2)*t*t*t*t + 2) + b;  
  49.   }  
  50.  },  
  51.  Sine: {  
  52.   easeIn: function(t,b,c,d){  
  53.    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;  
  54.   },  
  55.   easeOut: function(t,b,c,d){  
  56.    return c * Math.sin(t/d * (Math.PI/2)) + b;  
  57.   },  
  58.   easeInOut: function(t,b,c,d){  
  59.    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;  
  60.   }  
  61.  },  
  62.  Expo: {  
  63.   easeIn: function(t,b,c,d){  
  64.    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;  
  65.   },  
  66.   easeOut: function(t,b,c,d){  
  67.    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;  
  68.   },  
  69.   easeInOut: function(t,b,c,d){  
  70.    if (t==0) return b;  
  71.    if (t==d) return b+c;  
  72.    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;  
  73.    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;  
  74.   }  
  75.  },  
  76.  Circ: {  
  77.   easeIn: function(t,b,c,d){  
  78.    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;  
  79.   },  
  80.   easeOut: function(t,b,c,d){  
  81.    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;  
  82.   },  
  83.   easeInOut: function(t,b,c,d){  
  84.    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;  
  85.    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;  
  86.   }  
  87.  },  
  88.  Elastic: {  
  89.   easeIn: function(t,b,c,d,a,p){  
  90.    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;  
  91.    if (!a || a < Math.abs(c)) { a=c; var s=p/4; }  
  92.    else var s = p/(2*Math.PI) * Math.asin (c/a);  
  93.    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;  
  94.   },  
  95.   easeOut: function(t,b,c,d,a,p){  
  96.    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;  
  97.    if (!a || a < Math.abs(c)) { a=c; var s=p/4; }  
  98.    else var s = p/(2*Math.PI) * Math.asin (c/a);  
  99.    return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);  
  100.   },  
  101.   easeInOut: function(t,b,c,d,a,p){  
  102.    if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);  
  103.    if (!a || a < Math.abs(c)) { a=c; var s=p/4; }  
  104.    else var s = p/(2*Math.PI) * Math.asin (c/a);  
  105.    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;  
  106.    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;  
  107.   }  
  108.  },  
  109.  Back: {  
  110.   easeIn: function(t,b,c,d,s){  
  111.    if (s == undefined) s = 1.70158;  
  112.    return c*(t/=d)*t*((s+1)*t - s) + b;  
  113.   },  
  114.   easeOut: function(t,b,c,d,s){  
  115.    if (s == undefined) s = 1.70158;  
  116.    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;  
  117.   },  
  118.   easeInOut: function(t,b,c,d,s){  
  119.    if (s == undefined) s = 1.70158;  
  120.    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;  
  121.    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;  
  122.   }  
  123.  },  
  124.  Bounce: {  
  125.   easeIn: function(t,b,c,d){  
  126.    return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;  
  127.   },  
  128.   easeOut: function(t,b,c,d){  
  129.    if ((t/=d) < (1/2.75)) {  
  130.     return c*(7.5625*t*t) + b;  
  131.    } else if (t < (2/2.75)) {  
  132.     return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
  133.    } else if (t < (2.5/2.75)) {  
  134.     return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
  135.    } else {  
  136.     return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
  137.    }  
  138.   },  
  139.   easeInOut: function(t,b,c,d){  
  140.    if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;  
  141.    else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;  
  142.   }  
  143.  }  
  144. }  

其中每种缓动方式中对应3种类型

easeIn：从0开始加速的缓动；

easeOut：减速到0的缓动；

easeInOut：前半段从0开始加速，后半段减速到0的缓动

参数说明：

t：当前时间

b：初始值

c：变化量

d：持续时间

调用方式,代码如下:

  1. var timer = null;  
  2.        var b=0,c=400,d=100,t=0;  
  3.        var drag = $("drag");  
  4.        function run() {  
  5.            drag.style.left = Math.ceil(Tween.Circ.easeInOut(t,b,c,d)) + "px";  
  6.            if(t<d){  
  7.                t++;  
  8.            }else{  
  9.                clearInterval(timer);  
  10.            }  
  11.        }  
  12. ar timer = setInterval(run, 20);  
标签：

1 条留言  访客：1 条  博主：0 条

  1. 司马青衫 2016年02月08日 下午 5:42  -199楼  回复

    博主每次更新的真多呀

给我留言