Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS: Time-based animation pattern
// Full Blog Post: http://viget.com/extend/time-based-animation
// requestAnimationFrame() polyfill: https://gist.github.com/1579671
window.APP = window.APP || {};
APP.pause = function() {
window.cancelAnimationFrame(APP.core.animationFrame);
};
APP.play = function() {
APP.core.then = Date.now();
APP.core.frame();
};
APP.core = {
frame: function() {
APP.core.setDelta();
APP.core.update();
APP.core.render();
APP.core.animationFrame = window.requestAnimationFrame(APP.core.frame);
},
setDelta: function() {
APP.core.now = Date.now();
APP.core.delta = (APP.core.now - APP.core.then) / 1000; // seconds since last frame
APP.core.then = APP.core.now;
},
update: function() {
// Render updates to browser (draw to canvas, update css, etc.)
},
render: function() {
// Update values
// var distance = 100 * APP._delta;
// APP.thing.x += 100 * APP._delta;
}
};
APP.play();
@Orlandohub

This comment has been minimized.

Copy link

Orlandohub commented Apr 19, 2017

Hey man, I know you done this a while back but just to let you know it helped me ;)

By the way this bit of code:

update: function() {
	// Render updates to browser (draw to canvas, update css, etc.)
},

render: function() {
	// Update values
	// var distance = 100 * APP._delta;
	// APP.thing.x += 100 * APP._delta;
}

I think the comments are swapped...

Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.