function animateFunction()
{
//animate stuff
window.requestAnimationFrame(animateFunction);
}
window.requestAnimationFrame(animateFunction);/* Tells the browser that you wish to perform an animation and
requests that the browser call a specified function
to update an animation before the next repaint. */
requestAnimationFrame(() => {
// some animation-related/dependent code here
});
/* The callback function is automatically passed a timestamp
indicating the precise time requestAnimationFrame() was called at.
requestAnimationFrame() returns a non-zero integer that can be passed into
cancelAnimationFrame() to cancel a requestAnimationFrame() call */
/* Advantages over setTimeout(..., 1000/60) approach:
- The browser can optimize it, so animations will be smoother
- Animations in inactive tabs will stop, allowing the CPU to chill
- More battery-friendly */
/* Request Animation Frame By Gourav Khurana */
https://flaviocopes.com/requestanimationframe/
https://glitch.com/edit/#!/flavio-requestanimationframe-example?path=script.js%3A1%3A0
https://glitch.com/edit/#!/flavio-settimeout-animation?path=script.js%3A54%3A4const element = document.getElementById('some-element-you-want-to-animate');
let start, previousTimeStamp;
function step(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
if (previousTimeStamp !== timestamp) {
// Math.min() is used here to make sure the element stops at exactly 200px
const count = Math.min(0.1 * elapsed, 200);
element.style.transform = 'translateX(' + count + 'px)';
}
if (elapsed < 2000) { // Stop the animation after 2 seconds
previousTimeStamp = timestamp
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);