打造通用的勻速運動框架(實例講解)

更新時間：2017年10月17日 08:50:47 作者：ghostwu

下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\動框架(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文，是接著上 基于勻速運動的實例講解(側邊欄,淡入淡出) 繼續(xù)的，在這篇文章的最后，我們做了2個小實例：側邊欄與改變透明度的淡入淡出效果，本文我們把上文的animate函數(shù)，繼續(xù)改造，讓他變得更加的通用和強大：

1，支持多個物體的運動

2，同時運動

3，順序運動

這三種運動方式也是jquery中animate函數(shù)支持的

一、animate函數(shù)中怎么區(qū)分變化不同的樣式？

上文中，側邊欄效果用的animate函數(shù) 改變的是left值

function animate(obj, target, speed) {
 clearInterval(timer);
 timer = setInterval(function () {
 if (obj.offsetLeft == target) {
  clearInterval(timer);
 } else {
  obj.style.left = obj.offsetLeft + speed + 'px';
 }
 }, 30);
}

淡入淡出效果用的animate函數(shù) 改變的是透明度

function animate(obj, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   cur = css( obj, 'opacity') * 100;
   if( cur == target ){
   clearInterval( timer );
   }else {
   cur += speed;
   obj.style.opacity = cur / 100;
   obj.style.filter = "alpha(opacity:" + cur + ")";
   }
  }, 30);
  }

而我們封裝的函數(shù)，要變成通用的，首先面臨的問題就是這個函數(shù)要同時支持left值和透明度的變化，更通用的做法應該是要支持所有的樣式變化，比如輪播功能，他有左右滑動，也有上下滑動。

我們可以在獲取樣式和改變樣式的時候，做一下判斷就可以了，判斷分2類就能達到目的，因為其他樣式( margin, left, top, right, font-size等等 )都是px，而透明度沒有px單位

function animate(obj, attr, target, speed) {
 clearInterval(timer);
 var cur = 0;
 timer = setInterval(function () {
 if (attr == 'opacity') {
  cur = css(obj, 'opacity') * 100;
 } else {
  cur = parseInt(css(obj, attr));
 }

 if (cur == target) {
  clearInterval(timer);
 } else {
  if (attr == 'opacity') {
  obj.style.opacity = ( cur + speed ) / 100;
  obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
  } else {
  obj.style[attr] = cur + speed + "px";
  }
 }
 }, 30);
}

合并之后的animate相比之前多了一個參數(shù)attr, 這個參數(shù)就是變化的樣式，obj: 變化的對象， target: 樣式需要變化到的目標值. speed: 樣式每次變化的大小

如：

oImg.onmouseover = function () {
　　animate(this, 'opacity', 100, 10);
}

oImg是獲取到的圖片對象. 這里各參數(shù)意思如下：

this：當前圖片對象

opacity: 變化的樣式是透明度

100: 鼠標移到圖片上時，透明度變成100

10: 透明度每次在原來的基礎上加10

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>合并的運動 - by ghostwu</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box"),
  timer = null;

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(timer);
   } else {
   if (attr == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>分享到</div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

上述就是完整的代碼實例。

當你分別測試這兩個功能的時候：

移動到圖片上然后移出來

移動到分享到，然后移出來

這樣是沒有問題的

如果你這樣測試：

移動到分享到，然后迅速又移動到圖片上，這個時候你會發(fā)現(xiàn) 分享到停下來了，這就不符合邏輯了! 按道理來說，鼠標移動到圖片上，相當于觸發(fā)了 “分享到” 的mouseout( 鼠標移出事件 )，那么 "分享到" 這個時候要隱藏，并不是停止。為什么會這樣呢？因為這兩個運動共享了一個定時器，當鼠標移動到圖片上，開啟定時器的時候，把“分享到”的定時器給停了。那么再做多物體運動的時候，我們就要把定時器拆分，每個對象都要有一個定時器，怎么做呢？非常簡單，不要定義一個簡單的timer變量，我們只要把timer加在obj對象上，那么每個對象都有一個timer屬性，就達到定時器的分離效果了

修改之后的完整代碼如下，請自行展開：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box");

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(obj.timer);
   } else {
   if (attr == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>分享到</div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

至此，我們就完成了多物體運動與不同樣式的修改

二、讓animate函數(shù)支持多個樣式同時改變

比如：

oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}

oBox是一個div元素，animate各參數(shù)的意思：

this: 當前div元素

{width : 500, "height" : 400 } : 把寬度變成500, 高度變成400，這兩個樣式要在同一時間完成，

10: 樣式每次在原來的基礎上變化10（如width初始值200--> 210, 220, 230.....）

完整的同時運動變化代碼：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
//  animate( this, { "width" : 500, "height" : 500 }, 10 );
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur == target) {
    clearInterval(obj.timer);
   } else {
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>

請自行展開這段代碼，這段代碼能夠同時運動，但是有一個問題：

div的初始寬度與高度（ width : 200, height : 200）

變化步長一樣( 10 )

變化時間一樣( 每30毫秒變化一次 )

目標( width: 500, height : 400 )

你能想到什么問題嗎？( 兩個人在同一起跑線上，速度一樣，時間一樣，但是要同時到達不同的目標，一個500, 一個400 )

答案是很明顯的，肯定是目標近的( height : 400 )那個先到達，然后把對象上的定時器關了，另一個目標更遠的( width: 500 )肯定到達不了

你可以在這句代碼下面，輸出當前的值和目標值：

var target = attr[key];
console.log( key, cur, target );

輸出來的結果是：

從上圖可以看出，height已經(jīng)達到了400px，但是width停在了410px,為什么不是400px ? 因為width = 400的時候，就是( cur == 500 ) 相當于( 400 == 500 ) 不成立，所以執(zhí)行了else語句，width = cur + 10 = 400 + 10 = 410，然后height到達400px停止了定時器，所以width停在了410px.

那么我們怎么解決這個問題呢？

其實也好辦，就是height = 400的時候不要把定時器關了，應該等width = 500的時候再關閉定時器，不就在同一時間，完成了同時到達目標的效果嗎？

修改后的代碼如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
   if ( bFlag ) {
   clearInterval( obj.timer );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>

聲明一個變量，每次變化完一次( width, height )樣式把bFlag = true，只要在for循環(huán)中有一個沒有到達目標，bFlag的值都是false，這樣就不會關閉定時器。當兩個都到達目標，才關閉定時器.

三、順序運動

如樣式變化，按順序來，不是同時變化，如：

oBox.onmouseover = function(){
//回調(diào)函數(shù)： 把函數(shù)當做參數(shù)傳遞給另一個函數(shù)
　　animate( this, { 'width' : 500 }, 10, function(){
　　　　animate( this, { 'height' : 500 }, 10 );
　　} );
}

當把width變成500px的時候，如果傳遞了回調(diào)函數(shù)，再接著執(zhí)行回調(diào)函數(shù)里面的運動

修改后的完整代碼：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>通用的勻速運動框架 - by ghostwu</title>
 <style>
 div {
  width: 200px;
  height: 200px;
  background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  //回調(diào)函數(shù)： 把函數(shù)當做參數(shù)傳遞給另一個函數(shù)
  animate( this, { 'width' : 500 }, 10, function(){
   animate( this, { 'height' : 500 }, 10 );
  } );
  }

  function animate(obj, attr, speed, fn ) {

  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for (var key in attr) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }

   if (bFlag) {
   clearInterval(obj.timer);
   fn && fn.call( obj );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

以上這篇打造通用的勻速運動框架(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js 生成隨機漢字的問題
2008-02-02
詳解JS鼠標事件中clientX/screenX/offsetX/pageX屬性的區(qū)別
在熟悉業(yè)務中播放器功能的時候,發(fā)現(xiàn)時間軸上綁定了點擊和拖動事件,頻繁遇到了類似pageX之類的事件屬性,所以本文就來和大家詳細聊聊clientX/screenX/offsetX/pageX等屬性的區(qū)別吧
2024-03-03
JS實現(xiàn)頁面指定區(qū)域全屏閱讀功能
這篇文章主要介紹了JS實現(xiàn)頁面指定區(qū)域全屏閱讀功能,實現(xiàn)流程大概是需要在項目中安裝vueuse及需要用到的頁面中引入useFullScreen,本文給大家介紹的非常詳細,需要的朋友可以參考下
2024-06-06
IE iframe的onload方法分析小結
在判斷 iframe 是否加載完成的完美方法一文中，懌飛最后有如下兩點補充。
2010-01-01
javascript加載導出3mf文件
3MF是一種開放標準的文件格式,專門用于三維制造和打印,這篇文章主要介紹了如何使用JavaScript實現(xiàn)加載導出3mf文件,感興趣的可以了解下
2024-11-11
微信小程序實現(xiàn)多張圖片上傳功能
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)多張圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
詳細聊聊JS中不一樣的深拷貝
對于js中的對象的深拷貝在項目的開發(fā)中比較常用到,這篇文章主要給大家介紹了關于JS中不一樣的深拷貝的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
JavaScript 格式字符串的應用
在使用JavaScript中的Date對象時，有一個常用的操作就是輸出。但Date對象自帶的toString()方法輸出的格式并不能滿足用戶多樣化的需求。我在想，是不是可以將C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢？
2010-03-03
基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)的相關資料,需要的朋友可以參考下
2015-11-11
20條學習javascript的編程規(guī)范的建議
本文總結了20條javascript的編程規(guī)范，都是平時項目中使用的時候需要注意的地方，這里推薦給大家，如對大家有所幫助，那便是極好的了。
2014-11-11