快捷導(dǎo)航

Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理)

更新時(shí)間：2015年01月23日 16:33:48 投稿：mdxy-dxy

這篇文章主要介紹了Javascript 完美運(yùn)動(dòng)框架,逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理,需要的朋友可以參考下

大家一聽(tīng)這名字就知道，有了這套框架網(wǎng)上的效果基本都是可以實(shí)現(xiàn)的。實(shí)際上之前的運(yùn)動(dòng)框架還是有局限性的，就是不能讓好幾個(gè)值一塊運(yùn)動(dòng)。

那這個(gè)問(wèn)題怎么解決呢？我們先來(lái)看看之前的運(yùn)動(dòng)框架

function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name];
  } else {
    return getComputedStyle(obj, null)[name];
  }
}


function startMove(obj, attr, iTarget) {
  clearInterval(obj.time);
  obj.time = setInterval(function() {
    var cur = 0;

    if (attr == 'opacity') {
      cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
    } else {
      cur = parseInt(getStyle(obj, attr));
    }

    var speed = (iTarget - cur) / 6;

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

    if (cur == iTarget) {
      clearInterval(obj.time);
    } else {
      if (attr == 'opacity') {
        obj.style.filter = 'alpha(opacity=' + cur + speed + ')';
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }
  }, 30);
}

怎么修改呢？實(shí)際上很簡(jiǎn)單，在過(guò)去的框架中，你每一次只能傳一個(gè)樣式，和一個(gè)值。那么現(xiàn)在把這些改成一個(gè)json對(duì)象。相信大家就明白了。

我們調(diào)用的時(shí)候就是startMove(oDiv,{width:200,height:200}); 如果需要的話就在加上回調(diào)函數(shù)。那么我們具體看看代碼是怎么修改的。

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次調(diào)用就只有一個(gè)定時(shí)器在工作(開始運(yùn)動(dòng)時(shí)關(guān)閉已有定時(shí)器)
  //并且關(guān)閉或者開啟都是當(dāng)前物體的定時(shí)器，已防止與頁(yè)面上其他定時(shí)器的沖突，使每個(gè)定時(shí)器都互不干擾 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function (){
    
    var bStop=true; // 假設(shè)：所有的值都已經(jīng)到了
    
    for(var name in json)
    {
      var iTarget=json[name]; // 目標(biāo)點(diǎn)
      
      //處理透明度，不能使用parseInt否則就為0了 
      
      if(name=='opacity')
      {
        
        // *100 會(huì)有誤差 0000007 之類的 所以要用 Math.round() 會(huì)四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100); 
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 當(dāng)前移動(dòng)的數(shù)值
      }
      
      var speed=(iTarget-cur)/5; // 物體運(yùn)動(dòng)的速度 數(shù)字越小動(dòng)的越慢 /5 : 自定義的數(shù)字
      
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
      
      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }
      
      // 某個(gè)值不等于目標(biāo)點(diǎn) 
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }
    
    // 都達(dá)到了目標(biāo)點(diǎn)
    if(bStop)
    {
      clearInterval(obj.timer);
      
      if(fnEnd) //只有傳了這個(gè)函數(shù)才去調(diào)用
      {
        fnEnd();
      }
    }
  }, 20);
}

為什么會(huì)有bstop的假設(shè)呢？

其實(shí)如果我這樣調(diào)用startMove(oDiv,{width:101,height:200}); 寬度變成101 已經(jīng)完成運(yùn)動(dòng)了，高度沒(méi)有到，但是我們可能已經(jīng)關(guān)閉了當(dāng)前的定時(shí)器。運(yùn)動(dòng)已經(jīng)結(jié)束了，就會(huì)出現(xiàn)一個(gè)特殊情況下的bug。解釋一下：

實(shí)際上來(lái)說(shuō)，需要所有的運(yùn)動(dòng)都到了才關(guān)閉定時(shí)器，反過(guò)來(lái)說(shuō)，如果沒(méi)有不到的，那就關(guān)閉。在程序上就是定義一個(gè)布爾值，一開始為true，假設(shè)

所有的值都已經(jīng)到了，如果說(shuō)有一個(gè)值不等于目標(biāo)點(diǎn)，bstop為false 。在整個(gè)循環(huán)結(jié)束后，bstop 為ture 就說(shuō)明所有運(yùn)動(dòng)都完成了，這個(gè)時(shí)候就關(guān)閉定時(shí)器。

那么這個(gè)運(yùn)動(dòng)框架基本已經(jīng)完成了，適用css2 不適用css3。

總結(jié)：

運(yùn)動(dòng)框架的演變過(guò)程

startMove(iTarget) 運(yùn)動(dòng)框架
startMove(obj,iTarget) 多物體
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 鏈?zhǔn)竭\(yùn)動(dòng)
startMove(obj,json,fn) 完美運(yùn)動(dòng)

O(∩_∩)O謝謝 ~

您可能感興趣的文章: