Detailed introduction to implementing JavaScript animations

Preface

Nowadays, many pages have some animation effects. Appropriate animation effects can improve the beauty of the page to a certain extent, and animations with prompt effects can enhance the usability of the page.

There are two ways to implement page animation. One is to indirectly operate the CSS style by operating JavaScript and update every once in a while; the other is to directly define the animation through CSS. The second method was widely adopted after CSS3 matured. In this article, we discuss the principles and implementation of the first approach.

JavaScript animation implementation principle

First of all, we need to know two important concepts, animation time process and animation effect process.

The animation time process refers to the completion of the animation in terms of time, which is a number between [0, 1]. Assume that the animation starts at

timestamp t1 and ends at t2, and the current timestamp is t, then the current time progress of the animation is (t-t1)/(t2-t1). If you can't understand it, I suggest you draw it with pen and paper. Understanding this concept is crucial to understanding this article.

The animation effect process refers to the current increment of the

attribute value being animated. Suppose we want to change the CSS left attribute of the #el<a href="http://www.php.cn/wiki/907.html" target="_blank"> element from </a>100px to 200px. It has already changed When it reaches 130px, the current effect process of the animation is 130px - 100px = 30px. Assume that the animation time process and animation effect process are both linear. So if you know the animation time process, you can definitely get the animation effect process.

According to this explanation, we can quickly write a linear animation.

(function() {
      var begin, // 开始动画的时间
        el, start, end, duration; 
      var INTERVAL = 13;

      function now() {
        return (new Date).getTime();
      }

      /**
       * 执行一步动画（更新属性）
       */
      function _animLeft() {
        var pos = (now() - begin) / duration;
        if (pos >= 1.0) {
          return false;
        }
        return !!(el.style.left = start + (end - start) * pos);
      }

      /**
       * 对一个DOM执行动画，left从_start到_end，执行时间为
       * _duration毫秒。
       * 
       * @param  {object} _el       要执行动画的DOM节点
       * @param  {integer} _start   left的起始值
       * @param  {integer} _end     left的最终值
       * @param  {integer} _duration  动画执行时间
       */
      function animLeft(_el, _start, _end, _duration) {
        stopped = false;
        begin = now();
        el = _el;
        start = _start;
        end = _end;
        duration = _duration || 1000;

        var step = function() {
          if (_animLeft()) {
            setTimeout(step, INTERVAL);
          }
        };
        setTimeout(step, 0);
      }

      window.animLeft = animLeft;
    })();

    animLeft(
      document.getElementById('el'),
      100,
      200
    )

JSBin

easing

Many times, the animation we need is not linear. The so-called nonlinearity, intuitively speaking, means that the animation speed changes with time. So how to implement variable speed animation?

As mentioned above, we know that controlling the time process of animation is equivalent to controlling the effect process of animation. As the time progresses in the real world, the time progress of the animation will follow, thereby controlling the effect progress of the animation. Then, we can control the animation process by modifying the mapping relationship between the real world time process and the animation time process. If you are confused, it doesn’t matter, please look at the picture below:

This is the mapping relationship between the real-world time process and the animation process in linear animation. Next, we transform it

This curve is actually the image of the

function

y = x * x. It can be seen that the definition domain and value range of the two curves have not changed. The slope of the curve is the speed of the animation. Next, we overlap the two pictures for comparison.

When the real world time reaches

x0

, the animation process should originally proceed to y0, after the transformation , only proceeds to y1. In the end, all rivers return to the sea, and the two lines meet at point (1, 1). Here, y = x * x is the easing function (easing function). Let’s modify the above example to make the animation non-linear.

function ease(time) {
      return time * time;
    }

    /**
     * 执行一步动画（更新属性）
     */
    function _animLeft() {
      var pos = (now() - begin) / duration;
      if (pos >= 1.0) {
        return false;
      }
      pos = ease(pos);
      return !!(el.style.left = (start + (end - start) * pos) + "px");
    }

JSBin

We can see such a function in the code of

jQuery

.

jQuery.easing = {
      linear: function( p ) {
        return p;
      },
      swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
      }
    };

Therefore, you can add the easing function to jQuery.easing to make jQuery support the new animation rate control method. Note that the domain and value range of the easing function must be [0, 1].

 jQuery.easing.myEasing = function( p ) { return ... }

Summary

JavaScript animation essentially executes animation by operating CSS. The time progression of the animation can determine the effect progression of the animation. By manipulating the relationship between the time course of the real world and the time course of the animation, we can transform linear animation into non-linear animation.

The above is the detailed content of Detailed introduction to implementing JavaScript animations. For more information, please follow other related articles on the PHP Chinese website!