CSS, HTML und Javascript mit {stil}

SVG animate attributeName

SVG animateMotion mit mpath

SVG-Animationen mit SMIL können durch Events wie mouseover und click gestartet werden, sie müssen auch nicht linear und gleichmäßig ablaufen, sondern können diskrete Sprünge durchführen oder ähnlich wie ease-in, ease-out in CSS beschleunigen und abbremsen.

Animationen und Events triggern weitere Animation, um komplexe Abläufe zu animieren.

SMIL ist gestorben!
Nachdem Chrome SMIL abgestellt hat, können wir SMIL ad acta legen.

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

SMIL-Animationen (Synchronized Multimedia Integration Language) sind ein einfaches, aber ausgesprochen mächtiges Schema für die Animation von SVG-Elementen. SMIL ist ein Standard des W3C (ausgesprochen »smile«):

Die Liste der Attribute, die eine Animation steuern, ist lang. Da sich Animationen kombinieren und durch Events steuern lassen, bleibt die Timeline trotzdem überschaubar.

SMIL-Animationen werden von allen modernen Browsern unterstützt, aber nicht von IE9, IE10, IE11. Auf dieser Seite bringt Fake Smile, ein Script von David Leunen, die SVG-SMIL-Animationen in Gang.

Interimslösung für SMIL-Animationen

Da auch Chrome inzwischen SMIL-Animationen auf seine Abschussliste gesetzt hat, ist dieser Beitrag nur noch eine Reminiszenz. Aber für eine Weile rettet das HTML picture-Element die alten SMIL-Animationen:

<picture>
   <source srcset="animate-motion.svg" type="image/svg+xml">
   <img src="animate-motion.png" width="980" height="588" alt="SVG animateMotion mit mpath">
</picture>	

Das picture-Tag ist für unterschiedliche Bildformate gedacht. So bekommen IE und Edge ein standhaftes PNG serviert

SMIL Animationen

Zwar fehlt uns in SMIL-Animationen (Synchronized Multimedia Integration Language) das elegante ease-in und ease-out, aber einfache Spline-Animationen realiseren das Beschleunigen und Abbremsen von Bewegungen und Transformationen.

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
attributeName
nicht animateMotion
attributeType
CSS | XML | auto
Namespace, Namensraum nicht animateMotion
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
by
Dauer
wird zusammen mit addition verwendet und legt den Wert fest, der zum Animationswert hinzugerechnet wird, wenn die Animation beendet ist.
calcMode
discrete | linear | paced | spline
bei paced werden keyTimes und keySplines ignoriert. Die Punkte eines Splines werden durch das keyTimes-Attribut festgelegt
from / to
Startpunkt / Endpunkt
keyTimes
Semikolon-getrennte Liste mit Werten zwischen 0 und 1
Wenn keyPoints oder keySplines angegeben ist, muss keyTimes dieselbe Zahl von Elementen aufweisen wie keyPoints bzw. keySplines
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
keySplines

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

rotate
angle | auto | auto-reverse
Ob das Objekt entlang des Animationspfads rotiert wird. Bei auto liegt die x-Achse des Objekts parallel zum Pfad.
show
new embed | replace
type
simple | extended | locator | arc
values
Semikolon-getrennte Liste von Werten für ein Attribut
xlink:href
Link zu einem Pfad, einem Filter

SVG-Animationen mit Events steuern

Die Animation startet beim mouseover über die blaue Kugel. Wenn die blaue Kugel die linke Seite erreicht, wird die rote Kugel von links nach rechts animiert.

<circle cx="500" cy="100" r="50" fill="blue">
    <animate attributeName="cx" from ="500" to="0"
        begin="mouseover" dur="1s" fill="freeze"
        id="blue"
    />
</circle>

<circle cx="0" cy="100" r="50" fill="red">
    <animate attributeName="cx" from ="0" to="500"
        begin="blue.end" dur="1s" fill="freeze"
    />
</circle>
Eine SVG-Animation Los

Animation value und keyTimes

Statt nur from / to zu animeren, wird durch values eine Reihe von Punkten auf einer horizontalen Linie festgelegt. Für jeden Punkt liegt eine keyTime vor, um die lineare uniforme Bewegung natürlicher wirken zu lassen: Die Animationen startet langsam und stößt von der vertikalen Achse leicht zurück.

<text x="0" y="100">Eine SVG-Animation
   <animate
      attributeName="x"    // Attribut, das animiert wird
      begin="2s"           // mit einer Verzögerung
      dur="1s"             // Dauer 1s
      fill="freeze"        // Animation am Ende einfrieren
      values =   "500;  0;-20; 20; 0"  // Wegpunkte der Animation
      keyTimes = "  0; .7; .8; .9; 1"  // Keyframes 
/>
</text>

keySplines für ease, easeIn, easeOut, easeInOut

calcMode="spline" erlaubt sanftes Beschleunigen und Abbremsen und realisiert Bewegungsmuster wie ease-in und ease-in-out in CSS oder easeIn, easeInOut, easeOut in Animationen mit jQuery.

<circle  r="20" fill="white" opacity="0.1">
   <animateTransform attributeName="transform" 
   repeatCount="1" begin="mouseover"
   type="scale" 
   calcMode="spline" dur="2s"
   keyTimes="0;1" values="1;0.9" 
   keySplines="0 0 0.58 1" />
   <animate attributeName="opacity"
   repeatCount="1" begin="mouseover"
   calcMode="spline" dur="2s"
   keyTimes="0;1" values="1;0" 
   keySplines="0 0 0.58 1"
   />
</circle>
SVG Animationen mit keySplines für ease-in, ease-out, ease, ease-in-out und linear 0.42 0 1 1 0 0 0.58 1 0.25 0.1 0.25 1 0.42 0 0.58 1 0 0 1 1 ease-in ease-out ease ease-in-out linear

Die Splines führen uns die Bewegungsmuster vor Augen: ease beginnt langsam, wird schneller und vor dem Ende wieder langsamer. Die meisten natürlichen Bewegungen verlaufen nach diesem Muster. ease-out hingegen beginnt wie eine Gewehrkugel schnell und wird dann langsmer.

SVG Filter animieren

elem.click | SVG Animation ohne Javascript starten

animation.end | Animation in Abhänigkeit einer anderen Animation starten

SVG Filter animieren
<defs>
<animate id="slidein" attributeName="dx" from="500"
   to="0" begin="button.click+0s" dur="1s" fill="freeze"
   values="   500;  0; -20; 10; 0"
   keyTimes="   0; .8; .85; .9; 1"
   xlink:href="#slideEffect" />

<animate attributeName="stdDeviation" 
   from="20,1" to="0,0"
   begin="slidein.end-0.2s" dur="0.2s"
   fill="freeze" xlink:href="#blur" />

<filter id="slide">
   <feOffset       id="slideEffect" dx="500" dy="0" />
   <feGaussianBlur id="blur" stdDeviation="20,1" />
</filter>
</defs>

<text id="flyBlur" x="0" y="100" filter="url(#slide)">SVG Filter animieren</text>
<circle id="button" cx="170" cy="170" r="30" fill="" style="cursor:pointer" />

Mehrere Animationen für ein Elemente

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

Start
<path id="airplane" d="m  … z">
   <animateMotion 
      begin="start.click" dur="5s" 
      rotate="auto-reverse"
      fill="freeze">
      <mpath xlink:href="#theline" />
   </animateMotion>
   <animateTransform
      type="scale" 
      attributeName="transform"
      values="1 1; 1.2 1.2; 1.8 1.8; 1.5 1.5; 1 1"
      fill="freeze" dur="5s" 
      begin="start.click+ 1s"/>
</path>

Alternativen zu SMIL-Animationen

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.