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

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

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

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

•obj, 函數的物件

•json, 數值對，形式{attr：」value”, attr: “value”}，這裡是指要動畫物件的運動屬性

•interval, 每執行一次改變的間隔，這裡改變的是物件是屬性值

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

•fn, 回呼函數，執行完動畫之後的行為

程式碼比較簡單，只是有幾個細節要注意，在這裡提醒一下：

•物件的屬性不必直接聲明，所以函數的第一句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循環的時候不能隨意使用arr[i]形式，尤其是嵌套循環的時候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()動畫效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援PHP中文網。

更多原生js實作jquery函數animate()動畫效果的簡單實例相關文章請關注PHP中文網！