Detaillierte Einführung in die Implementierung von JavaScript-Animationen

Vorwort

Heutzutage haben viele Seiten einige Animationseffekte. Geeignete Animationseffekte können die Schönheit der Seite bis zu einem gewissen Grad verbessern, und Animationen mit sofortigen Effekten können die Benutzerfreundlichkeit der Seite verbessern.

Es gibt zwei Möglichkeiten, eine Seitenanimation zu implementieren. Eine besteht darin, CSS-Stile indirekt zu bedienen, indem JavaScript ausgeführt und regelmäßig aktualisiert wird. Die andere besteht darin, Animationen direkt über CSS zu definieren. Die zweite Methode wurde weithin übernommen, nachdem CSS3 ausgereift war. In diesem Artikel besprechen wir die Prinzipien und die Implementierung der ersten Methode.

Zeitstempel und endet bei t1 und der aktuelle Zeitstempel ist t2, dann ist der aktuelle Zeitfortschritt der Animation t. Wenn Sie es nicht verstehen können, empfehle ich Ihnen, es mit Stift und Papier zu zeichnen. Das Verständnis dieses Konzepts ist für das Verständnis dieses Artikels von entscheidender Bedeutung. (t-t1)/(t2-t1)

Attributs Werts , der animiert wird. Angenommen, wir möchten das CSS-Attribut <a href="//m.sbmmt.com/wiki/907.html" target="_blank">left</a> des Element von ändert sich zu #el, und derzeit hat es sich zu <a href="//m.sbmmt.com/wiki/907.html" target="_blank">left</a> geändert, sodass der aktuelle Effektprozess der Animation 100px ist. 200px130pxAngenommen, dass sowohl der Animationszeitprozess als auch der Animationseffektprozess linear sind. Wenn Sie also den Animationszeitprozess kennen, können Sie den Animationseffektprozess definitiv verstehen. 130px - 100px = 30px

Nach dieser Erklärung können wir schnell eine lineare Animation programmieren.

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
    )

Dies ist die Zuordnungsbeziehung zwischen dem realen Zeitprozess und dem Animationsprozess in lineare Animation. Als nächstes transformieren wir sie

Diese Kurve ist eigentlich das Bild der -Funktion

. Es ist ersichtlich, dass sich Definitionsbereich und Wertebereich der beiden Kurven nicht geändert haben. Die Steigung der Kurve ist die Geschwindigkeit der Animation. Als nächstes überlappen wir die beiden Bilder zum Vergleich. y = x * x

Wenn die reale Zeit erreicht, sollte der Animationsprozess ursprünglich mit

weiter. Am Ende fließen alle Flüsse wieder ins Meer und die beiden Linien treffen sich am Punkt (1, 1). Hier ist x0 die y0 Beschleunigungsfunktion y1. y = x * xÄndern wir das obige Beispiel, um die Animation nichtlinear zu machen.

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

jQuery

Daher können Sie die Easing-Funktion zu jQuery.easing hinzufügen, damit jQuery die neue Methode zur Steuerung der Animationsrate unterstützt. Beachten Sie, dass der Domänen- und Wertebereich der Beschleunigungsfunktion [0, 1] sein muss.

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

Zusammenfassung

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Implementierung von JavaScript-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!