<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>move</title> 
  <link rel="stylesheet" href="move1.css"> 
</head> 
<body> 
  <input type="button" value="勻速移動" id="move1"> 
  <input type="button" value="漸變移動" id="move2"> 
  <div id="box1" class="box"></div> 
  <div id="box2" class="box"></div> 
  <script type="text/javascript" src="move1.js"></script> 
</body> 
</html>

css部分：

*{ 
  margin: 0px; 
  padding: 0px; 
} 
.box{ 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative; 
  margin-top: 10px; 
}

js部分：

/** 
 * Created by siri on 2016/9/10. 
 */ 
window.onload=function () { 
  var btn1 = document.getElementById('move1'); 
  var btn2 = document.getElementById('move2'); 
  var box1 = document.getElementById('box1'); 
  var box2 = document.getElementById('box2'); 
  btn1.onclick = function () { 
    animate1(box1,500); 
  } 
  btn2.onclick = function () { 
    animate2(box2,500); 
  } 
  //勻速動畫 
  function animate1(ele,target){ 
    //要用定時器，先清除定時器 
    //一個盒子只能有一個定時器，這樣兒的話，不會和其他盒子出現(xiàn)定時器沖突 
    //而定時器本身講成為盒子的一個屬性 
    clearInterval(ele.timer); 
    //我們要求盒子既能向前又能向后，那么我們的步長就得有正有負 
    //目標值如果大于當前值取正，目標值如果小于當前值取負 
    var speed = target>ele.offsetLeft?3:-3; 
    ele.timer = setInterval(function () { 
      //在執(zhí)行之前就獲取當前值和目標值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft + speed + "px"; 
      //目標值和當前值只差如果小于步長，那么就不能再前進了 
      //因為步長有正有負，所有轉換成絕對值來比較 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target + "px"; 
        clearInterval(ele.timer); 
 
      } 
    },30); 
  } 
 
  //緩動動畫封裝 
  function animate2(ele,target) { 
    clearInterval(ele.timer); //清楚歷史定時器 
    ele.timer = setInterval(function () { 
      //獲取步長 確定移動方向(正負值) 步長應該是越來越小的，緩動的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //對步長進行二次加工(大于0向上取整,小于0項下取整) 
      step = step>0?Math.ceil(step):Math.floor(step); 
      //動畫原理： 目標位置 = 當前位置 + 步長 
      console.log(step); 
      ele.style.left = ele.offsetLeft + step + "px"; 
      //檢測緩動動畫有沒有停止 
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ 
        ele.style.left = target + "px"; //直接移動指定位置 
        clearInterval(ele.timer); 
      } 
    },30); 
  } 
 
 
}

html和css基本就是為了我們的js部分搭框架，不講太多，要注意的是，一定要對全局的margin和padding清零，否則的話他在計算的時候初始的margin和padding會影響計算，從而導致有時候運動不停止的情況。

javascript部分代碼的解析在源碼中已經(jīng)很詳細了，下面主要講解原理。

勻速運動：

通過setInterval函數(shù)我們控制每多少毫秒運動的距離，然后在快要到達指定位置的時候，判斷步長（每多少毫秒運動的距離）和此時和目標位置的距離，如果步長大于此時和目標位置的距離，則直接定位到目標位置，這樣做是為了避免步長和總距離不是整數(shù)倍關系而產(chǎn)生最后到達位置和目標位置有差值的錯誤。

緩沖運動：

緩沖運動的基本函數(shù)是和勻速運動一樣的，只是緩沖運動的步長我們是通過和目標位置的距離來確定的，這樣我們的步長是不斷變小的，從而實現(xiàn)緩沖運動的效果。在確定步長的時候我們使用Math.ceil和Math.floor對步長值進行取整是為了避免出現(xiàn)小數(shù)，因為如果出現(xiàn)小數(shù)后面最后到達的位置肯定是和目標位置有誤差的。

注意事項：在每次移動開始前一定要使用clearInterval清除定時器。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: