SVG/SMIL

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

Eine der großen Stärken von SVG ist die Leichtigkeit, mit der Sie Objekte durch Animationen erweitern können.

Verwendet wird dabei die Synchronized Multimedia Integration Language (SMIL; Aussprache wie engl. smile) - eine vom W3C entwickelte XML-Auszeichnungsprache für zeitsynchronisierte, multimediale Inhalte. SMIL ermöglicht die Einbindung und Steuerung von Multimedia-Elementen wie Audio, Video, Text und Grafik in Webseiten und wird z.B. auch von Youtube für Untertitel verwendet. Das W3C hat die Weiterentwicklung von SMIL zum 01.04.2012 eingestellt[1].

  • SVG 1.0
  • SVG 1.1
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Für Browser, die SMIL nicht unterstützen, gibt es Polyfills.


Inhaltsverzeichnis

[Bearbeiten] Einbindung

Die Animationselemente werden in der Regel als Kindelement des Objekts, das man animieren möchte, eingebunden. Inhaltsleere Elemente wie <rect ... /> bekommen dann einen Start- und End-Tag.

Alternativ können Sie sie mit einem XLink-Attribut mit dem zu animierenden Element verknüpfen.

[Bearbeiten] Animationselemente

[Bearbeiten] animate

Mit dem animate-Element können Sie beinahe jedes der als animierbar gekennzeichneten Attribute, wie etwa Koordinaten, Längen, Breiten oder Farben, animieren. Es wird häufig eingesetzt, um fließende, interpolierbare Übergänge zu animieren. Es ist allerdings auch möglich, Werte zu ändern, die nur einzelne Zustände besitzen. Dafür eignet sich das set-Element jedoch meist besser.

Beispiel ansehen …
<svg>
    <ellipse cx="100" cy="100" rx="50" ry="50" fill="#c32e04">
      <animate attributeName="ry" from="50" to="100" begin="1s" dur="3s" fill="freeze"/>
    </ellipse>
 
    <rect x="250" y="50" width="100" height="100" rx="50" ry="50" fill="#dfac20">
      <animate attributeName="rx" from="50" to="0" begin="1s" dur="3s" fill="freeze"/>
      <animate attributeName="ry" from="50" to="0" begin="1s" dur="3s" fill="freeze"/>
    </rect>
 
    <path d="m450,50 h100 l-50,100z" fill="#5a9900" stroke="transparent" stroke-width="5">
      <animate attributeName="fill" from="#5a9900" to="transparent" begin="1s" dur="3s" fill="freeze"/>
      <animate attributeName="stroke" from="transparent" to="#5a9900" begin="1s" dur="3s" fill="freeze"/>
      <animate attributeName="stroke-width" from="0" to="5" begin="1s" dur="3s" fill="freeze"/>
    </path> 
</svg>
Der vertikale Radius der linken Ellipse wird von 50 auf 100px erhöht.
Der mittlere Kreis ist eigentlich ein Rechteck, dessen abgerundete Ecken auf Null gesetzt werden.
Das rechte Dreieck verliert seine Füllfarbe. Dafür wird der Rand eingeblendet und von transparent auf grün gesetzt.

[Bearbeiten] animateColor

Für Farbtransformationen wurde explizit das animateColor-Element geschaffen. Da es aber gegenüber dem animate-Element keinerlei Vorteile hat, wurde es in SVG1.1 deprecated und ist somit obsolet.[2]

  • Achtung
  • SVG 1.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel ansehen …
<ellipse cx="150" cy="100" rx="50" ry="50" fill="#c32e04">
  <animate attributeName="fill" values="#5a9900;#dfac20;#c32e04;" 
                   begin="1s" dur="4s" fill="freeze" />
</ellipse>
 
<ellipse cx="550" cy="100" rx="50" ry="50" fill="#c32e04">
  <animateColor attributeName="fill" values="#5a9900;#dfac20;#c32e04;" 
                        begin="1s" dur="4s" fill="freeze" />
</ellipse>
</svg>
Der linke Kreis wird durch das animate-Elemente animiert.
Der zweite Kreis soll durch das animateColor-Element animiert werden. Dies wird in modernen Browsern jedoch nicht mehr unterstützt.
Empfehlung: Verwenden Sie für Farbänderungen ebenfalls animate, da animateColor in Chrome und Firefox nicht (mehr) unterstützt wird.


[Bearbeiten] animateTransform

Mit dem animateTransform-Element können Sie Transformationen animieren.

Beachten Sie: Vergessen Sie trotzdem nicht: attributeName:transform;.

Zusätzlich müssen Sie mittels der Eigenschaft type festlegen, welcher Transformationstyp geändert werden soll:

Der Transformationstyp matrix ist nicht animierbar.

Normalerweise überschreiben sich animierte Transformationen. Um mehrere Transformationen gleichzeitig zu animieren, müssen Sie die Eigenschaft additive="sum" setzen.

Beispiel ansehen …
<ellipse cx="100" cy="100" rx="50" ry="50" fill="#c32e04">
  <animateTransform attributeName="transform" 
                             type="scale" from="1" to="1.5" 
                            begin="1s" dur="4s" fill="freeze" />
</ellipse>
 
<g transform="translate(350,100)">
  <rect x="-50" y="-50" width="100" height="100" fill="#dfac20">
    <animateTransform repeatCount="indefinite"
                    attributeName="transform" type="rotate"
                             from="0" to="90" begin="0" dur="3s" />
  </rect>
</g>  
 
<path d="m500,50 h100 l-50,100z" fill="#5a9900" stroke="transparent" stroke-width="5">
  <animateTransform attributeName="transform" 
                             type="skewX" from="0" to="50" 
                             begin="1s" dur="4s" 
                             fill="freeze"
   />
</path>
Der linke Kreis wird um das 1.5fache skaliert.
Beachten Sie, dass der X- und Y-Abstand zum Nullpunkt auch skaliert werden.

Damit das mittlere Rechteck sich um sich selbst rotiert, bekommt es ein eigenes Koordinatensystem durch <g transform="translate( 350,100)">.

Das rechte Dreieck wird um 50 Grad horizontal verzerrt.
Beachten Sie: dass die Werte der Zustände das gleiche Format haben wie die Parameter der Transformationsbefehle.
Empfehlung:
Verwenden Sie CSS-animation oder die Web Animations API, um SVG-Elemente zu tranformieren.

[Bearbeiten] animateMotion

Das animateMotion-Element ermöglicht es, Objekte entlang eines vordefinierten Pfades laufen zu lassen. Der Animationspfad wird entweder als path-Objekt im Definitionsabschnitt abgelegt und mit Hilfe des mpath-Elements referenziert oder er wird direkt mit Hilfe des Attributs path im animateMotion-Tag angegeben.

Beispiel ansehen …
<symbol>
  <path id="pfad" d="M10,180 c30,-40 55,-40 85,0 s55,40 85,0 c30,-40 55,-40 85,0 s55,40 85,0 
                    c30,-40 55,-40 85,0 s55,40 85,0 c30,-40 55,-40 85,0 s55,40 85,0"/>
</symbol>
<symbol id="auto">
    <path id="karosse" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z"/>
    <circle class="reifen" cx ="10" cy ="20" r ="5" /> 
    <circle class="reifen" cx ="32" cy ="20" r ="5" /> 
</symbol>
 
  <use xlink:href="#pfad" x="20" y="10"/>
  <use xlink:href="#auto" x="0" y="0">
    <animateMotion begin="0s" dur="3s" fill="freeze">
      <mpath xlink:href="#pfad" />
    </animateMotion>
  </use>
 
  <use xlink:href="#pfad" x="20" y="110"/>
  <use xlink:href="#auto" x="0" y="100" fill="#c32e04">
    <animateMotion begin="0s" dur="3s" fill="freeze" 
     path="M10,80 c30,-40 55,-40 85,0 s55,40 85,0 c30,-40 55,-40 85,0 s55,40 85,0 
           c30,-40 55,-40 85,0 s55,40 85,0 c30,-40 55,-40 85,0 s55,40 85,0"/>
  </use>
Das erste use-Element ruft den Pfad auf und macht ihn sichtbar.
Das zweite use-Element ruft das vorher in symbol definierte gelbe Auto auf, das nun mit animateMotion entlang des mit mpath-Elements aufgerufenen Pfades animiert wird.

Das rote Auto fährt entlang eines Pfades, der direkt als Eigenschaft des animateMotion-Elements notiert ist.

Mit der Eigenschaft rotate können Sie die Ausrichtung des animierten Objekts beeinflussen.

Folgende Angaben sind möglich:

  • auto:
  • auto-reverse
  • grad: Winkelmaß
Beispiel ansehen …
<svg>
  <use xlink:href="#pfad" x="20" y="10"/>
  <use xlink:href="#auto" x="0" y="0" fill="#dfac20">
    <animateMotion begin="0s" dur="3s" fill="freeze" rotate="auto">
      <mpath xlink:href="#pfad" />
    </animateMotion>
  </use>
</svg>
Mit der Eigenschaft rotate="auto" folgt das Auto nun auch den Steigungen. Dies funktioniert aber nur im Beispiel, dessen Pfad mit mpath verlinkt ist und nicht im Beispiel mit dem integrierten Pfad.
Beachten Sie: Für die Animation von Textpfaden verwenden Sie bitte das #animate-Element.

Um vergleichbare Animationen auch mit CSS realisieren zu können, führte Chrome die CSS-Eigenschaft motion-path ein, die mittlerweile unter dem Namen offset-path standardisiert ist.

[Bearbeiten] set

Mit dem set-Element können Sie zwischen einem Anfangs- und einem Endzustand umschalten, ein fließender Übergang wie bei animate ist jedoch nicht möglich.

Da als Anfangszustand immer der Anfangswert des angesprochenen Attributs benutzt wird, benötigen Sie kein from-Attribut und am Ende der Animation wird der Endzustand auch ohne fill="freeze" dargestellt.

Beispiel ansehen …
<svg>
    <ellipse cx="240" cy="100" rx="200" ry="70" style="fill:#dfac20;stroke:#3983ab;stroke-width:0;">
    <set attributeName="stroke-width" to="10" begin="1s"/>
    </ellipse>
 
    <text x="10" y="240">
      &lt;set attributeName="stroke-width" to="10" begin="1s"/>
      <set attributeName="fill" to="black" begin="1.5s"/>
    <text>
</svg>
Die Ellipse erhält nach 1 Sekunde einen blauen Rand. Kurz danach erscheint der Text.

[Bearbeiten] Eigenschaften

[Bearbeiten] attributeName

Mit der Eigenschaft attributeName legen Sie fest, welches Eigenschaft animiert werden soll. Falls Sie mehrere Eigenschaften ändern wollen, verwenden Sie mehrere animate-Elemente.


[Bearbeiten] attributeType

Mit der attributeType-Eigenschaft können Sie dem Browser mitteilen, ob die zu animierende Eigenschaft als XML-Attribut (z.B. fill="red") oder als Stilattribut (z.B. style="fill:red") festgelegt wurde. Es kann diese Werte annehmen:

  • auto: (Standardwert) Browser erkennt selbst, um welchen Attributtyp es sich handelt
  • XML: - bei dem Typ der Eigenschaft handelt es sich um ein XML-Attribut
  • CSS: - bei dem Typ der Eigenschaft handelt es sich um ein CSS-Attribut
Empfehlung: Verzichten Sie auf attributeType, da es standardmäßig auf den Wert auto gesetzt ist und die Browser dies selbstständig feststellen können.

[Bearbeiten] Zeiten setzen

[Bearbeiten] begin end

Die Eigenschaft begin legt den Anfangszeitpunkt, end das Ende der Animation fest.

Folgende Angaben sind möglich:

  • offset-value : Zeitangabe
  • syncbase-value : wird in Abhängigkeit einer anderen Animation (Referenz durch id) ausgelöst oder beendet.
  • event-value: die Animation wird durch Anwenderereignisse gesteuert, z.B.:
    • focusin : Element erhält den Fokus
    • focusout : Element verliert den Fokus
    • activate : Element wird aktiviert (z.B. durch eine Tastatureingabe)
    • click : Element wird geklickt (hier werden ebenfalls die Ereignisse mousedown und mouseup ausgelöst)
    • mousedown : Maustaste gedrückt, während sich der Mauszeiger zum Zeitpunkt des Klickens über dem Element befand
    • mouseup : gedrückte Maustaste wird wieder losgelassen (wird immer in Verbindung mit mousedown ausgelöst)
    • mouseover : sich der Mauszeiger über dem Element befindet
    • mousemove : der Mauszeiger über dem Element bewegt wird
    • mouseout : der Mauszeiger das Element wieder verlässt

[Bearbeiten] dur

Die Eigenschaft dur legt die Dauer (duration) der Animation fest.

Folgende Angaben sind möglich:

  • offset-value : Zeitangabe
  • syncbase-value : wird in Abhängigkeit einer anderen Animation (Referenz durch id) ausgelöst oder beendet.
  • event-value: die Animation wird durch Anwenderereignisse gesteuert (siehe begin)


[Bearbeiten] restart

Die Eigenschaft restart legt das Verhalten der Animation bei Wiederholungen fest.

Folgende Angaben sind möglich:

  • always:
  • whenNotActive:
  • never:


[Bearbeiten] Zustände setzen

[Bearbeiten] from to

Mit der Eigenschaft from können Sie den Anfangswert und mit to den Endwert des zu animierenden Attributs festlegen.

Beachten Sie, dass die Werte dem jeweiligen Typ entsprechen, den auch das Attribut verlangt, d.h. bei der Veränderung eines Radius sollte to keinen Farbwert erhalten.

[Bearbeiten] by

Die Eigenschaft by sorgt ebenfalls für eine Zustandsveränderung. Allerdings ist dessen Wert abhängig vom Ausgangszustand.


Beispiel ansehen …
<svg>
  <rect x="110" y="10" height="100" width="100" fill="#dfac20">
    <animate attributeName="height" begin="click" by="100" dur="1s" fill="freeze" />
  </rect>
</svg>
Das Rechteck hat eine Höhe von 100px. Das by-Attribut hat den Wert 100; bei einem Klick wird dieser Wert zur Ursprungshöhe dazu addiert. Es hat dann also eine Höhe von 200px.

[Bearbeiten] values

Außer diesen Attributen, die im Endeffekt nur Start- oder Endzustände festlegen, gibt es in SVG noch die Eigenschaft values, mit dem sich mehrere Zustände, die sogenannten Schlüsselzustände, setzen lassen. Dabei werden die einzelnen Werte durch Semikola voneinander getrennt in eine Liste geschrieben, die values zugewiesen wird. Dadurch verringert sich zum einen der Schreibaufwand und zum anderen erhöht sich die Übersichtlichkeit.

Den einzelnen Schlüsselwerten von values kann mit keyTimes eine Schlüsselzeit zugeordnet werden.

Beispiel ansehen …
<ellipse cx="150" cy="100" rx="50" ry="50" fill="#c32e04">
  <animate attributeName="fill" values="#5a9900;#dfac20;#c32e04;" begin="1s" dur="4s" fill="freeze" />
</ellipse>
Der linke Kreis wird durch das animate-Elemente animiert. Dabei wird der zu animierenden Eigenschaft fill eine Liste mit 3 Farbwerten zugeordnet.
Der zweite Kreis soll durch das animateColor-Element animiert werden. Dies wird in modernen Browsern jedoch nicht mehr unterstützt.

[Bearbeiten] fill

Die Eigenschaft fill (nicht zu verwechseln mit fill) legt fest, wie das Objekt nach Ablauf der Animation dargestellt werden soll:

  • remove: (Standardwert) Nach Ablauf der Animation wird das animierte Objekt wieder auf den Ursprung zurückgesetzt.
  • freeze: Das Objekt behält nach Ablauf der Animation seine neuen Werte.

[Bearbeiten] Aufbauende Animationen

[Bearbeiten] additive

Mit der Eigenschaft additive können Sie festlegen, wie sich Werte zum Ursprungswert verhalten.

Folgende Angaben sind möglich:

  • sum: der zu setzende Wert wird zum Ursprungswert addiert
  • replace: der Ursprungswert wird durch den neuen Wert ersetzt
Beispiel: Attribute zur Zustandsveränderung im Vergleich ansehen …
<svg>
  <circle cx="100" cy="100" r="50" fill="#c32e04">
    <animate attributeName="r" begin="1s" dur="2s" from="50" to="100" fill="freeze"/>
  </circle>
 
  <circle cx="300" cy="100" r="50" fill="#dfac20">
    <animate attributeName="r" begin="1s" dur="2s" by="50" fill="freeze"/>
  </circle>
 
  <circle cx="500" cy="100" r="50" fill="#5a9900">
    <animate attributeName="r" begin="1s" dur="2s" from="0" to="50" additive="sum" fill="freeze"/>
  </circle>
</svg>
Jede Animation soll dafür sorgen, dass sich der Radius innerhalb von zwei Sekunden um 50 Einheiten erhöht.
Dabei verwendet der erste Kreis die Attribute from und to, der zweite das Attribut by und der dritte from, to und additive.

Dieses Beispiel wäre am einfachsten in der mittleren Variante zu realisieren.

Die Eigenschaft additive zeigt jedoch beim Einsatz von values ihren Nutzen, da ansonsten die zu animierende Eigenschaft nach jedem Zustand wieder auf ihren ursprünglichen Wert zurückspringt.

Beispiel: Die Eigenschaft additive in Kombination mit values ansehen …
<svg>
  <circle cx="100" cy="100" r="50" fill="#c32e04">
    <animate attributeName="r" begin="1s" dur="2s" values="0; 50; 100" fill="freeze"/>
  </circle>
 
  <circle cx="400" cy="100" r="50" fill="#dfac20">
    <animate attributeName="r" begin="1s" dur="2s" values="0; 50; 100" additive="sum"
      fill="freeze"/>
  </circle>
 
  <circle cx="700" cy="100" r="50" fill="#5a9900">
    <animate attributeName="r" begin="1s" dur="2s" values="0; 50; 100" additive="replace"
      fill="freeze"/>
  </circle>
</svg>
Die Animation des ersten Kreises ohne additive-Attribut und des dritten Kreises mit der Angabe additive="replace" verlaufen absolut gleich. Sie besitzen im Endzustand auch denselben Radius, da der Wert von r immer zuerst auf 0, dann auf 50 und zuletzt auf 100 gesetzt wird.
Die Angabe additive="sum" sorgt hingegen dafür, dass der ursprüngliche r-Wert 50 zuerst mit 0, danach mit 50 und zum Schluss mit 100 addiert wird.

[Bearbeiten] repeatCount

Mit der Eigenschaft repeatCount können Sie die Anzahl der Wiederholungen festlegen, wenn Sie eine Animation mehr als nur einmal ablaufen lassen wollen.

Folgende Angaben sind möglich:

  • Anzahl der Wiederholungen, also eine ganze Zahl, größer als 0
  • indefinite: nicht festgelegt, also unendlich weiterlaufend


[Bearbeiten] accumulate

Sie können die Eigenschaft accumulate einsetzen, um zu vermeiden, dass die zu animierende Eigenschaft nach jeder Wiederholung auf ihren Ursprungswert gesetzt wird.

Folgende Angaben sind möglich:

  • sum: baut auf den vorherigen Zustand auf
  • none: ersetzt den vorherigen Zustand (Standard)
Beispiel ansehen …
<svg>
  <use xlink:href="#auto" x="0" y="0" fill="#dfac20">
    <animate attributeName="x" begin="1s" dur="1.5s" by="100" repeatCount="5" fill="freeze" />
  </use>
 
  <use xlink:href="#auto" x="0" y="100" fill="#c32e04">
    <animate attributeName="x" begin="1s" dur="1.5s" by="100" repeatCount="5" accumulate="sum" fill="freeze" />
  </use>
</svg>
Die beiden Autos wurden wie im obigen Beispiel als symbol definiert und zweimal mit use aufgerufen. Sie unterscheiden sich nur durch die Eigenschaft accumulate.

Die Animation des gelben Autos sorgt dafür, dass dieses um 100 Einheiten nach rechts verschoben wird. Wegen der Eigenschaft repeatCount, wird diese Animation fünf Mal hintereinander durchlaufen, wobei das Objekt nach jedem Animationsdurchgang immer wieder an seinen Ursprungsort zurückspringt.

Im Gegensatz dazu bewirkt accumulate="sum" für das rote Auto, dass es nicht nach jedem Animationslauf zur Ursprungsposition zurückfällt. Statt dessen baut eine Animation auf den jeweils letzten Zustand der vorherigen auf. In diesem Beispiel verschiebt sich das rote Auto also nicht nur um 100, sondern um 500 Einheiten.

[Bearbeiten] mehrstufige Animationen steuern

Wenn eine Animation mehrfache Werte hat, wird die Dauer der Animation normalerweise gleichmäßig zwischen den einzelnen Zuständen verteilt. Sie können die Dauer der einzelnen Schritte jedoch auch selbst festlegen.

[Bearbeiten] calcMode

Mit der Eigenschaft calcMode können Sie festlegen, wie die Zwischenschritte der Animation berechnet werden.

Folgende Modi sind möglich:

  • discrete: Im Modus discrete wird ohne fließenden Übergang direkt zwischen zwei Zuständen umgeschaltet.
  • linear: Standardwert für animate, animateTransform und set
    Die Zeit für die einzelnen Schritte bleibt konstant, die Geschwindigkeit kann variieren.
  • paced: Standardwert für animateMotion, Geschwindigkeit bleibt gleich, Dauer der einzelnen Übergänge kann variieren.
  • spline: Animation wird anhand einer Bézier-Kurve interpoliert, die mit der Eigenschaft keySplines festgelegt wurde.
Beispiel ansehen …
    <use xlink:href="#auto" x="20" y="20" fill="#dfac20" >
      <animate
        attributeName="x"
        begin="0" dur="10"
        from="20" by="530"
        restart="whenNotActive"
        fill="freeze" 
	calcMode="discrete"/>
     </use>
     <text x="10" y="60">calcMode="discrete"</text>
 
     <use xlink:href="#auto" x="20" y="100" fill="#5a9900" >
       <animate
        attributeName="x"
        begin="0" dur="5"
        from="20" by="550"
        restart="whenNotActive"
        fill="freeze" 
        calcMode="paced"
        values="20; 200; 550"/>
     </use>
    <text x="10" y="140">calcMode="paced"</text>  
 
    <use xlink:href="#auto" x="20" y="180" fill="#c32e04" >
      <animate
        attributeName="x"
        begin="0" dur="5"
        from="20" by="550"
        restart="whenNotActive"
        fill="freeze" 
        calcMode="linear" 
        values="20; 200; 550"/>
     </use>
     <text x="10" y="220">calcMode="linear"</text>
Alle drei Autos brauchen für die Distanz die gleiche Zeit. Während das erste Auto am Start verharrt und dann plötzlich am Ziel erscheint, bewegen sich die Autos mit den Modi paced und linear unterschiedlich schnell, kommen aber doch gleichzeitig ans Ziel.

[Bearbeiten] keySplines

Das keySplines-Attribut legt in Verbindung mit calcMode="splines" fest, wie die Geschwindigkeit der Animation abläuft. Sie beinhaltet die Kontrollpunkte einer Bézier-Kurve in der Form x1; y1; x2; y2.

Es handelt sich hierbei aber nicht um absolute Positionsangaben, sondern um relative Werte, die sich zwischen 0 und 1 befinden dürfen. Dabei gehören auch 0 und 1 diesem Intervall an.

Beispiel: Übergangssteuerung mittels Bézier-Kurven im spline-Modus ansehen …
<use xlink:href="#auto" x="20" y="20" fill="#dfac20" >
  <animate 
    attributeName="x"
    begin="los.click" dur="10"
    calcMode="spline"
    keySplines="0 0 1 1" values="0; 800"
    restart="whenNotActive"
    fill="freeze" />
</use>
<text x="10" y="60">keySplines="0 0 1 1" values="0; 800"</text>
 
<use xlink:href="#auto" x="20" y="100" fill="#5a9900" >
  <animate
    attributeName="x"
    begin="los.click" dur="8"
    calcMode="spline"
    keySplines=".5 0 .5 1" values="0; 800"
    restart="whenNotActive"
    fill="freeze"/>
</use>
<text x="10" y="140">keySplines=".5 0 .5 1" values="0; 800"</text>  
 
<use xlink:href="#auto" x="20" y="180" fill="#c32e04" >
  <animate
    attributeName="x"
    begin="los.click" dur="8"
    calcMode="spline"
    keySplines=".0 .75 .25 1" values="0; 800"
    restart="whenNotActive"
    fill="freeze"/>
</use>
<text x="10" y="220">keySplines=".0 .75 .25 1" values="0; 800"</text>  
 
<use xlink:href="#auto" x="20" y="260" fill="#3839ab" >
  <animate
    attributeName="x"
    begin="los.click" dur="8"
    calcMode="spline"
    keySplines="1 0 .25 .25" values="0; 800"
    restart="whenNotActive"
    fill="freeze"/>
</use>
<text x="10" y="300">keySplines="1 0 .25 .25" values="0; 800"</text>
Die Autos starten alle zugleich, haben im Verlauf der Animation aber unterschiedliche Geschwindigkeiten, so dass sie nach 4 Sekunden an unterschiedlichen Orten sind. Auch wenn es anders aussieht, die Autos 2-5 kommen gleichzeitig ins Ziel! Auto 1 ist leider erst 2 Sekunden später im Ziel und Auto 5 schummelt, weil sein Ziel 200 Pixel weiter links liegt.


Es lassen sich aber nicht nur die Kontrollpunkte der Bézier-Kurve beeinflussen, sondern mit Hilfe des Attributs keyTimes auch deren Ankerpunkte.

[Bearbeiten] keyTimes

Mit der Eigenschaft keyTimes können Sie in einer durch Semikola getrennten Liste Werte für die jeweilige Dauer der einzelnen in values festgelegten Schritte angeben.

Beachten Sie:
  • Erster Wert ist immer Null, der letzte Wert ist 1; die Anzahl der Werte muss mit der Anzahl der Angaben in values übereinstimmen. Außerdem muss jeder Wert mindestens gleich groß oder größer sein als sein Vorgänger (z.B.: 0; 0.25; 0.8; 1).
  • Wenn Sie calcMode="paced" setzen, wird das keyTimes-Attribut ignoriert.
  • Fehlt eine Angabe von Schlüsselzeiten, teilt der Browser die Dauer der Animation durch die Anzahl ihrer Schlüsselzustände.

[Bearbeiten] Animationen durch Events steuern

Sie können Animationen auch durch Events wie ein Anklicken oder Überfahren mit der Maus auslösen. Dazu müssen Sie den Event an die id des zu animierenden Objekts anfügen:

id.click
id.mouseover
Beispiel: SVG-Animationen durch Events steuern ansehen …
  <text id="eins" x="50" y="50">
    Klick mich!
    <animate 
      attributeName="rotate"
      begin="eins.click" dur="3"
      from="0" to="360"
      repeatCount="1"
      restart="whenNotActive" />
  </text>
 
  <text id="zwei" x="50" y="200">
    Fahr mit der Maus drüber!
    <animate 
      attributeName="font-size"
      begin="zwei.mouseover" dur="1"
      from="50" to="100"
      fill="freeze" />
  </text>  	
  <text id="drei" x="50" y="400">
    Fahr mit der Maus drüber und wieder weg!
    <animate 
      attributeName="font-size"
      begin="zwei.mouseover" dur="1"
      from="50" to="100"
      fill="freeze" />
    <animate 
      attributeName="font-size"
      begin="zwei.mouseout" dur="10"
      from="100" to="0"
      fill="freeze" />
  </text>
Durch einen Klick auf das obere Text-Element wird eine Animation gestartet, in der die Zeichen gedreht werden.
Das mittlere und untere Text-Element werden beim Befahren mit der Maus (begin="zwei.mouseover") vergrößert. Während der mittlere Text durch fill="freeze" im animierten Endzustand bleibt, wird der untere Text beim Verlassen der Maus (begin="drei.mouseout") bis auf 0 verkleinert.
Beachten Sie: Der mouseover-Event feuert beide Animationen gleichzeitig. Eine Alternative, um beide Texte getrennt animieren zu können, wäre die mittlere Animation mittels mousemove zu aktivieren.

[Bearbeiten] Animationen miteinander verknüpfen

Sie können Animationen miteinander synchronisieren, wenn Sie für begin oder end keine feste Zeitangabe, sondern eine Referenz zu einer anderen Animation (syncbase value) setzen.

id.begin+1s
id.end-1s

Dafür müssen Sie ein .end oder .begin an die id der auslösenden Animation (oder eines Eventhandler eines Objekts) anhängen. Ein optionaler Zeitzuschlag (oder auch ein negativer Wert) ist ebenfalls möglich.

Beispiel: Animationen miteinander verknüpfen ansehen …
  <circle id="kreis" 
          cx="100" cy="100" r="50" fill="#3983ab"/>
  <text x="50" y="30">Klick auf den blauen Kreis!</text>
  <circle cx="200" cy="100" r="50" fill="#c32e04">
    <animate id="An1"
             attributeName="cx" 
             from="200" to="800"
             begin="kreis.click" dur="3s" fill="freeze"
            />
    <animate id="An2"
             attributeName="cy" 
             from="100" to="400" fill="freeze"
             begin="An1.end" dur="2s" 
            />
  </circle>
  <circle cx="800" cy="500" r="50" fill="#5a9900">
    <animate id="An3" 
	     attributeName="cx" 
             from="800" to="100" fill="freeze"
             begin="An2.end+1s" dur="2s" />
  </circle>
  <circle cx="100" cy="500" r="50" fill="#dfac20">
    <animate id="An4" 
             attributeName="cy" 
             by="-300" fill="freeze"
             begin="An3.end-0.75s" dur="2s" />
  </circle>
Wenn Sie auf den blauen Kreis klicken, wird der rote Kreis mit begin="kreis.click" animiert. Am Ende dieser Animation mit der id="An1" wird die zweite Animation mit begin="An1.end" gestartet. Die folgende Animation startet verzögert: begin="An2.end+1s", während der gelbe Kreis bereits vorzeitig seinen Platz räumt: begin="An3.end-0.75s".

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Quellen

  1. W3C: The SYMM WG is closed since 01 April 2012.
  2. MDN: animateColor
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML