Javascript動(dòng)畫(huà)效果（1）

更新時(shí)間：2016年10月11日 15:16:07 作者：foodoir

這篇文章主要為大家詳細(xì)介紹了第一篇Javascript動(dòng)畫(huà)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前面我們介紹了Javascript的回到頂部效果，今天呢，我們對(duì)Javascript動(dòng)畫(huà)做進(jìn)一步的研究。在這篇博文中我們只介紹簡(jiǎn)單的勻速運(yùn)動(dòng)、簡(jiǎn)單的緩沖運(yùn)動(dòng)和簡(jiǎn)單的多物體運(yùn)動(dòng)后面我們還會(huì)介紹任意值變化的運(yùn)動(dòng)、鏈?zhǔn)竭\(yùn)動(dòng)、同時(shí)運(yùn)動(dòng)，同時(shí)我們還會(huì)簡(jiǎn)單的封裝一個(gè)運(yùn)動(dòng)插件并且還會(huì)將Javascript方法和jquery方法進(jìn)行比較。

1、簡(jiǎn)單的勻速運(yùn)動(dòng)

下面我們介紹一個(gè)demo，鼠標(biāo)移入，動(dòng)畫(huà)向右移動(dòng)（即隱藏部分顯示）；鼠標(biāo)離開(kāi)，動(dòng)畫(huà)向左運(yùn)動(dòng)（繼續(xù)隱藏）整個(gè)過(guò)程都是勻速的。有了前面回到頂部效果作為基礎(chǔ)，這里主要講解重要部分，先來(lái)看看代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
      body,div,span{
        margin: 0px;
        padding: 0px;
      }
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        position: relative;
        left: -200px;
      }
      #share{
        width: 20px;
        height: 40px;
        background: blue;
        position: absolute;
        left: 200px;
        top: 75px;
      }
    </style>
    <script type="text/javascript">
      //一進(jìn)來(lái)就加載
      window.onload = function(){
        //獲取div
        var oDiv = document.getElementById('div1');
        //鼠標(biāo)移入時(shí)執(zhí)行函數(shù)
        oDiv.onmouseover = function(){
          startMove();
        }
        //鼠標(biāo)移出時(shí)執(zhí)行函數(shù)
        oDiv.onmouseout = function(){
          startMove1();
        }
      }
      //定義一個(gè)定時(shí)器
      var timer = null;
      function startMove(){
        //讓它一進(jìn)來(lái)的時(shí)候就把計(jì)時(shí)器清掉，避免后面引入多個(gè)計(jì)時(shí)器
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        //插入一個(gè)定時(shí)器
        timer = setInterval(function(){  
//         oDiv.style.left = oDiv.offsetLeft+10+'px';
//         //offsetLeft    當(dāng)前l(fā)eft的值
//         //此時(shí)運(yùn)行的結(jié)果為鼠標(biāo)移上去后，一直在動(dòng)，此時(shí)需要if進(jìn)行判斷
          if(oDiv.offsetLeft == 0){
            //當(dāng)當(dāng)前的left值為0的時(shí)候，清空計(jì)時(shí)器
            clearInterval(timer);
          }
          else{
            //當(dāng)當(dāng)前的left值不為0的時(shí)候，進(jìn)行移動(dòng)
            oDiv.style.left = oDiv.offsetLeft+10+'px';
          }
        },30)
      } 
       
      function startMove1(){
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        timer = setInterval(function(){
          if(oDiv.offsetLeft == -200){
            clearInterval(timer);
          }
          else{
            oDiv.style.left = oDiv.offsetLeft-10+'px';
          }
        },30)
      }
         
        //可以修改當(dāng)前內(nèi)容里面相同的部分
         
    </script>
  </head>
  <body>
    <div id="div1">
      <span id="share">
        分享
      </span>
    </div>
     
  </body>
</html>

在Javascript部分，我們發(fā)現(xiàn)有很多代碼重復(fù)了，這時(shí)我們可以通過(guò)將不同的地方用參數(shù)的方法傳進(jìn)去，主要代碼如下：

/*
 * 前面的onmouseover和onmouseout事件中分別改為
 * startMove(10,0);
 * startMove(-10,-200);
 * 后面再將  startMove和startMove1兩個(gè)函數(shù)進(jìn)行合并，代碼如下：     
 */
function startMove(speed,iTarget){
  clearInterval(timer);
  var oDiv = document.getElementById('div1');
  timer = setInterval(function(){
    if(oDiv.offsetLeft == iTarget){
      clearInterval(timer);
    }
    else{
      oDiv.style.left = oDiv.offsetLeft+speed+'px';
    }
  },30)
}

此時(shí)我們還是會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是，在功能相同的情況下，參數(shù)越少越好，這時(shí)我們要對(duì)我們之前的代碼做進(jìn)一步修改，因?yàn)閕Target是目標(biāo)值，所以我們考慮將speed參數(shù)去掉，代碼如下：

//考慮參數(shù)越少越好原則，可以去掉speed，同時(shí)，前面的onmouseover和onmouseout事件也應(yīng)相應(yīng)改變
function startMove(iTarget){
  clearInterval(timer);
  var oDiv = document.getElementById('div1');
  timer = setInterval(function(){
    //定義一個(gè)speed
    var speed = 0;
    //對(duì)speed進(jìn)行判斷
    if(oDiv.offsetLeft > iTarget){
      //當(dāng)oDiv.offsetLeft > iTarget時(shí)，應(yīng)該向左移動(dòng)
      speed = -10;
    }
    else{
      speed = 10;
    }
     
    if(oDiv.offsetLeft == iTarget){
      clearInterval(timer);
    }
    else{
      oDiv.style.left = oDiv.offsetLeft+speed+'px';
    }
  },30)
}

到這里，我們的勻速運(yùn)動(dòng)效果基本完成。在上面的demo中，我們改變的是left效果，同理我們還可以改變r(jià)ight，width和height效果。思考：在css3動(dòng)畫(huà)中有改變透明度的效果，在這里我們是否可以通過(guò)前面的方式來(lái)得到實(shí)現(xiàn)呢？
答案：大致可以用上面的方法去實(shí)現(xiàn)，但是有個(gè)小小的問(wèn)題值得注意，無(wú)論是left，right還是width，height它們都有單位px（在上面的demo中，有一行代碼就是這樣：oDiv.style.left = oDiv.offsetLeft+speed+'px';），而透明度無(wú)論是opacity也好，是filter也好，它們都是沒(méi)有單位的，故我們可以寫(xiě)如下代碼：

alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;

完整代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <style type="text/css">
      body,div{
        margin: 0px;
        padding: 0px;
      }
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        filter: alpha(opacity:30);
        opacity: 0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function(){
          startMove(100);   //鼠標(biāo)移入的時(shí)候，透明度為100%
        }
        oDiv.onmouseout = function(){
          startMove(30);   //鼠標(biāo)移出的時(shí)候，透明度為30%
        }
      }
      var timer = null;
      var alpha = 30;
      function startMove(iTarget){
        var oDiv = document.getElementById('div1');
        clearInterval(timer);    //在運(yùn)行之前，先關(guān)閉定時(shí)器
        //關(guān)了定時(shí)器后，現(xiàn)在運(yùn)行時(shí)需要加定時(shí)器
        timer = setInterval(function(){
          var speed = 0;
          if(alpha > iTarget){
            speed = -10;
          }
          else{
            speed = 10
          }
          if(alpha == iTarget){
            clearInterval(timer);
          }
          else{
            alpha += speed;
            oDiv.style.filter = 'alpha(opacity:'+alpha+')';
            oDiv.style.opacity = alpha/100;
          }
        },30)       
      }
       
    </script>
  </head>
  <body>
    <div id="div1">
      要求：
      <p>鼠標(biāo)移入，透明度為100%；鼠標(biāo)移出，透明度為30%</p>
    </div>
  </body>
</html>

到這里，我們的速度動(dòng)畫(huà)就告一段落了。關(guān)于opacity和filter，詳情請(qǐng)見(jiàn)這里

2、緩沖運(yùn)動(dòng)

回憶之前回到頂部效果，為了增加用戶的體驗(yàn)效果，回到頂部時(shí)是先快后慢。有了前面的基礎(chǔ)，這里句很好辦了，以demo1為例，我們可以添加如下代碼：

function startMove(iTarget){
        var oDiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function(){
          var speed = (iTarget - oDiv.offsetLeft)/20;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          //注意這里的取整問(wèn)題，不然運(yùn)動(dòng)后回不到原來(lái)的位置
//         if(speed > 0){
//           speed = Math.ceil(speed);
//         }
//         else{
//           speed = Math.floor(speed);
//         }
          if(iTarget == oDiv.offsetLeft){
            clearInterval(timer);
          }
          else{
            oDiv.style.left = oDiv.offsetLeft+speed+'px';
          }
        },30)
      }

在這段代碼中，var speed = (iTarget - oDiv.offsetLeft)/20;通過(guò)控制被除數(shù)可以控制動(dòng)畫(huà)的速度，然后我們分別用Math.floor和Math.ceil分別進(jìn)行向下和向上取整，如果沒(méi)用取整，那么鼠標(biāo)移入和移出都達(dá)不到想要的效果（計(jì)算機(jī)在進(jìn)行計(jì)算時(shí)總是有誤差的）。到這里，緩沖運(yùn)動(dòng)也介紹的差不多了。下面我們來(lái)介紹多物體運(yùn)動(dòng)。

3、多物體運(yùn)動(dòng)

有了前面的基礎(chǔ)，我們來(lái)看多物體運(yùn)動(dòng)時(shí)就覺(jué)得簡(jiǎn)單了。在多物體運(yùn)動(dòng)中，我們將寬度變化和透明度變化分開(kāi)來(lái)講
【多物體寬度變化】
在多物體寬度變化中，我們用無(wú)序列表來(lái)實(shí)現(xiàn)。與單個(gè)物體寬度變化不同的是，我們要用for循環(huán)依次遍歷我們想要的值，關(guān)鍵代碼如下：

var aLi = document.getElementsByTagName('li');
for(var i = 0; i< aLi.length; i++){   //i=0
  aLi[i].onmouseover = function(){
    startMove(this,400);
  }
  aLi[i].onmouseout = function(){
    startMove(this,200);
  }
}

全代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多物體動(dòng)畫(huà)</title>
    <style type="text/css">
      body,ul,li{
        margin: 0px;
        padding: 0px;
      }
      ul,li{
        list-style: none;
      }
      ul li{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i = 0; i< aLi.length; i++){   //i=0
          aLi[i].timer = null;
          aLi[i].onmouseover = function(){
            startMove(this,400);//this指向當(dāng)前的aLi[i].onmouseover事件
          }
          aLi[i].onmouseout = function(){
            startMove(this,200);//this指向當(dāng)前的aLi[i].onmouseout事件
          }
        }
         
      }
       
      //var timer = null;
      /*
       * 若該代碼還是在這里，當(dāng)鼠標(biāo)依次緩慢經(jīng)過(guò)時(shí)不會(huì)出現(xiàn)大的問(wèn)題，但是當(dāng)移動(dòng)的速度比較快時(shí)，會(huì)發(fā)現(xiàn)有問(wèn)題：可以變得越來(lái)越寬
       * 原因：timer并不是每次在鼠標(biāo)經(jīng)過(guò)每一個(gè)區(qū)域時(shí)為null
       * 解決辦法：在前面的for循環(huán)中加上aLi[i].timer = null;這樣每次執(zhí)行前都是null開(kāi)始
       */     
 
      function startMove(obj,iTarget){//因?yàn)閘i有多個(gè)，這里需要再傳一個(gè)參數(shù)obj
        //var aLi = document.getElementsByTagName('li');
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var speed = (iTarget - obj.offsetWidth)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == obj.offsetWidth){
            clearInterval(obj.timer);
          }
          else{
            obj.style.width = obj.offsetWidth+speed+'px';
            //是obj 不是 aLi
          }
        },30)
      }
    </script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

【多物體透明度動(dòng)畫(huà)】
有了上面的例子，我們就能很容易的寫(xiě)出多物體透明度動(dòng)畫(huà)的代碼，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多物體透明度動(dòng)畫(huà)</title>
    <style type="text/css">
      body,div{
        margin: 0px;
        padding: 0px;
      }
      div{
        width: 200px;
        height: 200px;
        background: red;
        margin: 10px;
        float: left;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
          oDiv[i].timer = null;
          oDiv[i].alpha = 30;
          oDiv[i].onmouseover = function(){
            startMove(this,100);
          }
          oDiv[i].onmouseout = function(){
            startMove(this,30);
          }
        }       
      }
      //var alpha = 30;
      function startMove(obj,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var speed = 0;
          if(iTarget > obj.alpha){
            speed = 10;
          }
          else{
            speed = -10;
          }
          if(iTarget == obj.alpha){
            clearInterval(obj.timer);
          }
          else{
            obj.alpha +=speed;
            obj.style.filter = 'obj.alpha(opacity:'+obj.alpha+')';
            obj.style.opacity = obj.alpha/100;
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
  </body>
</html>

和之前的timer一樣，alpha = 30;也需要寫(xiě)在for循環(huán)的后面。
到這里，簡(jiǎn)單的動(dòng)畫(huà)效果就告一段落了，慢慢的一步一步的去修改去嘗試就會(huì)有新的發(fā)現(xiàn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: