原生js實現jquery函數animate()動畫效果的簡單實例

更新時間：2016年08月21日 13:54:15 投稿：jingxian

下面小編就為大家?guī)硪黄鷍s實現jquery函數animate()動畫效果的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

通過在公司一個月的實習，慢慢的對css跟html算是比較熟悉了，這幾天開始研究js，今天用js寫了一個jquery的animate函數，測試了下，性能還可以。個人覺得jquery并不是萬能的，因為是個框架，所以有些東西寫的比較死，就像animate函數一樣，可選的參數不多有時候可能并不能實現我們想要的效果。　　

注釋的部分是用來測試用的，寫代碼的過程并不是十分順利，因為用js平時用的不是很細，都是大體知道方法，也用過，但等到真正要實現動畫函數的時候，細枝末節(jié)寫錯了就可能把人難住了。

函數里面有幾個參數解釋一下，

•obj, 函數的對象

•json, 數值對，形式{attr：”value”, attr: “value”}，在這里是指要動畫對象的運動屬性

•interval, 每執(zhí)行一次改變的間隔，這里改變的是對象是屬性值

•sp, 值變換的速度，使動畫具有緩沖效果，而不只是勻速不變（sp為1）的

•fn, 回調函數，執(zhí)行完動畫之后的行為

代碼比較簡單，只是有幾個細節(jié)需要注意，在這里提醒一下：

•對象的屬性不必直接聲明，所以函數的第一句clearInterval(obj.timer);并不會報錯。

•必須為每一個對象分別添加一個定時器，否則互相會影響，一個定時器公用的結果是定時器的多個對象運動出現卡頓。

•son數據格式了解一下，當遍歷對象的動畫屬性的時候，需要icur != json[arr]判斷是否每一個屬性已經達到目標值。flag的作用是防止當其中某個屬性第一個達到目標值后，clearInterval(obj.timer)清除了定時器，結果其他動畫屬性并沒有達到目標值。所以在每次遍歷的時候初始化flag值為true，只要遇到一個沒有達到目標屬性的對象，就將flag置為false，直至對象的所有屬性達到目標值，清除定時器。

•speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);

這一句的作用是將屬性值取整，因為屬性值除了opacity沒有小數。

•最后調用的時候注意動畫的對象，在使用for循環(huán)的時候不能隨意使用arr[i]形式，尤其是嵌套循環(huán)的時候i的值已經變成了最大值。

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //針對ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }

    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

調用方式：

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });

    }
  }

</script>

以上這篇原生js實現jquery函數animate()動畫效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: