如何打造通用的勻速運(yùn)動(dòng)框架

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何打造通用的勻速運(yùn)動(dòng)框架，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，微信小程序，軟件按需求定制網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

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

上文中，側(cè)邊欄效果用的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ù)，要變成通用的，首先面臨的問題就是這個(gè)函數(shù)要同時(shí)支持left值和透明度的變化，更通用的做法應(yīng)該是要支持所有的樣式變化，比如輪播功能，他有左右滑動(dòng)，也有上下滑動(dòng)。

我們可以在獲取樣式和改變樣式的時(shí)候，做一下判斷就可以了，判斷分2類就能達(dá)到目的，因?yàn)槠渌麡邮? 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相比之前多了一個(gè)參數(shù)attr, 這個(gè)參數(shù)就是變化的樣式，obj: 變化的對象， target: 樣式需要變化到的目標(biāo)值. speed: 樣式每次變化的大小

如：

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

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

this：當(dāng)前圖片對象

opacity: 變化的樣式是透明度

100: 鼠標(biāo)移到圖片上時(shí)，透明度變成100

10: 透明度每次在原來的基礎(chǔ)上加10




 
 合并的運(yùn)動(dòng) - by ghostwu
 
 



 分享到

上述就是完整的代碼實(shí)例。

當(dāng)你分別測試這兩個(gè)功能的時(shí)候：

移動(dòng)到圖片上然后移出來

移動(dòng)到分享到，然后移出來

這樣是沒有問題的

如果你這樣測試：

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

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




 
 Document
 
 



 分享到

至此，我們就完成了多物體運(yùn)動(dòng)與不同樣式的修改

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

比如：

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

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

this: 當(dāng)前div元素

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

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

完整的同時(shí)運(yùn)動(dòng)變化代碼：




 
 Document

請自行展開這段代碼，這段代碼能夠同時(shí)運(yùn)動(dòng)，但是有一個(gè)問題：

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

答案是很明顯的，肯定是目標(biāo)近的( height : 400 )那個(gè)先到達(dá)，然后把對象上的定時(shí)器關(guān)了，另一個(gè)目標(biāo)更遠(yuǎn)的( width: 500 )肯定到達(dá)不了

你可以在這句代碼下面，輸出當(dāng)前的值和目標(biāo)值：

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

其實(shí)也好辦，就是height = 400的時(shí)候不要把定時(shí)器關(guān)了，應(yīng)該等width = 500的時(shí)候再關(guān)閉定時(shí)器，不就在同一時(shí)間，完成了同時(shí)到達(dá)目標(biāo)的效果嗎？

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

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

上述就是小編為大家分享的如何打造通用的勻速運(yùn)動(dòng)框架了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

如何打造通用的勻速運(yùn)動(dòng)框架

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管