//
// version 1
//
var requestAnimFram = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequsetAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
}
})();
//version 1 usage
function main(){
//main loop
...
requestAnimFram(main);
}
main();
//
// version 2
//
var animFram = {
req: window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
},
ccl: window.cancelAnimationFrame ||
window.mozCancelAnimationFrame,
myReq: 0
};
//version 2 usage
function main(){
...
aniFram.myReq = aniFram.req(main);
}
main();
function stop(){
aniFram.ccl(myReq);
}
While I was exploring some example codes, I found requestAnimationFrame
. version 1 is carved from that and it works fine. After seaching for a while, I found cancelAnimationFrame
as well and wanted to use both of them. So I made a dummy page for test. The version 2 is carved from it.
The problem is that, it doesn't loop. So, I have two questions.
Is it impossible to use
requestAnimationFrame
in this way? If so, why exactly so?If it's possible-but I'm doing it in wrong way, how can I acheive this?