快捷導(dǎo)航

javascript勻速動畫和緩沖動畫詳解

更新時間：2016年10月20日 09:58:55 作者：張飛翔

這篇文章主要為大家詳細(xì)介紹了javascript勻速動畫和緩沖動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下

關(guān)于網(wǎng)頁中的動畫，在css3中我們已經(jīng)可以使用一些屬性快速的做出來，但是有時候為了瀏覽器的兼容性我們還是需要使用js來制作網(wǎng)頁中的動畫。

使用js做動畫最重要的一個函數(shù)就是setInterval函數(shù)，這里不再贅述，不懂可以直接百度用法。本文主要講動畫的原理已經(jīng)在制作過程中的要點。

老規(guī)矩，先上代碼，能直接看懂的可以節(jié)省時間。

html部分：

<!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); 
    //我們要求盒子既能向前又能向后，那么我們的步長就得有正有負(fù) 
    //目標(biāo)值如果大于當(dāng)前值取正，目標(biāo)值如果小于當(dāng)前值取負(fù) 
    var speed = target>ele.offsetLeft?3:-3; 
    ele.timer = setInterval(function () { 
      //在執(zhí)行之前就獲取當(dāng)前值和目標(biāo)值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft + speed + "px"; 
      //目標(biāo)值和當(dāng)前值只差如果小于步長，那么就不能再前進(jìn)了 
      //因為步長有正有負(fù)，所有轉(zhuǎn)換成絕對值來比較 
      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 () { 
      //獲取步長 確定移動方向(正負(fù)值) 步長應(yīng)該是越來越小的，緩動的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //對步長進(jìn)行二次加工(大于0向上取整,小于0項下取整) 
      step = step>0?Math.ceil(step):Math.floor(step); 
      //動畫原理： 目標(biāo)位置 = 當(dāng)前位置 + 步長 
      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會影響計算，從而導(dǎo)致有時候運(yùn)動不停止的情況。

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

勻速運(yùn)動：

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

緩沖運(yùn)動：

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

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

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

您可能感興趣的文章: