CSS, HTML und Javascript mit {stil}

SVG Animate

SVG animate mit SMIL Luftballons schweben entlang eines SVG-Pfads, animiert mit SMIL

SVG kann mit Javascript und CSS animiert werden, hat aber auch ein eigenes Animationsmodell: SMIL – Synchronized Multimedia Integration Language. Der Vorteil von SMIL gegenüber CSS- und Javascript-Animationen: SMIL-Animationen bewegen SVG auch in img-Tags.

Von Chrome in Version 45 den CSS- und WebP-Animationen auf deprecated (veraltet) gesetzt, sind SMIL-Animationen in Chrome auch zwei Jahre nach der Absetzung immer noch aktiv. Die Blink-Entwickler haben ihr Deprecated inzwischen zurückgezogen.

SVG ist ein spezielles DOM-Element mit einer ähnlichen Syntax wie HTML: SVG-Elemente bestehen aus Tags, Attributen und Verhalten. Sie können mit CSS animiert werden – wenn auch mit Einschränkungen.

CSS transitionAlle style-AttributeNicht bei SVG in img-Tag
CSS transformAlle style-AttributeNicht bei SVG in img-Tag
CSS keyframeAlle style-AttributeNicht bei SVG in img-Tag
CSS und JavascriptAlle style- und Geometrie-AttributeNicht bei SVG in img-Tag

SVG Animationen mit SMIL

SMIL hat neben einer überwältigenden Menge an Optionen einen Pluspunkt: SMIL ist "All in one". Ein externes animiertes SVG enthält alle erforderlichen Elemente und Animationen und kommt mit einem einfachen img-Tag aus.

CityScape Animation

Da Microsoft Internet Explorer und EDGE keinen Support für SMIL-Animationen bieten, springen CSS und Javascript ein. Dort fehlt es allerdings an einer einfachen Umsetzung der Timeline oder Chaining, denn SMIL-Animationen setzen durch ein einfaches begin="move1.end + 0.4s" Animationen in Abhängigkeit von anderen Animationen und auch zu Events wie click.

Für Effekte und Animationen, die mit CSS und Javascript zu aufwändig sind, springen Libraries wie Vivus und Velocity (klein und leicht) oder à la Snap.svg und GreenSocks ein.

SVG animate

Um ein SVG-Element zu animieren, wird ein animate-Tag zwischen das öffnende und schließende Tag des Elements gesetzt. Das animate-Tag kommt in vier Variationen:

  1. animate kann jedes skalierbare Attribut animieren.
  2. animateMotion bewegt ein Element auf einem Pfad,
  3. animateTransform animiert Größe, Lage und Rotation
  4. set

Darüber können zwei Animationselemente bzw. Attribute verwendet werden.

  1. animateTransform
  2. mpath
animateMotion
<rect x="" y="" … >
    <animateMotion values="-200,0; 2500,0"  …/>
</rect>

<rect x="" y="" … >
    <animateMotion …>
        <mpath xlink:href="#p1" />
    </animateMotion>
</rect>
animateTransform (translate | scale | rotate | skewX | skewY)
<rect x="" y="" … >
    <animateTransform type="rotate"  …/>
</rect>
animate Attribute
<rect x="" y="" … >
    <animate attributeName="x"  …/>
</rect>
Set – einfaches Toggeln
<rect x="" y="" … >
    <set  …/>
</rect>

animateMotion

Bewegung entlang eines Pfades. Ändert das Koordinatensystem des animierten Objekts. Im einfachsten Fall wird der Pfad im values-Attribut des animateMotion-Tags als Punktefolge angegeben.

(0,0) (450,0) (200,150)
<circle cx="50" cy="50" r="50" fill="ivory">
   <animateMotion dur="10s" 
      values="0,0; 450,0; 200,150; 0,0" 
      repeatCount="indefinite" />
</circle>
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
repeatCount
# | indefinite
Legt fest, wie oft die Animation wiederholt wird.
rotate
angle | auto | auto-reverse
Ob das Objekt entlang des Animationspfads rotiert wird. Bei auto liegt die x-Achse des Objekts parallel zum Pfad.
values
Semikolon-getrennte Liste von Werten für ein Attribut

Ein komplexer Animationspfad kann auch in ein defs-Element gesetzt werden. animateMotion muss dann einen Link auf den Animationspfad setzen.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" … >
</svg>
<defs>
    <path id="p1"  d="…" />
</defs>
<path d="…" style="fill:#666">
    <animateMotion dur="50" repeatCount="indefinite">
        <mpath xlink:href="#p1"/>
    </animateMotion>
</path>

Wenn die SVG-Grafik nicht inline im HTML-Dokument liegt, braucht das svg-Element eine Referenz auf den xlink-Namespace.

animateTransform

type
translate | scale | rotate | skewX | skew>
Legt fest, welche Transformation animiert wird

Der Nullpunkt des SVG-Koordinatensystems liegt oben links. Um ein Element um seinen Pivotpunkt (Mittelpunkt) zu rotieren, braucht das Element – in diesem Beispiel ein Viereck – ein eigenes Koordinatensystem durch <g transform="translate( 250,125)">.

(250,125)
<g transform="translate( 250,125)">
   <rect x="-75" y="-75" width="150" height="150" fill="ivory">
   <animateTransform repeatCount="indefinite"
      attributeName="transform" type="rotate"
      from="0" to="90" begin="0" dur="5s" />
   </rect>
</g>

Statt das Element mit transform="translate()" zu versetzen, kann der Rotationspunkt (Pivotpunkt) auch in animateTransform angegeben werden.

(250,125)
<rect x="175" y="50" width="150" height="150" rx="5" ry="5">
   <animateTransform 
      repeatCount="indefinite"
      attributeName="transform" type="rotate"
      from="0 250 125" to="360 250 125" begin="0" dur="5s" />
</rect>

Mehrere Werte können auch als Semikolon-getrennte Liste angegeben werden. Dann kommt eine Animation vorwärts und rückwärts (forth and back) mit einer Anweisung aus.

SVG Animate forth and back infinite Schildkröte schwimmt mit rotierenden Beinen

Jedes Bein der Schildkröte braucht nur ein animationTransform-Element.

<g>
    <path fill="#5a852c" d="…"/>
    <path fill="#496c24" d="…"/>
    <animateTransform repeatCount="indefinite" attributeName="transform" type="rotate"
    values="0 204 78; -20 204 78; 0 204 78" dur="8s" />
</g>

set

set ist eine Kurzschrift für animate und erzeugt eine Animation mit einer Dauer von 0s. Ein dur-Attribut mit einem anderen Wert als 0 hat keine Wirkung. Der neue Wert wird sofort zugewiesen, wenn die Animation durch ein Event ausgelöst wird.

Kurz: set toggelt zwischen zwei Zuständen.

<set attributeName="display" to="none" begin="off.end" />

set ist nützlich, um nichtnumerische Attribute wie visibility verändern oder zwischen display:block und display:none zu wechseln.

Alternativen zu SVG SMIL-Animationen

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

CityScape Animation