javascript鏈?zhǔn)竭\(yùn)動(dòng)框架

booster 發(fā)布于2019-08-23 11:37 / 2835人閱讀

摘要：我們可以在運(yùn)動(dòng)框架的基礎(chǔ)上，在加上一個(gè)函數(shù)，當(dāng)運(yùn)動(dòng)執(zhí)行完成之后執(zhí)行的操作。鏈?zhǔn)竭\(yùn)動(dòng)框架有可能會(huì)出現(xiàn)誤差運(yùn)動(dòng)結(jié)束后，如果參數(shù)傳遞進(jìn)去了就執(zhí)行函數(shù)鏈?zhǔn)竭\(yùn)動(dòng)例子我們用上面的鏈?zhǔn)竭\(yùn)動(dòng)框架做一個(gè)先運(yùn)動(dòng)調(diào)整寬度，再運(yùn)動(dòng)調(diào)整高度，最后運(yùn)動(dòng)調(diào)整透明度。

前面介紹的運(yùn)動(dòng)都是一個(gè)物體運(yùn)動(dòng)之后就結(jié)束了，如果一個(gè)物體運(yùn)動(dòng)之后，還有其他的操作，比如一個(gè)div先變寬，然后變高、最后變透明度，我們前面的運(yùn)動(dòng)框架就不滿足情況了。我們可以在運(yùn)動(dòng)框架的基礎(chǔ)上，在加上一個(gè)fnEnd函數(shù)，當(dāng)運(yùn)動(dòng)執(zhí)行完成之后執(zhí)行的操作。

鏈?zhǔn)竭\(yùn)動(dòng)框架

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能會(huì)出現(xiàn)誤差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//運(yùn)動(dòng)結(jié)束后，如果fnEnd參數(shù)傳遞進(jìn)去了就執(zhí)行fnEnd函數(shù)
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}

鏈?zhǔn)竭\(yùn)動(dòng)例子

我們用上面的鏈?zhǔn)竭\(yùn)動(dòng)框架做一個(gè)div先運(yùn)動(dòng)調(diào)整寬度，再運(yùn)動(dòng)調(diào)整高度，最后運(yùn)動(dòng)調(diào)整透明度。



  
    鏈?zhǔn)竭\(yùn)動(dòng)

云服務(wù)器 GPU云服務(wù)器 JavaScript緩沖運(yùn)動(dòng) javascript框架 javascript框架分類 javascript開源框架

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97214.html

相關(guān)文章

JavaScript完美運(yùn)動(dòng)框架的進(jìn)階之旅

摘要：運(yùn)動(dòng)框架動(dòng)起來進(jìn)行運(yùn)動(dòng)的節(jié)點(diǎn)定時(shí)器你沒看錯(cuò)，就是那么簡(jiǎn)單。直接在定時(shí)器內(nèi)部，判斷到達(dá)目標(biāo)值，清除定時(shí)器就行拉運(yùn)動(dòng)框架運(yùn)動(dòng)終止進(jìn)行運(yùn)動(dòng)的節(jié)點(diǎn)運(yùn)動(dòng)終止條件。轉(zhuǎn)自個(gè)人博客三省吾身丶丶原來是JS動(dòng)畫效果，但是我會(huì)過頭再看的時(shí)候，發(fā)現(xiàn)太粗略了，于是重新寫了一篇。喜歡別只收藏啊，點(diǎn)個(gè)推薦，大兄弟^ ^！運(yùn)動(dòng)框架的實(shí)現(xiàn)思路運(yùn)動(dòng)，其實(shí)就是在一段時(shí)間內(nèi)改變left、right、width、hei...

Pines_Cheng 2019-08-21 10:46 評(píng)論0 收藏0
jquery運(yùn)動(dòng)

摘要：運(yùn)動(dòng)做鏈?zhǔn)竭\(yùn)動(dòng)的時(shí)候可以使用回調(diào)函數(shù)，多寫幾個(gè)運(yùn)動(dòng)。然后逐一運(yùn)動(dòng)這些調(diào)用。默認(rèn)是，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行?？蛇x參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。清除當(dāng)前運(yùn)動(dòng)停止滑動(dòng)點(diǎn)擊這里，向下滑動(dòng)面板在前面封裝的move.js框架，在jquery中有同樣封裝好的功能animate()。使用方法非常類似，下面我們看看animate的使用方法，有了原生的運(yùn)動(dòng)方法，然后再使用jq...

ThreeWords 2019-08-23 11:40 評(píng)論0 收藏0
javascript完美運(yùn)動(dòng)

摘要：在這個(gè)完美運(yùn)動(dòng)框架中，我們可以只讓一個(gè)物體的一個(gè)屬性運(yùn)動(dòng)，可以鏈?zhǔn)秸{(diào)用，也可以幾個(gè)屬性同時(shí)運(yùn)動(dòng)。能解決我們項(xiàng)目中遇到的大部分運(yùn)動(dòng)。運(yùn)動(dòng)框架演變過程運(yùn)動(dòng)實(shí)現(xiàn)留言板的例子完美運(yùn)動(dòng)運(yùn)動(dòng)，高度展開發(fā)布前面的運(yùn)動(dòng)，每次只能改一個(gè)值，你改div的width的時(shí)候，就不能改div的高度，改高度的時(shí)候就不能改寬度，如果我的運(yùn)動(dòng)想同時(shí)改寬度和高度，怎么實(shí)現(xiàn)？在這里我們把屬性和目標(biāo)值用json實(shí)現(xiàn)。在這...

BenCHou 2019-08-23 11:38 評(píng)論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享淺談前端線上部署與運(yùn)維說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

Codeing_ls 2019-08-01 18:22 評(píng)論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享淺談前端線上部署與運(yùn)維說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

xiaowugui666 2019-08-21 18:43 評(píng)論0 收藏0