16.122014

Perfomante DOM Animationen mit Velocity.js

Slide-Out Navigation Part 2

In meinem letzten Beitrag habe ich eine Implementierung einer Slide-Out Navigation mit jQuery und reinem CSS3 gezeigt. Heute zeige ich euch, wie man mit Hilfe der kleinen JavaScript Library Velocity.js die Vorzüge von javaSript und die Hardwarebeschleunigung von CSS3 vereinen könnt.

Was ist Velocity.js

Velocity.js ist ein kleines Framework, welches mittlerweile auch Stand-Alone ohne jQuery auskommt. Es dient zum Animieren von DOM-Objekten. Dabei hat sich der Entwickler das Ziel gesetzt, das Ganze so performant wie möglich umzusetzen. Velocity.js ist von Haus aus hardware beschleunigt. Mit Hilfe des sogenannten forcefeedings wird das gefürchtete Layout Thrashing (also das ständige Neuberechnen der DOM-Objekte, wie es beispielhaft bei der .animate() Funktion von jQuery vorkommt) vermieden. Dazu gibt man zu dem Zielwert auch einen Startwert an.  In unseren Fall bietet sich als Beispiel wieder "translateX" an. Doch die Syntax sieht erst einmal kryptisch aus:

$('body')
  .velocity({
    translateX: [285, 0]
  }, 400, 'easeInOut');
Wie zu erkennen ist, gibt man ein Array mit 2 bis 3 Werten an. Das Erste ist immer der Zielwert, in diesem Fall 285px. Auf das "px" können wir in diesem Fall verzichten, da Velocity Pixel als Standardwert nimmt, dann einen optionalen Wert (easing) und als letzten den Startwert. Das mit dem Startwert mag zwar redundant wirken, da wir die Werte auch in unseren Style Sheet definiert haben, bringt dies aber einen erheblichen Performace-Boost, da hier die Animation vorgepuffert ist. Kombiniert man weitere Animationen bei Velocity, darf man  diesen Startwert danach nicht mehr angeben.

Das 'reverse' Attribut

Eine weitere Besonderheit von Velocity.js ist, dass die Library sich die Animationen merkt und man mit den Parameter "reverse" die Animation rückgängig machen kann. Dabei kann man die Dauer der Animation einfach überschreiben.

$('body')
  .velocity('reverse', 200, 'snap');

Die Complete-Funktion

Zu guter Letzt kann man eine „complete"-Funktion übergeben, die als Callback fungiert, d.h., dass sobald die Animation beendet ist, diese ausgelöst wird. In diesem Beispiel lasse ich einen Log in der Console ausgeben:

$('body')
   .velocity('reverse', 200, 'snap', function() {
      console.log('Callback');
    });

Hier könnt ihr euch den kompletten Code dieses Beispiels anschauen

Fazit

Ich kann euch nur raten, die kleine Library genauer anzuschauen. Dadurch, dass sie auch nur mit Vanilla.js funktioniert, können kleine Projekte ohne den Overload von jQuery oder andere mächtige Frameworks auskommen. Ich bin wirklich von Velocity.js begeistert und freue mich, es in Projekten einzusetzen.

Lern uns kennen!