JavaScript運(yùn)動框架 鏈?zhǔn)竭\(yùn)動到完美運(yùn)動(五)
基于前幾篇的運(yùn)動框架基礎(chǔ),本文主要講解一下鏈?zhǔn)竭\(yùn)動,就是運(yùn)動完后接著再運(yùn)動,比如很多網(wǎng)站中,一個方框的出現(xiàn)和退出:出現(xiàn)時先變寬再變高,退出時先變矮再變窄退出!
之前的模型是:
startMove(obj, json);
現(xiàn)在改為:
startMove(obj, json, fn);
也就是在第一次運(yùn)動結(jié)束的時候執(zhí)行fn(); fn是傳過來的一個參數(shù),這個參數(shù)是個函數(shù),定時器清理之后手動運(yùn)行fn();如果想采用鏈?zhǔn)竭\(yùn)動,那就是在fn中再調(diào)用startMove(obj, json, fn),再在里面的fn中調(diào)用startMove(obj, json, fn),可以一直玩下去
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>運(yùn)動框架(五):鏈?zhǔn)竭\(yùn)動到完美運(yùn)動</title> <style type="text/css"> div { width: 100px; height: 100px; background: orange; margin: 10px; float: left; } </style> </head> <body> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { startMove(oDiv, {width:300,opacity:30}, function() { startMove(oDiv, {height:500}); }); }; oDiv.onmouseout = function() { startMove(oDiv, {height:100}, function() { startMove(oDiv, {width:100,opacity:100}); }) }; 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); } </script> </body> </html>
最后提取出來的完美運(yùn)動框架如下,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); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動
- Js實(shí)現(xiàn)簡單的小球運(yùn)動特效
- js運(yùn)動動畫的八個知識點(diǎn)
- javascript實(shí)現(xiàn)10個球隨機(jī)運(yùn)動、碰撞實(shí)例詳解
- JS實(shí)現(xiàn)勻速運(yùn)動的代碼實(shí)例
- 使用JavaScript 實(shí)現(xiàn)對象 勻速/變速運(yùn)動的方法
- js實(shí)現(xiàn)緩沖運(yùn)動效果的方法
- JavaScript中的勻速運(yùn)動和變速(緩沖)運(yùn)動詳細(xì)介紹
- Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動效果示例
- javascript動畫之圓形運(yùn)動,環(huán)繞鼠標(biāo)運(yùn)動作小球
- Javascript模擬加速運(yùn)動與減速運(yùn)動代碼分享
- JS運(yùn)動特效之鏈?zhǔn)竭\(yùn)動分析
相關(guān)文章
JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求
當(dāng)我們在開發(fā)時遇到需要同時發(fā)起百條接口請求怎么辦呢,本文主要來和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請求,需要的可以參考下2024-03-03JavaScript判斷是否為數(shù)字的4種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實(shí)現(xiàn)代碼及運(yùn)行效率效果圖,方便大家選擇使用,需要的朋友可以參考下2015-04-04Jquery調(diào)用iframe父頁面中的元素及方法
對于javascript操作iframe父級頁面元素的方法,大家應(yīng)該都非常清楚了,下面結(jié)合當(dāng)前非常流行的jquery分享一下如何使用jquery查找和操作iframe父級頁面元素的實(shí)現(xiàn)代碼。2016-08-08js實(shí)現(xiàn)跨域的4種實(shí)用方法原理分析
這篇文章主要分析了js實(shí)現(xiàn)跨域的4種實(shí)用方法原理,主要是使用jsonp跨域,使用window.name來進(jìn)行跨域,對這方面感興趣的朋友可以參考一下2015-10-10JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件的方法
這篇文章主要介紹了如何在?JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件,本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09