SVG animate – Attribute und Events

Mehrere Animationen für ein Element

Für ein Element lassen sich mehrere Animationen kombinieren – z.B. animateMotion und animateTransform, um das Element gleichzeitig zu bewegen und zu skalieren.

<animateMotion 
   begin="0s" dur="10s" 
   rotate="auto"
   repeatCount="indefinite">
   <mpath xlink:href="#just-another-8" /></animateMotion>
<animateTransform
   type="scale" 
   attributeName="transform"
   values="1; 0.9; 0.7; 0.4; 0.1; 0.4; 0.7; 0.9"
   dur="10s"
   repeatCount="indefinite" 
   begin="10s"/>

additive replace | sum: Legt fest, ob eine Animation zum Attribut hinzugerechnet wird oder ob die Animation den Wert ersetzt
acutate user | auto
accumulate none | sum: Legt fest, ob Iterationen kummulativ sind

begin / end 0 mouseover click | load focus elem.endEvent+1s sum elem.begin + 1s elem.end + 1s | wallclock() indefinite elem.repeat(2): Zeit oder Event, bei der die Animation startet bzw. endet. Eine Animation kann zu einem Zeitpunkt beginnen oder durch ein Ereignis wie click oder durch den Anfang / das Ende einer anderen Animation
dur 0s: Dauer der Animation
fill remove freeze: Legt fest, ob die Animation am Ende stehen bleibt oder nicht
min 0s: Minimale Dauer bzw. max. Dauer der Animation. Mit min muss die Animation end-Events ignorieren, bis der entsprechende Zeitpunkt erreicht ist.
max indefinite: Mit max endet die Animation.
restart always whenNotActive never: Legt fest, ob die Animation erneut gestartet werden kann.
repeatCount # indefinite: Legt fest, wie oft die Animation wiederholt wird.
repeatDur Dauer indefinite: die Gesamtdauer, über die eine Animation wiederholt wird.
wallclock: YYYY-MM-DD z.B. 2015-07-16T19:20+01:00 oder 08:00

animateMotion

path: überschreibt andere Bewegungen wie from, to, by, values, ist absolut oder relativ
calcMode paced: bei paced werden keyTimes und keySplines ignoriert. Die Punkte eines Splines werden durch das keyTimes-Attribut festgelegt
keyPoints: Semikolon-getrennte Liste mit Werten zwischen 0 und 1.
Die Zahl der keyPoints kann von der Zahl der Knoten auf dem Animationspfad (value) abweichen und die keyPoints können in beliebiger Reihenfolge stehen, um vorwärts- / rückwärts-Bewegungen zu erzeugen
rotate angle | auto | auto-reverse: Ob das Objekt entlang des Animationspfads rotiert wird: Bei auto liegt die x-Achse des Objekts parallel zum Pfad.

Alternativen zu SMIL-Animationen

Alternativen sind Velocity.js, motionPath, CSS und Javascript, Libraries wie GreenSocks und snap.svg

Velocity.js ist eine Animations-Library mit einem API, das an jQuery $.animate() angelehnt ist, aber sowohl mit als auch ohne jQuery genutzt werden kann. Velocity.js unterstützt auch SVG-Animationen.

Vivus ist eine kleine Library, die SVG path-Animationen umsetzt und die Grafik on the fly zeichnet. Vivus ist auf SVG-path-Animationen spezialisiert, ist unabhängig von anderen Librarys und bringt gerade mal 8KB Zusatzgewicht.