Web SVG Animationen
Dieser zweiteilige Beitrag behandelt Animationen von SVG Komponenten im Kontext einer Angular Anwendung.
Die Grundlagen von SVG Komponenten in Angular wurden in diesem Artikel erläutert, in diesem Artikel werden die Grundlagen für Animationen vermittelt.
Vorweg ein paar Worte zum Thema SVG Elementen:
Ebenso wie normale HTML-Elemente können SVG-Elemente in Angular Komponenten eingebunden werden.
Wenn komplexere SVG-Grafiken per Angular anzubinden sind, bietet es sich an, die Grafik als eigene Angular-Komponente auszulegen, in der die SVG-Datei als templateUrl referenziert wird.
Damit müssen die einzelnen SVG-Elemente nicht in eine andere Template-Datei hineinkopiert werden.
Dadurch wird es später gegebenenfalls einfacher, die SVG-Grafik zu ersetzen, etwa wenn vom Grafiker eine aktualisierte Version geliefert wird.
Der geschickte Umgang mit dem Thema Binding bleibt einem anderen Beitrag vorbehalten.
Soll eine SVG-Grafik lediglich wie ein normales Bild angezeigt werden, dass heißt sie kommt ohne dynamisches Binding aus, so kann die SVG-Grafik auch einfach per <img>-Tag eingebunden werden.
Animationen
Genauso wie es verschiedene Varianten bei der Einbindung von SVG-Grafiken in Angular-Anwendungen gibt, sind auch unterschiedliche Optionen zur Animation möglich. Die jeweiligen technischen Varianten bringen ihre spezifischen Vor- und Nachteile mit sich. So lassen sich beispielsweise Grafiken, die per <img>-Tag eingebunden wurden, nur als ganzes animieren. Grund dafür ist, dass der Inhalt von <img>-Elementen als Bild dargestellt wird. Es wird unterhalb von <img>-Elementen keine weitere DOM-Struktur aufgebaut, auf die zugegriffen werden könnte. Auch bei SVG-Grafiken kann somit nicht auf Unterbereiche Einfluss genommen werden.
Im folgenden werden die unterschiedlichen Varianten von SVG-Animationen zunächst technisch vorgestellt und die jeweiligen Eigenschaften herausgestellt. Da<img>nach folgt eine Bewertung und Empfehlung zum Einsatz in der Praxis.
Bei konkreten Fragestellungen zu Ihrem Projekt unterstützen wir Sie gerne in Form von Workshops oder Beratung. Sprechen Sie uns dazu einfach an.
SMIL (Synchronized Multimedia Integration Language)
Ein naheliegende Variante ist, die Animationsmöglichkeiten zu nutzen die das SVG-Format selbst bietet.
<rect x="175" y="50" width="150" height="150" fill="lightgreen" stroke="darkgreen">
<animateTransform
repeatCount="indefinite"
attributeName="transform"
type="rotate"
from="0 250 125"
to="360 250 125"
begin="0"
dur="5s" />
</rect>Typischerweise wird diese Variante genutzt, wenn die Animationen durch einen Grafiker mit speziellen Design-Werkzeugen konzipiert und in die Grafik eingebettet wurden.
In der Regel hat man es dann mit komplexen Animationen zu tun, auf die man als Entwickler keinen Einfluss nimmt.
Diesen Vorteil von komplex choreographierten Animationen steht der Nachteil gegenüber, dass die Integration in die Gesamtanwendung und Komponentenuebergreifende Synchronisierung von Animationen schwierig ist.
Der Einsatzzweck dieser Art von Animationen beschränkt sich damit auf die SVG-Elemente die ohnehin isoliert, also per <img>-Element, in die Anwendung eingebaut werden. Weiterhin ist zu beachten, dass die Entwickler des Chrome-Browsers angekündigt haben diese Art der SVG-Animationen in Zukunft nicht mehr unterstützen zu wollen, siehe auch hier.
CSS-Animationen
In heute verbreiteten Browsern bietet CSS einfache, aber trotzdem umfangreiche Möglichkeiten für Animationen. Während HTML als Markup-Format zum Aufbau der Dokumentstruktur verwendet wird, wird CSS für das Styling verwendet. Daher passt es auch gut, CSS zum Implementieren der Animationen zu nutzen. CSS-Animationen lassen sich auf beliebige DOM-Inhalte und damit auch auf SVG-Elemente anwenden. Wie schon in Abschnitt über „SVG Animationen“ beschrieben, können auch CSS-Animationen direkt in die SVG-Grafik eingebettet werden.
<style>
@keyframes rotation {
0% { transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
#css-rotate:hover {
animation: rotation 5s infinite linear;
transform-origin: 250px 125px;
}
</style>
<rect id="css-rotate"
x="175"
y="50"
width="150"
height="150"
fill="lightgreen"
stroke="darkgreen">
</rect>Diese Variante kann ebenfalls genutzt werden, wenn Animationen direkt in die SVG-Grafik eingebettet werden sollen.
Wird die Grafik direkt per <svg>- oder auch als <object>-Element eingebunden, so können die Animationen in diesem Fall jedoch auch aus der Anwendung heraus gesteuert werden.
Da die meisten Web-Entwickler ohnehin mit CSS vertraut sind, können Animationen so auch von diesen (mit) gepflegt werden.
Ein Vorteil gegenüber SMIL-Animationen ist auch, dass CSS-Animationen wiederverwenbar sind:
Einmal angelegt, können sie anschließend an verschiedensten Stellen genutzt werden.
Im Gegensatz zu SMIL-Animationen können jedoch weniger Eigenschaften per CSS animiert werden.
Generell gilt zum Besipiel, dass SVG-Präsentation-Attribute zwar per SMIL, nicht aber per CSS animiert werden können.
Als SVG-Presentation-Attribute werden solche Attribute bezeichnet, die die Form und das Aussehen der SVG-Elemente beschrieben.
Bei SVG-Pfaden (<path>-Element) können per SMIL zum Beispiel die Pfad-Daten (angegeben per d=""-Attribut) animiert werden.
Dies ist mit CSS nicht möglich.
Auch Positions-Animationen von SVG-Elementen sind per CSS etwas umständlicher, da die Position eines Elementes nicht direkt verändert werden kann, sondern das Element nur per CSS-transforms relativ zu seiner Ursprungs-Position verschoben werden kann.
Das kann etwa dann unübersichtlich werden, wenn mehrere Elemente gegeneinander verschoben und trotzdem weiterhin miteinander interagieren sollen.
CSS-Animationen werden vor allem in modernen Web-Anwendungen mit JavaScript kombiniert - zum Beispiel per Web Animations API - um anspruchsvolle, dynamische Grafiken umzusetzen.
Auf lange Sicht planen Browserhersteller, die SMIL-Animationen durch CSS-Animationen in Kombination mit JavaScript und der Web Animations API zu ersetzen.
Im Folgeartikel betrachten wir, wie Angular SVG Animationen unterstützt und worauf es zu achten gilt.
Hier geht es zum Artikel: Angular SVG Animationen
Zu den Themen Angular, Architektur von SPA Anwendungen und TypeScript bieten wir sowohl Beratung, Entwicklungsunterstützung als auch passende Schulungen an.
Auch für Ihren individuellen Bedarf können wir Workshops und Schulungen anbieten. Sprechen Sie uns gerne an.