Verbesserung des UI-Animations-Workflows mit Velocity.js

Der folgende Beitrag wurde von Julian Shapiro verfasst. Julian hat kürzlich Velocity.js veröffentlicht, einen performanteren Ersatz für jQuerys .animate(). Er hat kürzlich darüber geschrieben, wie JavaScript-Animationen so schnell sein können, auf dem Blog von David Walsh, ein Thema, das wir hier ebenfalls behandelt haben. In diesem Artikel stellt Julian Velocity.js selbst vor.

Velocity.js ist ein jQuery-Plugin, das die $.animate()-Funktion von jQuery neu implementiert, um eine deutlich höhere Leistung zu erzielen (wodurch Velocity in vielen Fällen auch schneller als CSS-Übergänge ist) und gleichzeitig mehrere neue Funktionen zur Verbesserung des Animations-Workflows bietet.

Mit nur 7 KB (gezippt) enthält Velocity alle Funktionen von $.animate() und packt zusätzlich noch Transform-Animationen, Schleifen, Klassen-Animationen und Scrolling hinein. Kurz gesagt, Velocity ist darauf ausgelegt, das Beste von jQuery, jQuery UI und CSS-Übergängen zu vereinen.

Velocity funktioniert überall – bis zurück zu IE8 und Android 2.3. Da die Syntax von Velocity mit der von $.animate() identisch ist, muss kein Code Ihrer Seite geändert werden.

Das Ziel von Velocity ist es, ein Vorreiter in Sachen DOM-Animationsleistung und Benutzerfreundlichkeit zu sein. Dieser Artikel konzentriert sich auf Letzteres. Um mehr über Ersteres zu erfahren, konsultieren Sie bitte die Leistungsvergleiche von Velocity auf VelocityJS.org. Insbesondere demonstriert dieser Artikel, wie Velocity zur Verbesserung Ihres UI-Animations-Workflows eingesetzt werden kann. In einem prägnanten Showdown werden acht Funktionen von Velocity mit ihren jQuery-Entsprechungen verglichen.

Wenn Sie der Meinung sind, dass Ihr aktueller UI-Workflow unübersichtlich, schlecht segregiert oder zu stark auf die breite Palette von Stilfunktionen von jQuery angewiesen ist, dann ist dieser Leitfaden für Sie.

Kurzer Überblick

Bevor wir uns in Velocity vertiefen, lassen Sie uns kurz die Grundlagen klären: Es ist anzumerken, dass sowohl $.animate() als auch $.velocity() eine flexible Optionssyntax unterstützen. Sie können Optionen als durch Kommas getrennte Werte übergeben oder ein eigenständiges Options-Objekt übergeben.

Hier ist ein Beispiel für die durch Kommas getrennte Syntax, bei der eine Ganzzahl als Dauer der Animation behandelt wird, ein String als Art der Animationseffekte (Easing) und eine Funktion als Callback (der nach Abschluss der Animation ausgelöst wird).

$div.animate(
  { 
    opacity: 1 
  }, 
  1000, 
  "linear", 
  function() { 
    alert("Done animating."); 
  }
);

Als Nächstes folgt ein Beispiel für die Objekt-Syntax.

$div.animate(
  { 
    opacity: 1 
  }, 
  { 
    duration: 1000, 
    easing: "linear", 
    complete: function() { 
      alert("Done animating!") 
    }, 
    queue: "myQueue" 
  }
);

Neben saubererem Code bietet die Verwendung des Options-Objekts Zugriff auf zusätzliche Animationsparameter, die über die durch Kommas getrennte Syntax nicht spezifiziert werden können.

Ein Beispiel für eine solche Option, die von jQuery bereitgestellt wird, ist "queue". Velocity bietet ebenfalls die Queue-Option, und mehrere auf ein einziges Element angewendete Animationsaufrufe werden automatisch hintereinander in die Warteschlange gestellt.

Hier wird die Opazität eines Divs auf 1 für 1000 ms animiert und dann in den nächsten 1000 ms wieder auf 0 zurückgeführt.

$div
  .animate({ opacity: 1 }, 1000)
  .animate({ opacity: 0 }, 1000);

Nachdem die Grundlagen geklärt sind, beginnen wir nun mit dem Vergleich von Velocity mit jQuery.

Umkehren

Anstelle einer Eigenschaften-Map akzeptiert Velocity auch "reverse" als ersten Parameter. Reverse animiert das Ziel-Element zu seinen Werten vor dem vorherigen Velocity-Aufruf.

In jQuery wäre das so:

$div
  /* Fade an element in while sliding it into view. */
  .animate({ opacity: 1, top: "50%" })
  /* The values below are what we originally set the element to in our stylesheet. Animate back to them. */ 
  .animate({ opacity: 0, top: "-25%" });

In Velocity ist es einfacher, da es nicht nur weniger Code ist, sondern Sie auch keine Werte aus Ihrer Stylesheet wiederholen müssen.

$div
  .velocity({ opacity: 1, top: "50%" })
  .velocity("reverse");

Standardmäßig verwendet der Reverse-Befehl von Velocity dieselben Optionen, die in den vorherigen Velocity-Aufruf übergeben wurden. Diese Optionen können durch Übergabe neuer Optionen in den "reverse"-Aufruf erweitert werden. Zum Beispiel:

$div
  .velocity({ opacity: 1, top: "50%" }, 1000)
  /* Animate back to the prior visual state at half the duration of the previous animation. */
  .velocity("reverse", 500);

Scrolling

Eine beliebte UI-Technik ist es, den Browser so zu scrollen, dass er mit einem Element weiter unten auf der Seite ausgerichtet ist, und dann dieses Element mit aufmerksamkeitsstarken Effekten zu animieren. Dies mit jQuery umzusetzen, erfordert unübersichtlichen, nicht performanten Code.

In jQuery erfordert die Animation der scrollTop-Eigenschaft, dass Sie sowohl das html-Element als auch das body-Element ansprechen, damit die Animation in älteren Versionen von Internet Explorer funktioniert.

$("html, body").animate(
  { 
    scrollTop: $div.offset().top 
  }, 
  1000, 
  function() {
    /* We use a callback to fade in the div once the browser has completed scrolling. */
    $div.animate({ opacity: 1 });
  }
);

In Velocity sprechen Sie das Element an, zu dem gescrollt werden soll.

$div
  .velocity("scroll", 1000)
  .velocity({ opacity: 1 });

Genau wie beim "reverse"-Befehl von Velocity kann "scroll" als erster Parameter von Velocity anstelle einer Eigenschaften-Map übergeben werden. Wie der Reverse-Befehl akzeptiert auch der Scroll-Befehl Animationsoptionen und kann an andere Aufrufe angehängt werden.

Das Verhalten des Scroll-Befehls ist unkompliziert: Scrollen Sie den Browser zum oberen Rand des Elements, auf das sich der Velocity-Aufruf bezieht.

Schleifen

Oft muss eine Animation eines Elements wiederholt werden. Beispiele hierfür sind das Schütteln einer Dialogbox, um ungültige Benutzereingaben anzuzeigen, oder das Aufleuchten eines Benachrichtigungs-Icons, um die Aufmerksamkeit des Benutzers zu erregen.

In jQuery bedeutet die Wiederholung einer Animation, dass Sie Ihre Animationslogik durcheinanderbringen, indem Sie Teile davon in eine for-Anweisung aufteilen.

for (var i = 0; i < 5; i++) {
  $div
    /* Slide the element up by 100px. */
    .animate({ top: -100 })
    /* Then animate back to the original value. */
    .animate({ top: 0 });
}

In Velocity setzen Sie einfach die Loop-Option auf eine Ganzzahl, die der gewünschten Anzahl von Schleifenzyklen entspricht. Ein einzelner Schleifenzyklus besteht darin, zu den Werten in der Eigenschaften-Map zu animieren und dann zu den ursprünglichen Werten zurückzukehren.

$div.velocity(
  { top: -100 }, 
  { loop: 5 }
);

Elemente ausblenden

Oft werden Sie ein Element einblenden, dessen Anzeige-Eigenschaft ursprünglich auf none gesetzt war, sodass das Element beim Laden der Seite nicht sofort sichtbar war. Das anschließende Einblenden dieser Elemente erfordert mehrere Zeilen jQuery.

$div
  /* Use jQuery's $.show() function to make the element visible by switching its display property to "block"/"inline" as appropriate. */
  .show()
  /* Set the element's starting opacity to 0 so that it can be gradually faded in by the subsequent animation call. */
  .css("opacity", 0)
  /* Fade in and slide into view. */
  .animate({ 
    opacity: 1, 
    top: "50%" 
  });

In Velocity übergeben Sie einfach display als Option. Die display-Option akzeptiert denselben Satz von Werten wie ihr CSS-Eigenschafts-Gegenstück (z. B. "block", "inline" und "none").

$div.velocity(
  { 
    opacity: 1, 
    top: "50%" 
  },
  { 
    display: "block" 
  }
);

Wenn die display-Option auf einen anderen Wert als none gesetzt ist, wird die display-Eigenschaft des Elements zu Beginn der Animation auf den angegebenen Wert gesetzt. Umgekehrt wird bei Übergabe von none an display die display-Eigenschaft am Ende der Animation gesetzt.

$div
  /* Fade out and slide out of view. */
  .animate({ opacity: 0, top: "-50%" })
  /* Then set the display property to "none" via a queued $.fadeOut() call. */
  .fadeOut(1);

$div.velocity(
  { 
    opacity: 0,
    top: "-50%" 
  }, 
  { 
    display: "none" 
  }
);

Wenn außerdem die opacity eines Elements zu einem Wert ungleich Null animiert wird, während seine display-Option auf einen Wert ungleich none gesetzt ist, setzt Velocity die Start-opacity-Wert praktisch auf 0.

Verzögerung

Velocity akzeptiert eine delay-Option, die das Einfügen von $.delay()-Aufrufen in Ihren Animationscode überflüssig macht.

$div
  .delay(1000)
  .animate({ 
    opacity: 1 
  });

$div.velocity(
  { 
    opacity: 1 
  }, 
  { 
    delay: 1000 
  }
);

Neben der Konsolidierung der Animationslogik in einem einzigen Aufruf ermöglicht die Verwendung der integrierten Verzögerungsoption von Velocity, dass Velocity verkettete Animationen optimieren kann, indem Werte zwischen ihnen zwischengespeichert werden.

Sequenzen

Eine für Velocity einzigartige Funktion sind Sequenzen, die Makros für Animationen sind: Eine Animationssequenz wird einmal erstellt und kann dann bei Bedarf auf Elemente auf allen Ihren Seiten ausgelöst werden.

Die Vorteile von Sequenzen umfassen:

• Benennung Ihrer Animationen für eine bessere Codeorganisation.
• Trennung der UI-Animationslogik von der UI-Interaktionslogik.
• Paketierung von Animationen zur gemeinsamen Nutzung über Ihre Projekte und mit anderen Entwicklern.

Sequenzen werden durch Erweiterung des $.Velocity.Sequences-Objekts erstellt. Sie werden danach ausgelöst, indem der Name der Sequenz als erster Argument von Velocity übergeben wird.

Unten sehen Sie eine einfache "Hover"-Sequenz.

$.Velocity.Sequences.hover = function (element, options) {
  var duration = options.duration || 750;

  $.Velocity.animate(element,
    { 
      translateY: "-=10px",
    }, { 
      /* Delay is relative to user-adjustable duration. */
      delay: duration * 0.033,
      duration: duration,
      loop: 3,
      easing: "easeInOutSine"
    });
};

Jetzt können Sie sie auf ein Element anwenden.

$div.velocity("hover");

In der obigen Sequenz wird das Element dreimal um 10px nach oben und dann wieder nach unten verschoben (loop: 3) mit einer kurzen Zwischenverzögerung.

Um mehr über die Nuancen von Sequenzen zu erfahren, lesen Sie die Dokumentation dazu.

Velocity verwendet seine eigene Sequenzfunktion, um vordefinierte fadeIn-, fadeOut-, slideUp- und slideDown-Funktionen vorzupacken (die identisch mit ihren jQuery-Entsprechungen sind).

Zum Beispiel: Ein Container-Div per Slide-Effekt nach unten einblenden.

$div.velocity("slideDown", function() {
  /* Then fade in its children over a duration of 1000ms. */
  $children.velocity("fadeIn", 1000);
});

Erzwungene Hardware-Beschleunigung

Das Erzwingen der Hardware-Beschleunigung (HA) für ein Element ist eine einfache Möglichkeit, die Animationsleistung auf mobilen Geräten dramatisch zu verbessern. Die Aktivierung von HA wird traditionell durch Setzen der Transform-Eigenschaft eines Elements auf translateZ(0) erreicht.

$div
  .css("transform", "translateZ(0)")
  .animate({ opacity: 1 })
  .css("transform", "none");

In Velocity wird HA auf mobilen Geräten automatisch angewendet (auf Desktops gibt es keinen Leistungsvorteil). Velocitys Kontrolle über HA ist hoch optimiert.

$div.velocity({ opacity: 1 });

Zusammenfassend

Der Zweck dieses Leitfadens war es, die Konsolidierung der Animationslogik in Ihrem Code durch Velocity zu demonstrieren. Kurz gesagt, Velocity ist ein ausdrucksstarkes und effizientes Werkzeug zur Erstellung von UI-Animationen.

Obwohl jQuery außerordentlich leistungsfähig ist, war es nie das Designziel von jQuery, als optimierte Animationsmaschine zu fungieren, und leidet entsprechend unter weniger als idealer Leistung und Arbeitsabläufen. Mit nur 7 KB im gezippten Zustand packt Velocity genügend Funktionen und Geschwindigkeitsgewinne, damit Sie es als Ihre bevorzugte Animationsmaschine in Betracht ziehen können.

Um die restlichen Funktionen von Velocity, einschließlich Farb- und Transformationsanimationen, zu erkunden, sehen Sie sich die Dokumentation von Velocity unter VelocityJS.org an.

Bevor wir zum Abschluss kommen, hier sind einige extreme Beispiele für Web-Animationen, die durch die Ausdrucksstärke und Geschwindigkeit von Velocity ermöglicht werden.

• 3D-Demo
• Demo einer virtuellen Welt
• HUD-Demo
• Multimedia-Demo