JavaScript簡單的動畫效果

antzone發表於2018-05-28
JavaScript動畫

本章節分享一段程式碼例項，它通過定時器函式實現了簡單的動畫效果。

當然是用此方式實現的動畫不夠流程，比如會出現類似於抖動的現象，不過也可以從其中獲取一些相關的應用知識。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:200px;
  height:200px;
  background:red;
  position:absolute;
  left:0;
  top:60px;
}
</style>
<script type="text/javascript">  
window.onload=function(){  
  var oDiv=document.getElementById("antzone");  
  var oBt=document.getElementsByTagName('input')[0];  
  var time=null;  
  oBt.onclick=function(){  
    clearInterval(time);
    time=setInterval(function(){  
      var speed=7;  
      if(oDiv.offsetLeft<=600){
        oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
      } 
      else{  
        clearInterval(time);  
      }  
    },40);  
  }  
}  
</script>
</head>
<body>
<input type="button" value="開始運動" />
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oDiv=document.getElementById("antzone")，獲取id屬性值為antzone的元素物件。

（3）.var oBt=document.getElementsByTagName('input')[0]，獲取input元素集合中的第一個元素，也就是按鈕物件。

（4）.var time=null，宣告一個變數並賦值為null,用來儲存定時器函式的標識。

（5）.oBt.onclick=function(){}，按鈕註冊click事件處理函式。

（6）.clearInterval(time)，停止定時器函式的執行，這裡是為了防止連續的點選導致兩次定時器函式執行重合現象。

（7）.time=setInterval(function(){  

  var speed=7;  

  if(oDiv.offsetLeft<=600){

    oDiv.style.left=oDiv.offsetLeft+speed+'px'; 

  } 

  else{  

    clearInterval(time);  

  }  

},40),每隔40毫秒執行一次相應的函式，也就是實現的運動效果。

二.相關閱讀:

（1）.getElementsByTagName()方法參閱document.getElementsByTagName()一章節。

（2）.setInterval()方法參閱setInterval()一章節。

（3）.offsetLeft屬性參閱js offsetLeft一章節。

相關文章