Introduction détaillée à l'implémentation d'animations JavaScript

Avant-propos

De nos jours, de nombreuses pages ont des effets d'animation. Des effets d'animation appropriés peuvent améliorer la beauté de la page dans une certaine mesure, et des animations avec des effets d'invite peuvent améliorer la convivialité de la page.

Il existe deux manières d'implémenter l'animation de page. L'une consiste à exploiter indirectement les styles CSS en exécutant JavaScript et à mettre à jour à chaque période de temps ; l'autre consiste à définir l'animation directement via CSS. La deuxième méthode a été largement adoptée après la maturation de CSS3. Dans cet article, nous discutons des principes et de la mise en œuvre de la première méthode.

Principe de mise en œuvre de l'animation JavaScript

Tout d'abord, nous devons connaître deux concepts importants, le processus de temps d'animation et le processus d'effet d'animation.

Le processus temporel d'animation fait référence à l'achèvement de l'animation en termes de temps, qui est un nombre compris entre [0, 1]. Supposons que l'animation commence à

horodatage et se termine à t1, et que l'horodatage actuel est t2, alors la progression temporelle actuelle de l'animation est t. Si vous ne parvenez pas à le comprendre, je vous suggère de le dessiner avec un stylo et du papier. Comprendre ce concept est crucial pour comprendre cet article. (t-t1)/(t2-t1)

Le processus d'effet d'animation fait référence à l'incrément actuel de l'attribut

valeur animé. Supposons que nous souhaitions modifier l'attribut CSS <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a> du L'élément de #el est remplacé par <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>, et actuellement il est devenu 100px, donc le processus d'effet actuel de l'animation est 200px. 130px130px - 100px = 30pxSupposons que le processus de temps d'animation et le processus d'effet d'animation soient linéaires. Donc, si vous connaissez le processus de temps d'animation, vous pouvez certainement obtenir le processus d'effet d'animation.

Selon cette explication, on peut programmer rapidement une animation linéaire.

JSBin

(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
    )

easing

Souvent, l'animation dont nous avons besoin n'est pas linéaire. Ce qu'on appelle la non-linéarité, intuitivement parlant, signifie que la vitesse d'animation change avec le temps. Alors comment implémenter une animation à vitesse variable ?

Comme mentionné ci-dessus, nous savons que contrôler le processus temporel de l'animation équivaut à contrôler le processus d'effet de l'animation. Au fur et à mesure que le temps avance dans le monde réel, la progression temporelle de l'animation suivra, contrôlant ainsi la progression des effets de l'animation. Ensuite, nous pouvons contrôler le processus d'animation en modifiant la relation de mappage entre le processus temporel du monde réel et le processus temporel d'animation. Si vous êtes confus, cela n'a pas d'importance, veuillez jeter un œil à l'image ci-dessous :

Il s'agit de la relation cartographique entre le processus temporel du monde réel et l'animation processus en animation linéaire. Ensuite, on la transforme

Cette courbe est en fait l'image de la

fonction

. On constate que le domaine de définition et la plage de valeurs des deux courbes n'ont pas changé. La pente de la courbe est la vitesse de l'animation. Ensuite, nous superposons les deux images à des fins de comparaison. y = x * x

Lorsque l'heure du monde réel atteint

, le processus d'animation devrait initialement se dérouler jusqu'à

, mais après la transformation, il ne passe qu'à x0. En fin de compte, tous les fleuves retournent à la mer et les deux lignes se rejoignent au point (1, 1). Ici, y0 est la y1 fonction d'assouplissement y = x * x. Modifions l'exemple ci-dessus pour rendre l'animation non linéaire.

JSBin

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");
    }

On peut voir une telle fonction dans le code de

jQuery

.

Par conséquent, vous pouvez ajouter la fonction d'assouplissement à jQuery.easing pour que jQuery prenne en charge la nouvelle méthode de contrôle du taux d'animation. Notez que le domaine et la plage de valeurs de la fonction d'assouplissement doivent être [0, 1].

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

Résumé

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

L'animation JavaScript exécute essentiellement l'animation en exploitant CSS. La progression temporelle de l'animation peut déterminer la progression des effets de l'animation. En manipulant la relation entre le cours temporel du monde réel et le cours temporel de l'animation, nous pouvons transformer l'animation linéaire en animation non linéaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!