SMIL

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Synchronized Multimedia Integration Language (SMIL; auszusprechen wie englisch: smile – lächeln) ist eine Beschreibungssprache für zeitsynchronisierte Multimedia-Präsentationen, die bereits 1998 vom W3C festgelegt wurde (SVG erst 2001).[1]

SMIL wird zur SVG-Animation, aber auch für Menüs auf DVDs und Youtube-Untertitel verwendet. Im SELFHTML-Aktuell-Bereich gab es bereits 2000 einen Artikel, der beschrieb, wie sich Streaming-Formate für Video und Audio mit SMIL steuern lassen.[2]

Leider litt SMIL lange unter fehlender Browserunterstützung, da Microsoft mit XAML einen alternativen Ansatz verfolgte. Als Google 2015 ankündigte, die Unterstützung für SMIL aus der Blink-Engine zu entfernen, um so die Perfomance bei Leistungstests zu verbessern[3], nahm Microsoft dies zum Anlass eine Implementierung in den Edge-Browser gar nicht mehr zu planen.

Da aber z.B das zu Google gehörende YouTube SMIL verwendet, ist es um eine Entfernung von SMIL ruhig geworden. Mit dem Umstieg von Edge auf Googles blink-Engine gibt es nun einen durchgehenden Browsersupport.

Browserunterstützung
caniuse.com


  1. Das Grundelement animate
  2. Animationen steuern
    • SMIL durch Events steuern
    • Animationen verknüpfen
      • repeat(n)
    • Aufbauende Animationen
      • additive
      • accumulate
  3. animateMotion
    • mpath
    • rotate
  4. animateTransform
  5. set



Einbindung

Mit dem animate-Element können Sie alle 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.

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.

Achtung!

Nutzer des Firefox können SMIL im Frickl nicht ausprobieren, da die animate-Elemente nicht gerendert werden.
Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
Animation mit SMIL ansehen …
<ellipse cx="100" cy="100" rx="50" ry="50" fill="var(--red)">
	<animate 
		attributeName="ry" 
		to="100" 
		dur="3s"
	/> 
</ellipse>
<rect x="250" y="50" width="100" height="100" rx="50" ry="50" fill="var(--yellow)">
	<animate 
		attributeName="rx" 
		to="0" 
		dur="3s" 
	/>
	<animate 
		attributeName="ry" 
		to="0" 
		end="3s" 
	/> 
</rect>
<path d="m450,50 h100 l-50,100z" fill="var(--green)" stroke="transparent" stroke-width="5">
	<animate attributeName="fill" to="transparent" begin="1s" dur="3s" fill="freeze" />
	<animate attributeName="stroke" to="var(--green)" begin="1s" dur="3s" fill="freeze" />
	<animate attributeName="stroke-width" from="0" to="5" begin="1s" dur="3s" fill="freeze" />
</path>

Der vertikale Radius der linken Ellipse wird von 50 auf 100 (dimensionslose Einheiten) 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.



Alternativ können Sie animate-Elemente mit einem href-Attribut mit dem zu animierenden Element verknüpfen.

Verknpüpfung über die id ansehen …
<circle id="ampel" cx="100" cy="100" r="50" fill="var(--red)" />
    
<animate href="#ampel"
     attributeName="fill" 
     values="var(--red); var(--yellow); var(--green); var(--blue)" 
     calcMode="discrete"
     dur="4s" 
     repeatCount="99" 
/>

Der Kreis über seine id mit dem animate-Elemente verknüpft. Dabei wird der zu animierenden Eigenschaft fill über das values-Attribut eine Liste mit 4 Farbwerten zugeordnet.

Attribute

Was und wie animiert wird, können Sie über die Attribute des animate-Elements festlegen. (Sie gelten aber auch für die weiteren Animations-Elemente wie animateMotion, animateTransform und set.)

  • attributeName legt fest, welches Eigenschaft animiert werden soll. Falls Sie mehrere Eigenschaften ändern wollen, verwenden Sie mehrere animate-Elemente.
  • attributeType teilt dem Browser mit, 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.

Zeiten setzen

Mit den Attributen begin, end und dur können Sie Anfang, Dauer und Ende der Animation festlegen.

  • begin: Anfangszeitpunkt (Standard: 0s)
  • end: Ende der Animation
  • dur: Dauer (duration) (Standard: indefinite → Animation startet nicht)

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

In SMIL/Animationen steuern wird gezeigt, wie sich Events und sycbase-values mit Zeitangaben kombinieren lassen.

Wenn Sie begin weglassen, wird die Animation sofort gestartet. Dann müssen Sie aber einen Wert für dur oder end festlegen.

Eine Festlegung für end ist nicht notwendig, wenn Sie eine Dauer angegeben haben.


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 (Standardwert: 1 → Animation wird einmal durchgeführt)
  • indefinite: nicht festgelegt, also unendlich weiterlaufend

Daneben können Sie mit repeatDur auch die Dauer der Wiederholungen setzen.

Einschränkung der Animationsdauer

Mit den min- und max-Attributen können Sie die aktive Dauer der Animation einschränken.[4][5]

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.

Dies entspricht bei …

restart

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

Folgende Angaben sind möglich:

  • always: (Standardwert) Animation kann grundsätzlich jederzeit neu gestartet werden
  • whenNotActive: Animation kann nicht neu gestartet werden, falls sie gerade läuft
  • never: läuft nur einmal, darf nie wiederholt werden.

Zustände setzen

Mit den Attributen from, to und by können Sie die Änderung der Werte des zu animierenden Attributs festlegen. Dabei sollten die Werte dem jeweiligen Typ entsprechen, den auch das Attribut verlangt, d. h. bei der Veränderung eines Radius sollte to keinen Farbwert erhalten.

  • from: legt den Anfangswert fest (wird ignoriert, wenn ein values-Wert gesetzt wird)
  • to: legt den Endwert fest (wird ignoriert, wenn ein values-Wert gesetzt wird)
  • by: legt fest, um welchen Wert der Ausgangszustand geändert (=addiert) wird.


Werte mit by ändern ansehen …
<rect x="110" y="10" height="100" width="100" fill="#dfac20">
  <animate attributeName="height" 
    begin="click" 
    by="100" 
    dur="1s" 
    fill="freeze"
  />
</rect>

Das Rechteck hat eine Höhe von 100. 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 200 (dimensionslosen Einheiten).

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.

values = Verwendung mehrerer Werte ansehen …
<circle id="ampel" cx="100" cy="100" r="50" fill="var(--red);" />
    
<animate href="#ampel"
     attributeName="fill" 
     values="var(--red); var(--yellow); var(--green); var(--blue)" 
     calcMode="discrete"
     dur="4s" 
     repeatCount="99" 
/>

Der Kreis über seine id mit dem animate-Elemente verknüpft. Dabei wird der zu animierenden Eigenschaft fill eine Liste mit 4 Farbwerten zugeordnet.

mehrstufige Animationen

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.

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 href="#auto" x="20" y="20" fill="#dfac20" >
      <animate
        attributeName="x"
        dur="5s"
        values="20; 120; 220; 320; 420; 520; 620"
        calcMode="discrete" />
     </use>
	  
     <use href="#auto" x="20" y="100" fill="#5a9900" >
       <animate
        attributeName="x"
        dur="5s"
        values="20; 200; 620"
        calcMode="paced" />
     </use>
	  
    <use href="#auto" x="20" y="180" fill="#c32e04" >
      <animate
        attributeName="x"
        dur="5s"
        values="20; 200; 620"
        calcMode="linear" />
     </use>

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.

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.

Übergangssteuerung mittels Bézier-Kurven im spline-Modus ansehen …
<use 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"
  />
</use>
<text x="10" y="60">keySplines="0 0 1 1" values="0; 800"</text>
	  
<use 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"
  />
</use>
<text x="10" y="140">keySplines=".5 0 .5 1" values="0; 800"</text>  
	  
<use 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"
    />
</use>
<text x="10" y="220">keySplines=".0 .75 .25 1" values="0; 800"</text>  
	  
<use 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"
  />
</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, sodass 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 Einheiten 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.

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.


Hüpfender Ball mit keyTimes ansehen …
<circle id="ball" fill="white" cx="100" cy="50">
<animate
	href="#ball"
	attributeName="cy"
	to="450"
	dur="3s"
	begin="click"
	calcMode="spline"
	values="50; 450; 150; 450; 225; 450; 275; 450; 375; 450"
	keyTimes="0; 0.12; 0.24; 0.36; 0.48; 0.6; 0.72; 0.84; 0.9; 1"
	keySplines="0.42 0 1 1;
      0 0 0.59 1;
     	0.42 0 1 1;
     	0 0 0.59 1;
      0.42 0 1 1;
      0 0 0.59 1;
      0.42 0 1 1;
      0 0 0.59 1;
      0.42 0 1 1"
	fill="freeze"
/>


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.


Siehe auch

Quellen

  1. ↑ Das W3C hat die Weiterentwicklung von SMIL zum 01.04.2012 eingestellt
    W3C: The SYMM WG is closed since 01 April 2012.
  2. ↑ SELFHTML-Aktuell: Streaming Media via HTTP/SMIL von Henk Strobel vom 31.10.2000
  3. ↑ google: blink-dev Intent to deprecate: SMIL vom 28.04.2015
  4. ↑ W3C: Computing the active duration
  5. ↑ CSS-Tricks: Restricting the active duration of an element using min and max

Weblinks

  • metamorphant.de: reducing a logo to first principles Animating with SVG and SMIL
    (3-teiliges, umfangreiches Tutorial, wie man ein Logo entwickelt, auf wenige Grundformen reduziert und dann mit SMIL animiert)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SMIL&oldid=91532“