原生js 动画效果的实现

昨天写《锋利的JQ》里的动画案例卡住了，切换都成功了，但没有动画效果，按自己

以前学的动画知识，在那里连接不上。不得已继续搜寻资料学习动画。

看了一个“CJ”的javascript视频教程，觉得里面讲的动画挺不错的。有必要记录下。


首先，我们知道，最常见的动画莫过于移动，一般都是通过修改

node.style['left' | 'top']这样实现。那么，我们可以构建这么一个小例子，如结构：

  1. <style type="text/css">
  2.     #test{ width:100px; height:100px; background:red; position:absolute; left:100px; top:200px;}
  3. </style>
  4. </head>
  5. <body>
  6.     <div id="test">test</div>
  7. </body>
复制代码

我们想让它从距左边100个px移动到200px，看JS代码：

  1. window.onload = function(){
  2.        var test = document.getElementById("test");
  3.        test.style.left = test.offsetLeft + 100 + "px";    //offsetLeft获取元素的实际坐标，test.style.left只获取嵌入在html里的样式，而且带单位，如"px"
  4. }
复制代码

上面是动了，但是就像”瞬移“一样，直达目的地，这样不好，我们不止要让它动，还

要让它动得好看点。

我们知道setInterval可以让我们循环执行，那么，就有了下面代码：

  1. window.onload = function(){
  2.        var test = document.getElementById("test");
  3.        var interval = setInterval(function(){
  4.            if(test.offsetLeft >= 200){
  5.                clearInterval(interval);         //当条件满足时，清除setInterval
  6.                return;
  7.            }
  8.            test.style.left = test.offsetLeft + 1 + "px";  //每次递增1像素
  9.        },50)
  10. }
复制代码

这样，效果就慢慢的移像我们指定的位置了。

这里，通过运行代码后可以发现，这是慢慢移动了，但是匀速运动，看起来也不是

那么好看，我们需要让他在规定时间内，就移动到我们所在的位置。

为了实现要求，网上有这么一个算法库，就是实现动画的不同效果的，如下：

    1. var Tween = {
    2.     Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动
    3.     Quad:{//二次方缓动
    4.         easeIn:function (start,alter,curTime,dur) {
    5.             return start+Math.pow(curTime/dur,2)*alter;
    6.         },
    7.         easeOut:function (start,alter,curTime,dur) {
    8.             var progress =curTime/dur;
    9.             return start-(Math.pow(progress,2)-2*progress)*alter;
    10.         },
    11.         easeInOut:function (start,alter,curTime,dur) {
    12.             var progress =curTime/dur*2;
    13.             return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;
    14.         }
    15.     },
    16.     Cubic:{//三次方缓动
    17.         easeIn:function (start,alter,curTime,dur) {
    18.             return start+Math.pow(curTime/dur,3)*alter;
    19.         },
    20.         easeOut:function (start,alter,curTime,dur) {
    21.             var progress =curTime/dur;
    22.             return start-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alter;
    23.         },
    24.         easeInOut:function (start,alter,curTime,dur) {
    25.             var progress =curTime/dur*2;
    26.             return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alter/2+start;
    27.         }
    28.     },
    29.     Quart:{//四次方缓动
    30.         easeIn:function (start,alter,curTime,dur) {
    31.             return start+Math.pow(curTime/dur,4)*alter;
    32.         },
    33.         easeOut:function (start,alter,curTime,dur) {
    34.             var progress =curTime/dur;
    35.             return start-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alter;
    36.         },
    37.         easeInOut:function (start,alter,curTime,dur) {
    38.             var progress =curTime/dur*2;
    39.             return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alter/2+start;
    40.         }
    41.     },
    42.     Quint:{//五次方缓动
    43.         easeIn:function (start,alter,curTime,dur) {
    44.             return start+Math.pow(curTime/dur,5)*alter;
    45.         },
    46.         easeOut:function (start,alter,curTime,dur) {
    47.             var progress =curTime/dur;
    48.             return start-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alter;
    49.         },
    50.         easeInOut:function (start,alter,curTime,dur) {
    51.             var progress =curTime/dur*2;
    52.             return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alter/2+start;
    53.         }
    54.     },
    55.     Sine :{//正弦曲线缓动
    56.         easeIn:function (start,alter,curTime,dur) {
    57.             return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter;
    58.         },
    59.         easeOut:function (start,alter,curTime,dur) {
    60.             return start+Math.sin(curTime/dur*Math.PI/2)*alter;
    61.         },
    62.         easeInOut:function (start,alter,curTime,dur) {
    63.             return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter/2;
    64.         }
    65.     },
    66.     Expo: {//指数曲线缓动
    67.         easeIn:function (start,alter,curTime,dur) {
    68.             return curTime?(start+alter*Math.pow(2,10*(curTime/dur-1))):start;
    69.         },
    70.         easeOut:function (start,alter,curTime,dur) {
    71.             return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10*curTime/dur)+1)*alter);
    72.         },
    73.         easeInOut:function (start,alter,curTime,dur) {
    74.             if (!curTime) {return start;}
    75.             if (curTime==dur) {return start+alter;}
    76.             var progress =curTime/dur*2;
    77.             if (progress < 1) {
    78.                 return alter/2*Math.pow(2,10* (progress-1))+start;
    79.             } else {
    80.                 return alter/2* (-Math.pow(2, -10*--progress) + 2) +start;
    81.             }
    82.         }
    83.     },
    84.     Circ :{//圆形曲线缓动
    85.         easeIn:function (start,alter,curTime,dur) {
    86.             return start-alter*Math.sqrt(-Math.pow(curTime/dur,2));
    87.         },
    88.         easeOut:function (start,alter,curTime,dur) {
    89.             return start+alter*Math.sqrt(1-Math.pow(curTime/dur-1));
    90.         },
    91.         easeInOut:function (start,alter,curTime,dur) {
    92.             var progress =curTime/dur*2;
    93.             return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alter/2+start;
    94.         }
    95.     },
    96.     Elastic: {//指数衰减的正弦曲线缓动
    97.         easeIn:function (start,alter,curTime,dur,extent,cycle) {
    98.             if (!curTime) {return start;}
    99.             if ((curTime==dur)==1) {return start+alter;}
    100.             if (!cycle) {cycle=dur*0.3;}
    101.             var s;
    102.             if (!extent || extent< Math.abs(alter)) {
    103.                 extent=alter;
    104.                 s = cycle/4;
    105.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
    106.             return start-extent*Math.pow(2,10*(curTime/dur-1)) * Math.sin((curTime-dur-s)*(2*Math.PI)/cycle);
    107.         },
    108.         easeOut:function (start,alter,curTime,dur,extent,cycle) {
    109.             if (!curTime) {return start;}
    110.             if (curTime==dur) {return start+alter;}
    111.             if (!cycle) {cycle=dur*0.3;}
    112.             var s;
    113.             if (!extent || extent< Math.abs(alter)) {
    114.                 extent=alter;
    115.                 s =cycle/4;
    116.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
    117.             return start+alter+extent*Math.pow(2,-curTime/dur*10)*Math.sin((curTime-s)*(2*Math.PI)/cycle);
    118.         },
    119.         easeInOut:function (start,alter,curTime,dur,extent,cycle) {
    120.             if (!curTime) {return start;}
    121.             if (curTime==dur) {return start+alter;}
    122.             if (!cycle) {cycle=dur*0.45;}
    123.             var s;
    124.             if (!extent || extent< Math.abs(alter)) {
    125.                 extent=alter;
    126.                 s =cycle/4;
    127.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
    128.             var progress = curTime/dur*2;
    129.             if (progress<1) {
    130.                 return start-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
    131.             } else {
    132.                 return start+alter+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
    133.             }
    134.         }
    135.     },
    136.     Back:{
    137.         easeIn: function (start,alter,curTime,dur,s){
    138.             if (typeof s == "undefined") {s = 1.70158;}
    139.             return start+alter*(curTime/=dur)*curTime*((s+1)*curTime - s);
    140.         },
    141.         easeOut: function (start,alter,curTime,dur,s) {
    142.             if (typeof s == "undefined") {s = 1.70158;}
    143.             return start+alter*((curTime=curTime/dur-1)*curTime*((s+1)*curTime + s) + 1);
    144.         },
    145.         easeInOut: function (start,alter,curTime,dur,s){
    146.             if (typeof s == "undefined") {s = 1.70158;}
    147.             if ((curTime/=dur/2) < 1) {
    148.                 return start+alter/2*(Math.pow(curTime,2)*(((s*=(1.525))+1)*curTime- s));
    149.             }
    150.             return start+alter/2*((curTime-=2)*curTime*(((s*=(1.525))+1)*curTime+ s)+2);
    151.         }
    152.     },
    153.     Bounce:{
    154.         easeIn: function(start,alter,curTime,dur){
    155.             return start+alter-Tween.Bounce.easeOut(0,alter,dur-curTime,dur);
    156.         },
    157.         easeOut: function(start,alter,curTime,dur){
    158.             if ((curTime/=dur) < (1/2.75)) {
    159.                 return alter*(7.5625*Math.pow(curTime,2))+start;
    160.             } else if (curTime < (2/2.75)) {
    161.                 return alter*(7.5625*(curTime-=(1.5/2.75))*curTime + .75)+start;
    162.             } else if (curTime< (2.5/2.75)) {
    163.                 return alter*(7.5625*(curTime-=(2.25/2.75))*curTime + .9375)+start;
    164.             } else {
    165.                 return alter*(7.5625*(curTime-=(2.625/2.75))*curTime + .984375)+start;
    166.             }
    167.         },
    168.         easeInOut: function (start,alter,curTime,dur){
    169.             if (curTime< dur/2) {
    170.                 return Tween.Bounce.easeIn(0,alter,curTime*2,dur) *0.5+start;
    171.             } else {
    172.                 return Tween.Bounce.easeOut(0,alter,curTime*2-dur,dur) *0.5 + alter*0.5 +start;
    173.             }
    174.         }
    175.     }
    176. };

      http://www.xinran001.com/bbs/viewthread.php?tid=75666&highlight=%B6%AF%BB%AD

posted @ 2014-08-30 16:21  Shimily  阅读(370)  评论(0)  编辑  收藏  举报