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.

JavaScript-Animationsimplementierungsprinzip

Zunächst müssen wir zwei wichtige Konzepte kennen: den Animationszeitprozess und den Animationseffektprozess.

Der Animationszeitprozess bezieht sich auf den Abschluss der Animation in Bezug auf die Zeit, die eine Zahl zwischen [0, 1] ist. Angenommen, die Animation beginnt bei

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)

Der Animationseffektprozess bezieht sich auf die aktuelle Erhöhung des

Attributs Werts , der animiert wird. Angenommen, wir möchten das CSS-Attribut <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a> des Element von ändert sich zu #el, und derzeit hat es sich zu <a href="http://www.php.cn/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
    )

Erleichterung

Oft ist die Animation, die wir brauchen, nicht linear. Die sogenannte Nichtlinearität bedeutet intuitiv, dass sich die Animationsgeschwindigkeit mit der Zeit ändert. Wie implementiert man also eine Animation mit variabler Geschwindigkeit?

Wie oben erwähnt, wissen wir, dass die Steuerung des Zeitprozesses der Animation gleichbedeutend mit der Steuerung des Effektprozesses der Animation ist. Während die Zeit in der realen Welt fortschreitet, folgt der Zeitfortschritt der Animation und steuert so den Effektfortschritt der Animation. Dann können wir den Animationsprozess steuern, indem wir die Zuordnungsbeziehung zwischen dem realen Zeitprozess und dem Animationszeitprozess ändern. Wenn Sie verwirrt sind, spielt es keine Rolle, schauen Sie sich bitte das Bild unten an:

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

fortfahren, nach der Transformation geht er jedoch nur 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");
    }

Eine solche Funktion können wir im Code von

jQuery

sehen.

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 ... }

JavaScript-Animationen führen Animationen im Wesentlichen durch die Bedienung von CSS aus. Der zeitliche Verlauf der Animation kann den Effektverlauf der Animation bestimmen. Indem wir die Beziehung zwischen dem Zeitverlauf der realen Welt und dem Zeitverlauf der Animation manipulieren, können wir lineare Animationen in nichtlineare Animationen umwandeln.

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!