原生js實(shí)現(xiàn)jquery函數(shù)animate()動畫效果的簡單實(shí)例

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

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

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

注釋的部分是用來測試用的，寫代碼的過程并不是十分順利，因?yàn)橛胘s平時(shí)用的不是很細(xì)，都是大體知道方法，也用過，但等到真正要實(shí)現(xiàn)動畫函數(shù)的時(shí)候，細(xì)枝末節(jié)寫錯(cuò)了就可能把人難住了。

函數(shù)里面有幾個(gè)參數(shù)解釋一下，

•obj, 函數(shù)的對象

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

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

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

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

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

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

•必須為每一個(gè)對象分別添加一個(gè)定時(shí)器，否則互相會影響，一個(gè)定時(shí)器公用的結(jié)果是定時(shí)器的多個(gè)對象運(yùn)動出現(xiàn)卡頓。

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

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

這一句的作用是將屬性值取整，因?yàn)閷傩灾党薿pacity沒有小數(shù)。

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

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);
}

調(diào)用方式：

<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實(shí)現(xiàn)jquery函數(shù)animate()動畫效果的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: