CSS, HTML und Javascript mit {stil}

Javascript Animationen mit Velocity.js

Velocity JS: SVG mit Javascript animieren

Auf SVG-Animationen mit SMIL können wir nicht setzen. Da bleiben noch Javascript und CSS – und natürlich jQuery, damit die Schreibarbeit nicht überhand nimmt.

Sobald man sich etwas mit jQuery und der Manipulation von DOM-Elementen auseinander gesetzt hat, sind Animationen mit jQuery so intuitiv wie eben nur jQuery sein kann.

Trotzdem ist der Ruf von Animationen mit jQuery nicht astrein: Langsam und aufwändig für mobile Geräte. Komplexe Animationen geraten schon mal ins Stottern.

Velocity.js von Julian Shapiro ist eine kleine (ca. 35 KB) Library speziell für Animationen, die auf jQuery aufsetzt, aber so schnell und leicht wie CSS ist. Und wer auf jQuery verzichten kann: Velocity.js funktioniert auch ohne jQuery mit einer leicht abgewandelten Syntax.

circle drop

Mit jQuery wäre die Syntax

$('#drop').animate (
	{ top: "70px" }, 
	{ duration: 3000 }
);

mit Velocity.js wird nur .velocity() anstelle von .animate() aufgerufen:

$('#drop').velocity (
	{ top: "70px" }, 
	{ duration: 3000 }
);

Hey, aber die beiden Animationen laufen doch nicht synchron! Stimmt. Die Animation mit jQuery auf der linken Seite animiert zwei Bilder, die Velocity-Animation einen SVG-Tropfen.

SVG animieren

SVG unterstützt die meisten CSS-Eigenschaften, aber nicht alle. SVG fill ist das Gegenstück zu color, stroke das Gegenstück zu border. SVG wird über x, y, cx und cy positioniert, top, left, right und bottom gibt es nicht. Anstelle dessen versetzt SVG transform ein Element in x/y-Richtung und skaliert und rotiert Elemente und Gruppen.

Weder jQuery noch CSS Transitions unterstützen die Animation von SVG-Attributen für die Positionierung und Größe (x, y, transform, width, height). CSS transition animiert SVG-Elemente in IE überhaupt nicht, und transform auch nicht in den jüngeren Versionen von IE / Edge.

Velocity.js animert SVG-Elemente mit transformX und transformY (also über CSS) in allen Browser … einschließlich IE. translateX und translateY mit Velocity.js funktioniert zwar in IE, aber nicht mehr in Edge.

Velocity.js ohne jQuery

Wenn jQuery nicht sowieso schon eingebunden ist, funktioniert Velocity auch ohne jQuery. Die Syntax ändert sich dann leicht – alles shiftet um einen Platz nach links und das animierte Element ist das erste Argument im Aufruf von Velocity.

var drop = document.getElementById('drop');

// $('#drop').velocity ( { top: "70px" }, { duration: 3000 } );

   Velocity ( drop, { top: "70px" }, {duration: 3000 } );

Brauche ich da nicht eine Anweisung mehr als mit jQuery? Nein, eigentlich nicht. In diesem Beispiel wird das Element vor dem Aufruf von Velocity gecacht. Wenn die Animation oder Teile der Animation wiederholt werden, erspart die Zuweisung var drop = document.getElementById('drop'); dem Browser das erneute Fischen nach dem Element.

NEPTUN JUNGFRAU KREBS APPLE ANDROID Musik Wetter

Animations-Optionen

Ob Velocity mit oder ohne jQuery ausgeführt wird – außer der kleinen Änderung der Syntax bleiben die Logik und die Funktionen gleich.

Velocity ( neptun, 
    { opacity: "1", 
      fill: "#fff",
      strokeWidth: "4px",
      stroke: "#efefef",
      translateX: "500px" }, 
    { duration: 750, 
      easing: "easeInQuad" }
);

In einem Animationsschritt können mehrere Eigenschaften geändert werden. Eigenschaften müssen im Javascript-CamelCase notiert werden, also borderWidth anstelle von border-width, backgroundImage anstelle von background-image. Javascript ist allergisch gegen Bindestriche.

  • Wir können auf die Easing-Funktionen von jQuery zurückgreifen: easing: "easeInQuad".
  • einzelne Animationsschritte mit loop:true beliebig oft oder mit loop: 4 für eine bestimmte Anzahl wiederholen

Animation delay

Animationen mit Velocity werden aufgereiht – chained. Jede weitere Animation eines Elements beginnt direkt, nachdem der vorherige Animationsschritt beendet wurde.

delay: xx verzögert die Ausführung des nächsten Animationsschritts.

$('#neptun').velocity ( {  opacity: "1", translateX: "500px", strokeWidth: "4px", stroke:"green" }, 0);	
$('#neptun').velocity ( {  translateX: "1200px", opacity: "0" }, {delay: 1000},  1500 );
$('#neptun').velocity ( {  translateX: "-100px"}, 0 );

Soll ein Element elem2 erst nach Ablauf der Animation von elem1 animiert werden, muss entweder der delay für elem2 berechnet werden oder elem2 wird explizit am Ende der Animation von elem1 (mit complete) aufgerufen.

$('#neptun').velocity ( {  translateX: "-100px" }, {complete: function () { 
    console.log ('1 Neptun completed');
    $('#jungfrau').velocity ( {  translateX: "500px", opacity: "1" }, { duration: 1000});
    …
}});

oder 

Velocity(neptun, { translateX: "-100px" }, { complete: function () {
    console.log ('1 Neptun completed');
    Velocity (jungfrau, {  translateX: "500px" }, { duration: 1500});
    …
}}, {duration: 100});

Animation loop

Mit { loop: 4} kann ein einzelner Animationsschritt vier Mal wiederholt werden, { loop: true } wiederholt den Animationsschritt unendlich oft.

Um eine Gruppe von Animationen zu wiederholen, sitzen die Anweisungen in einer Javascript-Funktion, die vom Callback-Argument rekursiv aufgerufen wird.

function iconshow () {
   Velocity (android, { translateX: "500px", opacity: "1" }, 1000);
   Velocity (android, { translateX: "1200px", opacity: "0" }, {delay: 1000},  1500 );
   Velocity (android, { translateX: "-100px"}, {complete: function () {
	  console.log ('5 android completed');
	  complete: iconshow();
   }}, 0);
}

iconshow();

Anhalten einer Animation mit

$('#neptun').velocity ("stop", true);