javascript完美運動

BenCHou 發布于2019-08-23 11:38 / 2839人閱讀

摘要：在這個完美運動框架中，我們可以只讓一個物體的一個屬性運動，可以鏈式調用，也可以幾個屬性同時運動。能解決我們項目中遇到的大部分運動。運動框架演變過程運動實現留言板的例子完美運動運動，高度展開發布

前面的運動，每次只能改一個值，你改div的width的時候，就不能改div的高度，改高度的時候就不能改寬度，如果我的運動想同時改寬度和高度，怎么實現？
在這里我們把屬性和目標值用json實現。
在這個完美運動框架中，我們可以只讓一個物體的一個屬性運動，可以鏈式調用，也可以幾個屬性同時運動。能解決我們項目中遇到的大部分運動。

完美運動框架代碼

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);//有可能會出現誤差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();//運動結束后，如果fnEnd參數傳遞進去了就執行fnEnd函數
      } 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)
}

用完美運動框架做一個寬高同時運動的實例



  
    完美運動

如果我們直接按照上面的方式，當我們運行下面代碼的時候

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

發現頁面是有問題的，why?

if (cur === json[attr]) {
        clearInterval(obj.timer);
        if(fnEnd)fnEnd();//運動結束后，如果fnEnd參數傳遞進去了就執行fnEnd函數
      }

我們發現width先執行完成，當一個屬性執行完成之后我們就關掉了定時器，所以沒有達到我們預期的效果。我們看看怎么解決。
我們可以判斷當所有值都達到目標點的時候在結束運動。

修改之后的運動框架如下

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;//假設：所有值都已經執行結束
    for(var attr in json){
      var cur=0;
      if(attr==="opacity"){
        cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能會出現誤差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]){//假設有沒到目的地的值我們設置為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代表值都到目的地，這時候我們才關定時器
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//運動結束后，如果fnEnd參數傳遞進去了就執行fnEnd函數
    }
  }, 30)
}

測試例子如下



  
    完美運動

到目前為止，我們可以在任何地方用我們的運動框架做運動效果。

運動框架演變過程

運動實現留言板的例子



  
    完美運動

云服務器 GPU云服務器 JavaScript緩沖運動水平運動停止運動左右運動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97241.html

JavaScript完美運動框架的進階之旅

摘要：運動框架動起來進行運動的節點定時器你沒看錯，就是那么簡單。直接在定時器內部，判斷到達目標值，清除定時器就行拉運動框架運動終止進行運動的節點運動終止條件。轉自個人博客三省吾身丶丶原來是JS動畫效果，但是我會過頭再看的時候，發現太粗略了，于是重新寫了一篇。喜歡別只收藏啊，點個推薦，大兄弟^ ^！運動框架的實現思路運動，其實就是在一段時間內改變left、right、width、hei...

Pines_Cheng 2019-08-21 10:46 評論0 收藏0
Vue2.0 仿滴滴出行項目

摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。效果預覽 showImg(h...

ShevaKuilin 2019-08-21 11:44 評論0 收藏0
js設計模式--策略模式

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

bigdevil_s 2019-08-23 14:27 評論0 收藏0
學不動了，來點有趣的吧

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

FrozenMap 2019-08-30 11:00 評論0 收藏0
學不動了，來點有趣的吧

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

yexiaobai 2019-08-23 17:50 評論0 收藏0