javascript鏈式運動框架

booster 發布于2019-08-23 11:37 / 2832人閱讀

摘要：我們可以在運動框架的基礎上，在加上一個函數，當運動執行完成之后執行的操作。鏈式運動框架有可能會出現誤差運動結束后，如果參數傳遞進去了就執行函數鏈式運動例子我們用上面的鏈式運動框架做一個先運動調整寬度，再運動調整高度，最后運動調整透明度。

前面介紹的運動都是一個物體運動之后就結束了，如果一個物體運動之后，還有其他的操作，比如一個div先變寬，然后變高、最后變透明度，我們前面的運動框架就不滿足情況了。我們可以在運動框架的基礎上，在加上一個fnEnd函數，當運動執行完成之后執行的操作。

鏈式運動框架

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);//有可能會出現誤差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();//運動結束后，如果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)
}

鏈式運動例子

我們用上面的鏈式運動框架做一個div先運動調整寬度，再運動調整高度，最后運動調整透明度。



  
    鏈式運動

GPU云服務器云服務器 JavaScript緩沖運動 javascript框架 javascript框架分類 javascript開源框架

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

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

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

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

Pines_Cheng 2019-08-21 10:46 評論0 收藏0
jquery運動

摘要：運動做鏈式運動的時候可以使用回調函數，多寫幾個運動。然后逐一運動這些調用。默認是，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。可選參數規定是否立即完成當前動畫。清除當前運動停止滑動點擊這里，向下滑動面板在前面封裝的move.js框架，在jquery中有同樣封裝好的功能animate()。使用方法非常類似，下面我們看看animate的使用方法，有了原生的運動方法，然后再使用jq...

ThreeWords 2019-08-23 11:40 評論0 收藏0
javascript完美運動

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

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

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

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

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

xiaowugui666 2019-08-21 18:43 評論0 收藏0