requestanimationframe
function animateFunction()
{
//animate stuff
window.requestAnimationFrame(animateFunction);
}
window.requestAnimationFrame(animateFunction);requestanimationframe
function animateFunction()
{
//animate stuff
window.requestAnimationFrame(animateFunction);
}
window.requestAnimationFrame(animateFunction);requestAnimationframe
const 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);requestanimationframe js
/* 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 */Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
