亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

javascript完美運(yùn)動(dòng)

BenCHou / 2903人閱讀

摘要：在這個(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)框架演變過(guò)程運(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)。
在這個(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)框架代碼 
function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    for(var attr in json){
      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 = (json[attr] - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if (cur === json[attr]) {
        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)
}
用完美運(yùn)動(dòng)框架做一個(gè)寬高同時(shí)運(yùn)動(dòng)的實(shí)例 


  
    完美運(yùn)動(dòng)

如果我們直接按照上面的方式，當(dāng)我們運(yùn)行下面代碼的時(shí)候

startMove(oDiv,{width:101,height:300,opacity:100});

發(fā)現(xiàn)頁(yè)面是有問(wèn)題的，why?

if (cur === json[attr]) {
        clearInterval(obj.timer);
        if(fnEnd)fnEnd();//運(yùn)動(dòng)結(jié)束后，如果fnEnd參數(shù)傳遞進(jìn)去了就執(zhí)行fnEnd函數(shù)
      }

我們發(fā)現(xiàn)width先執(zhí)行完成，當(dāng)一個(gè)屬性執(zhí)行完成之后我們就關(guān)掉了定時(shí)器，所以沒有達(dá)到我們預(yù)期的效果。我們看看怎么解決。
我們可以判斷當(dāng)所有值都達(dá)到目標(biāo)點(diǎn)的時(shí)候在結(jié)束運(yùn)動(dòng)。

修改之后的運(yùn)動(dòng)框架如下 
function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop=true;//假設(shè)：所有值都已經(jīng)執(zhí)行結(jié)束
    for(var attr in json){
      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 = (json[attr] - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if(cur!=json[attr]){//假設(shè)有沒到目的地的值我們?cè)O(shè)置為false
        bStop=false;
      }
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
    if (bStop) {//如果bStop為true代表值都到目的地，這時(shí)候我們才關(guān)定時(shí)器
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//運(yùn)動(dòng)結(jié)束后，如果fnEnd參數(shù)傳遞進(jìn)去了就執(zhí)行fnEnd函數(shù)
    }
  }, 30)
}
測(cè)試?yán)尤缦?/b> 


  
    完美運(yùn)動(dòng)

到目前為止，我們可以在任何地方用我們的運(yùn)動(dòng)框架做運(yùn)動(dòng)效果。

運(yùn)動(dòng)框架演變過(guò)程

運(yùn)動(dòng)實(shí)現(xiàn)留言板的例子 


  
    完美運(yùn)動(dòng)

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

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

相關(guān)文章

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

    摘要：運(yùn)動(dòng)框架動(dòng)起來(lái)進(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è)人博客三省吾身丶丶原來(lái)是JS動(dòng)畫效果，但是我會(huì)過(guò)頭再看的時(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 評(píng)論0 收藏0

  • Vue2.0 仿滴滴出行項(xiàng)目

    摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目。可是，后來(lái)在手機(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤，寫項(xiàng)目的時(shí)候沒考慮到設(shè)備問(wèn)題，簡(jiǎn)直是大大的失誤。也就是說(shuō)可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...

    ShevaKuilin 評(píng)論0 收藏0

  • js設(shè)計(jì)模式--策略模式

    摘要：將不變的部分和變化的部分隔開是每個(gè)設(shè)計(jì)模式的主題，策略模式也不例外，策略模式的目的就是將算法的使用與算法的實(shí)現(xiàn)分離開來(lái)。 前言 本系列文章主要根據(jù)《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》整理而來(lái)，其中會(huì)加入了一些自己的思考。希望對(duì)大家有所幫助。 文章系列 js設(shè)計(jì)模式--單例模式 js設(shè)計(jì)模式--策略模式 js設(shè)計(jì)模式--代理模式 概念 策略模式的定義是:定義一系列的算法，把它們一個(gè)...

    bigdevil_s 評(píng)論0 收藏0

  • 學(xué)不動(dòng)了，來(lái)點(diǎn)有趣的吧

    摘要：學(xué)不動(dòng)了，那就來(lái)點(diǎn)有趣的本著折騰的性格，一直想寫一個(gè)完全由我個(gè)人完成的動(dòng)畫，終于在前段時(shí)間完成了的重寫，并完善了，先看看動(dòng)畫效果如何可以在這里查看不同動(dòng)畫組合成的效果，也可以在上查看具體的代碼編寫。 前言 這不 webpack 又升級(jí)了。。。 前端的發(fā)展可謂是異常的迅速，各大框架層出不窮，每當(dāng)有新框架出現(xiàn)，或是老框架升級(jí)，評(píng)論區(qū)總是哀嚎遍野，學(xué)不動(dòng)了，真的學(xué)不動(dòng)了。 學(xué)不動(dòng)了，那就來(lái)點(diǎn)...

    FrozenMap 評(píng)論0 收藏0

  • 學(xué)不動(dòng)了，來(lái)點(diǎn)有趣的吧

    摘要：學(xué)不動(dòng)了，那就來(lái)點(diǎn)有趣的本著折騰的性格，一直想寫一個(gè)完全由我個(gè)人完成的動(dòng)畫，終于在前段時(shí)間完成了的重寫，并完善了，先看看動(dòng)畫效果如何可以在這里查看不同動(dòng)畫組合成的效果，也可以在上查看具體的代碼編寫。 前言 這不 webpack 又升級(jí)了。。。 前端的發(fā)展可謂是異常的迅速，各大框架層出不窮，每當(dāng)有新框架出現(xiàn)，或是老框架升級(jí)，評(píng)論區(qū)總是哀嚎遍野，學(xué)不動(dòng)了，真的學(xué)不動(dòng)了。 學(xué)不動(dòng)了，那就來(lái)點(diǎn)...

    yexiaobai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<