快捷導(dǎo)航

javascript勻速動(dòng)畫和緩沖動(dòng)畫詳解

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

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

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

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

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

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="勻速移動(dòng)" id="move1"> 
  <input type="button" value="漸變移動(dòng)" 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); 
  } 
  //勻速動(dòng)畫 
  function animate1(ele,target){ 
    //要用定時(shí)器，先清除定時(shí)器 
    //一個(gè)盒子只能有一個(gè)定時(shí)器，這樣兒的話，不會(huì)和其他盒子出現(xiàn)定時(shí)器沖突 
    //而定時(shí)器本身講成為盒子的一個(gè)屬性 
    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)了 
      //因?yàn)椴介L有正有負(fù)，所有轉(zhuǎn)換成絕對值來比較 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target + "px"; 
        clearInterval(ele.timer); 
 
      } 
    },30); 
  } 
 
  //緩動(dòng)動(dòng)畫封裝 
  function animate2(ele,target) { 
    clearInterval(ele.timer); //清楚歷史定時(shí)器 
    ele.timer = setInterval(function () { 
      //獲取步長 確定移動(dòng)方向(正負(fù)值) 步長應(yīng)該是越來越小的，緩動(dòng)的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //對步長進(jìn)行二次加工(大于0向上取整,小于0項(xiàng)下取整) 
      step = step>0?Math.ceil(step):Math.floor(step); 
      //動(dòng)畫原理： 目標(biāo)位置 = 當(dāng)前位置 + 步長 
      console.log(step); 
      ele.style.left = ele.offsetLeft + step + "px"; 
      //檢測緩動(dòng)動(dòng)畫有沒有停止 
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ 
        ele.style.left = target + "px"; //直接移動(dòng)指定位置 
        clearInterval(ele.timer); 
      } 
    },30); 
  } 
 
 
}

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

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

勻速運(yùn)動(dòng)：

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

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

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

注意事項(xiàng)：在每次移動(dòng)開始前一定要使用clearInterval清除定時(shí)器。

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

您可能感興趣的文章: