Simple Animations Using requestAnimationFrame

Core points

• requestAnimationFrame is a helper function that is used to write animations synchronized with the browser's drawing cycle, thereby achieving smoother and more CPU-saving animation effects. It is supported by all modern browsers and is compatible with older browsers.
• The requestAnimationFrame functions created using animate can be designed to accept a series of functions as parameters, which are called in sequence, thereby implementing an animation sequence. This function can track the progress of the animation and calculate the end time of the animation.
• requestAnimationFrame creates animations more efficiently than setTimeout or setInterval because it works synchronously with the browser's refresh rate. It can be used with any JavaScript framework or library and can handle a variety of animations, including CSS properties, canvas animations, SVG animations, and scrolling or user interaction-based animations.

DOM element animation involves modifying the CSS style every few milliseconds to create the illusion of motion. This means passing the callback function to setTimeout and modifying the style object of the node in that callback function. Then call setTimeout again to queue up the next animation frame. requestAnimationFrame This new helper function came into being for animation. It was initially seen in Firefox 4 and has gradually been adopted by all browsers, including IE 10. Fortunately, it's easy to make it compatible with older browsers.

<code class="language-javascript">window.requestAnimationFrame(callbackFunction);</code>

Unlike setTimeout (run after a specified time delay), requestAnimationFrame runs the callback function the next time the browser draws the screen. This allows you to sync with the browser's drawing cycle so that you don't draw too often or not frequently enough, which means your animation will be very smooth and not overload the CPU.

Browser compatibility processing

Currently every browser has a prefixed version of requestAnimationFrame, so let's detect which version is supported and reference it:

<code class="language-javascript">var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");</code>

Note how we use square bracket notation to access properties on window objects. We use square bracket notation because we are dynamically building property names using string concatenation. If the browser does not support it, we will fall back to a regular function that calls setTimeout after 60 milliseconds to achieve a similar effect.

Animation function construction

Now let's build a simple function that will repeatedly call our _requestAnimationFrame to simulate the animation. To implement animation, we need an external function as an entry point and an internal function (called a step function) that will be called repeatedly.

<code class="language-javascript">window.requestAnimationFrame(callbackFunction);</code>

Every time we call the step function, we need to track the progress of the animation to know when it ends. We will calculate the time when the animation should end and calculate the progress based on the time remaining for each cycle.

<code class="language-javascript">var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");</code>

Note that we are using new Date() to get the current time in milliseconds. The plus sign casts the date object to a numeric data type. rate The variable is a number between 0 and 1, indicating the progress rate of the animation.

Anime function improvement

Now we need to consider the input and output of the function. Let's allow the function to accept the function and duration as parameters.

<code class="language-javascript">function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}</code>

We can call this function like this:

<code class="language-javascript">function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余时间少于 60 毫秒，则在此结束动画
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 执行一些动画操作
    }

    _requestAnimationFrame(step);
  }
  step();
}</code>

In the run function, I will place some code that animates the width of the node from "100px" to "300px".

<code class="language-javascript">function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 进度为 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}</code>

Improved animation function

It works fine, but what I really want is to be able to enter an array of functions that are called in sequence. This way, after the first animation is over, the second animation will begin. We will treat the array as a stack, popping items one by one at a time. Let's change the input:

<code class="language-javascript">animate({
  time: 3,  // 以秒为单位的时间
  run: function(rate) { /* 使用 rate 执行某些操作 */ }
});</code>

When the animation is first run, item is null, remaining is less than 60 milliseconds, so we pop the first item from the array and start executing it. In the last frame of the animation, remaining is also less than 60, so we complete the current animation, pop up the next item from the array and start animate the next item. Also note that I have passed the rate value through the easing formula. The values ​​from 0 to 1 now grow in a cubic proportion, making it look less stiff. To call the animation function, we do the following:

<code class="language-javascript">animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});</code>

Please note that the width of the box first expands, taking up 2 seconds, then height expands, and taking up 2 seconds.

Code optimization

Let's clean up our code a little. Please note that we call getElementById several times, which is not very good. Let's cache it and cache it while cache the start and end values.

<code class="language-javascript">function animate(list) {
  var item,
      duration,
      end = 0;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      if (item) item.run(1);  // 1 = 进度为 100%

      item = list.shift();  // 获取下一个项目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 进度为 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 缓动公式
      item.run(rate);
    }

    _requestAnimationFrame(step);
  };
  step();
}</code>

Note that we do not need to modify the main function, because the run function is always part of the self-contained object and can access all properties of the object through the this variable. Now, whenever we run the step function, we cache all the variables. That's it. A simple animation helper function that takes advantage of requestAnimationFrame and provides fallbacks for older browsers.

(The script demo part is omitted because JavaScript code cannot be run in this environment.)

(The FAQ section on using requestAnimationFrame for simple animation is also omitted, because the content is highly duplicated from the original text, and you only need to keep the core points to complete the pseudo-original.)

The above is the detailed content of Simple Animations Using requestAnimationFrame. For more information, please follow other related articles on the PHP Chinese website!