課程
/前端開發(fā)
/JavaScript
/原生 JS 實現(xiàn)幀動畫庫
enterFrame(success, time)中的time值具體是多少,也沒有設(shè)置,怎么知道它的值,然后ratio的值也不知道啊
2017-03-09
源自:原生 JS 實現(xiàn)幀動畫庫 3-2
正在回答
time 就是這幀動畫開始到現(xiàn)在所經(jīng)時間
ratio 當(dāng)前時間除以間隔,也就是執(zhí)行了第幾個
具體這個time他在什么地方呢?
它是在timeline里面是這個方法
Timeline.prototype.onenterframe?=?function?(time)?{???? };
這個方法只是一個接口,主要就是傳遞time這一個值
那么樓主所問的圖中哪個地方調(diào)用了上面這個方法呢?
我把圖中的run方法貼出來
function?run()?{???? var?interval?=?50;???? var?speed?=?6;???? var?initLeft?=?100;???? var?finalLeft?=?400;???? var?frame?=?4;???? var?frameLength?=?6;???? var?right?=?true;???? var?runAnimation?=?animation().loadImage(images).enterFrame(function?(success,?time)?{???? var?ratio?=?(time)?/?interval;???? var?position;???? var?left;???? if?(right)?{???? position?=?rightRunningMap[frame].split('?');???? left?=?Math.min(initLeft?+?speed?*?ratio,?finalLeft);???? if?(left?===?finalLeft)?{???? right?=?false;???? frame?=?4;???? success();???? return;???? }???? }?else?{???? position?=?leftRunningMap[frame].split('?');???? left?=?Math.max(finalLeft?-?speed?*?ratio,?initLeft);???? if?(left?===?initLeft)?{???? right?=?true;???? frame?=?4;???? success();???? return;???? }???? }???? if?(++frame?===?frameLength)?{???? frame?=?0;???? }???? $rabbit2.style.backgroundImage?=?'url('?+?images[0]?+?')';???? $rabbit2.style.backgroundPosition?=?position[0]?+?'px?'?+?position[1]?+?'px';???? $rabbit2.style.left?=?left?+?'px';???? }).repeat(1).wait(1000).changePosition($rabbit2,?rabbitWinMap,?images[2]).then(function?()?{???? console.log('finish');???? });???? runAnimation.start(interval);???? }
方法的最后一行 ?runAnimation.start(interval);
這里調(diào)用了timeline里面的start方法
start方法里面調(diào)用了startTimeline這個方法(源碼自己找)
startTimeline里面就有調(diào)用了onenterframe 這個方法
這樣一步步找下來,就知道這個time是什么了
如果樓主還是不死心的說想知道time的具體值
可以先把程序?qū)懲?,弄到Google瀏覽器上運行,按F12進(jìn)入開發(fā)者模式,一幀一幀的跑,這個time的值就會一幀一幀的變,這就是time的具體值(滑稽)
舉報
了解如何用原生JS實現(xiàn)酷炫的幀動畫,吸引他她的注意
1 回答缺少對象-在IE7 IE8中
2 回答me = this; 引用傳遞還是值傳遞?
1 回答幀動畫素材定位數(shù)組的獲取工具
2 回答用什么工具可以獲得圖片上某個兔子的坐標(biāo)呢
2 回答將images中每一項images[key]都做修改的意義是什么呢?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-03-24
time 就是這幀動畫開始到現(xiàn)在所經(jīng)時間
ratio 當(dāng)前時間除以間隔,也就是執(zhí)行了第幾個
具體這個time他在什么地方呢?
它是在timeline里面是這個方法
這個方法只是一個接口,主要就是傳遞time這一個值
那么樓主所問的圖中哪個地方調(diào)用了上面這個方法呢?
我把圖中的run方法貼出來
方法的最后一行 ?runAnimation.start(interval);
這里調(diào)用了timeline里面的start方法
start方法里面調(diào)用了startTimeline這個方法(源碼自己找)
startTimeline里面就有調(diào)用了onenterframe 這個方法
這樣一步步找下來,就知道這個time是什么了
如果樓主還是不死心的說想知道time的具體值
可以先把程序?qū)懲?,弄到Google瀏覽器上運行,按F12進(jìn)入開發(fā)者模式,一幀一幀的跑,這個time的值就會一幀一幀的變,這就是time的具體值(滑稽)