這篇文章主要介紹了JavaScript運動框架的第五部分,鍊式運動到完美運動,具有一定的參考價值,感興趣的小伙伴們可以參考一下
基於前幾篇的運動框架基礎,本文主要講解一下鍊式運動,就是運動完後接著再運動,比如很多網站中,一個方框的出現和退出:出現時先變寬再變高,退出時先變矮再變窄退出!
之前的模型是:
startMove(obj,json);
現在改為:
startMove(obj, json, fn);
也就是在第一次運動結束的時候執行fn(); fn是傳過來的一個參數,這個參數是個函數,計時器清理之後手動運行fn();如果想採用鍊式運動,那就是在fn中再呼叫startMove (obj, json, fn),再在裡面的fn中呼叫startMove(obj, json, fn),可以一直玩下去
运动框架(五):链式运动到完美运动
最後提取出來的完美運動框架如下,motionFrame.js:
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } function startMove(obj, json, fn) { 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); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30); }
以上是JavaScript運動框架之鍊式運動到完美運動的範例程式碼(五)的詳細內容。更多資訊請關注PHP中文網其他相關文章!