requestAnimationFrame (rAF) is the core mechanism to achieve smooth web animation, and can automatically synchronize the page refresh rhythm. Compared with setInterval, it dynamically adjusts frame rates based on page visibility and device performance, making it more efficient and resource-saving. When using it, you should: 1. Use timestamps to control the animation progress to ensure uniform speed; 2. Reduce DOM operations and give priority to CSS Transform and Opacity; 3. Control the animation complexity, allocate resources reasonably and downgrade the effects of low-end equipment. At the same time, avoid excessive synchronous calculations, pay attention to clear loops and compatibility processing, so as to make smooth H5 animations.

Web animation should be smooth, and 60 frames are the basic goal. The key to achieving this is requestAnimationFrame (rAF for short). It is not a simple timer substitute, but a set of mechanisms specially designed by the browser for animation, which can automatically match the page refresh rhythm to achieve more natural and efficient animation effects.

What is requestAnimationFrame ?

Simply put, requestAnimationFrame is an API provided by the browser to tell the browser that you want to execute an animation and request the browser to call the specified callback function before the next repaint. The benefit of this is that the browser can optimize the synchronous execution of multiple animations, avoiding unnecessary redrawing and layout jitter.

It is not as "free" as setTimeout or setInterval , but it automatically adjusts the frame rate based on whether the current page is visible, device performance, etc., so as to save resources and be smoother.

Let's give the simplest example:

 function animate() {
  // Update the animation status, modify the style or position requestAnimationFrame(animate);
}
animate();

This code will keep calling itself, forming an animation loop. The browser will execute it at a frequency of 60 times per second as much as possible (that is, 16.7ms per frame).

Why use requestAnimationFrame instead of setInterval ?

Many people will use setInterval to animation at the beginning, such as:

 setInterval(() => {
  // Animation logic}, 1000 / 60);

But there are several problems with this method:

• The browser may not be able to execute on time, especially when the page is switched to the background;
• If the animation logic execution time exceeds the set interval, it will cause "frame skipping";
• There is no coordination between multiple timers, which is prone to stuttering.

The advantages of requestAnimationFrame are:

• It will be performed before the next browser repaint, ensuring that the animation and screen refreshes are synchronized;
• When the page is not visible (such as switching tabs) it will automatically pause, saving resources;
• The browser will automatically manage multiple rAF requests to optimize rendering performance.

How to use it to make smooth H5 animations?

To make H5 animations truly "silky", just calling requestAnimationFrame is not enough, and there are several key points to pay attention to:

1. Use timestamps to control animation progress

The callback function of rAF will pass a timestamp parameter, indicating the time (in milliseconds) from the start of page loading to the current frame. Instead of relying on frame count or step value, we can use this timestamp to calculate the current state of the animation.

 let startTime = null;

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;

  // Assume that the animation duration is 1000ms
  if (elapsed < 1000) {
    const progress = elapsed / 1000;
    // Update element position or style requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

This way, even if the frame rate fluctuates, the animation can maintain a constant speed.

2. Avoid frequent operation of DOM

Rearrangement or redraw may be triggered every time the DOM is modified. If you frequently modify multiple styles in animation, it is recommended:

• Using CSS Transform or Opacity, these properties have little impact on performance;
• Batch updates styles to avoid multiple access to layout properties (such as offsetWidth);
• Use will-change or translateZ to enable hardware acceleration (but don't abuse it);

3. Control animation complexity

The H5 page is often run on mobile devices and has limited performance. If you have multiple complex animations at the same time, it is recommended:

• Animation with high priority uses rAF, while others use CSS;
• Don't over-neck animation elements;
• Degrading animation effects appropriately on low-end devices;

Frequently Asked Questions and Notes

• Don't do too much synchronous calculation in rAF : If you execute too much logic in a frame, it will cause frame drops. Complex calculations can be split into multiple frames.
• Note: Clear the animation loop : If the animation ends or the component is uninstalled, stop calling rAF, otherwise memory leaks may occur.
• Compatibility is not a big problem : modern browsers all support rAF, but if you want to support very old Android browsers, you can add a polyfill.

Basically that's it. Use requestAnimationFrame well and cooperate with reasonable animation design and performance control, the animation of H5 can also be very smooth. It is not complicated, but it is easy to ignore details, such as time control and DOM operation methods. Just pay attention to these points and you can create a more natural and efficient animation experience.

The above is the detailed content of H5 RequestAnimationFrame for Smooth Animations. For more information, please follow other related articles on the PHP Chinese website!