How to Throttle requestAnimationFrame to a Specific Frame Rate?

Throttling requestAnimationFrame to a Specific Frame Rate

requestAnimationFrame has become the preferred method for animations due to its smoothness and optimization. However, there are situations where controlling the animation speed is desired. This article addresses how to throttle requestAnimationFrame to a specific frame rate, ensuring consistent animation speed regardless of device performance.

One approach to throttling is by calculating the elapsed time since the last frame loop and only drawing when the specified FPS interval has elapsed. This method involves setting variables to track time intervals.

<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds
var then = Date.now(); // Start time of the current animation loop</code>

The animation loop is implemented using requestAnimationFrame and continuously called. Within the loop, the time elapsed since the last loop is calculated, and drawing is performed only when the specified FPS interval has passed.

<code class="javascript">function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals
        // Put your drawing code here
    }
}</code>

By using this throttling technique, the drawing code is executed at the specified FPS, providing consistent animation speed even on devices with varying performance capabilities.

The above is the detailed content of How to Throttle requestAnimationFrame to a Specific Frame Rate?. For more information, please follow other related articles on the PHP Chinese website!