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.

animateTransform

type
scale
rotate
skew
translate
values
Semikolon-getrennte Liste von Werten für ein Attribut

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.