SVG SMIL Animationen – Events

SMIL – Synchronisation

SVG-Animationen mit SMIL können durch Aktionen und Events wie mouseover und click gestartet werden, das Ende einer Animation kann eine andere Animation einleiten. Animationen und Events triggern weitere Animation, um komplexe Abläufe zu synchronisieren.

SVG SMIL vs CSS-Keyframes-Animationen vs Javascript Web Animation

Gegenüber CSS-Keyframes-Animationen starten SMIL-Animationen in Abhängigkeit voneinander (z.B. begin="move1.end + 0.2s") und synchronisieren sich auf einer Timeline.

Wir können zwar SVG auch mit CSS animieren, aber CSS-Keyframes-Animationen haben enge Grenzen. CSS hat nur wenige Events, die eine Animation starten, pausieren oder stoppen können. Insbesondere kann eine CSS-Keyframes-Animation keine weiteren Animationen auslösen. Animationen mit CSS können nur über eine Zeitleiste synchronisiert werden.

SVG-SMIL-Animationen auslösen und zurücksetzen

Das Zeichnen des Quadrats begint mit dem Laden der SVG-Datei – das wäre einfach "begin=0" – und beginnt mit 1s Verzögerung erneut, wenn die Animation des Elements mit id="reset" abgelaufen ist.

<rect id="rect" width="200" height="200" x="150" y="150" stroke-dasharray="0 800 800 0"/>
<circle id="circle1" stroke-dasharray="0 628 628 0"  cx="250" cy="250" r="100"></circle>
<circle id="circle2" stroke-dasharray="0 628 628 0"  cx="250" cy="250" r="100"></circle>

<animate attributeType="XML" 
		xlink:href="#rect"
		id="rectstroke"
		attributeName="stroke-dashoffset" 
		from="0" to="800" 
		dur="3s"  
		fill="freeze"
		calcMode="spline"
		keyTimes="0;1"
		keySplines="0.42 0 1 1"
		begin="0; reset.end + 1s" />

begin kann eine einfache Zeitangabe wie 0s oder 750ms sein, aber auch durch eine Aktion wie begin="click + 1s" getriggert werden.

Das Zeichnen des ersten Kreises beginnt mit dem Ende der Animation des Quadrats.

<animate attributeType="XML"
		xlink:href="#circle1"
		attributeName="stroke-dashoffset" 
		from="0" to="628.32" 
		dur="1.5s"
		begin="rectstroke.end"  
		fill="freeze"/>

Animation zurücksetzen – kein Reset

Ein direktes Reset gibt es nicht. Eine Technik für ein Reset ist eine zweite Animation, die das Element wieder auf die initialen Werte zurückführt.

<rect width="100" height="100" >
	<animate id="anim1" attributeName="opacity" from="1" to="0.20" dur="2750ms" begin="0s; anim2.end" fill="freeze"/>
	<animate id="anim2" attributeName="opacity" from="0.20" to="1" dur="2750ms" begin="anim1.end" fill="freeze"/>
</rect>

Eine Alternative zur zweiten Animation ist die Beschreibung der Animation mit values="v1, v2, … " anstelle von from to

<rect width="100" height="100" stroke="blue" stroke-width="3" stroke-dasharray="0 400 400 0" fill="yellow">
	<animate attributeType="XML" 
		attributeName="stroke-dashoffset" 
		id="stroke"
		values="0; 400; 400; 0"
		dur="3s"  
		fill="freeze"
		keyTimes="0; 0.7; 0.9; 1"
		begin="0; stroke.end + 1s" />
</rect>

values ist eine Liste von Werten, die durch Semikolons voneinander getrennt sind. Dazu passend wird eine Liste von keyTimes für die Verteilung der Frames gesetzt.

Während die Animation mit from to ähnlich wie CSS Keyframes from to abläuft, ist die Beschreibung der Animation mit values und keyTimes mit CSS-Keyframes vergleichbar, die mit %-Angaben beschrieben werden.

@keyframes stroke {
	0%   { }
	7%   { }
	90%  { }
	100% { }
}