Matthias Scharwies: SVG - Grafiken mit Animationen zum Leben erwecken

Beitrag lesen

Weblog

SVG - Grafiken mit Animationen zum Leben erwecken

Matthias Scharwies (Versionen)
– Informationen zu den Bewertungsregeln

Animationen bringen, wie der Name schon sagt, Leben in statische Webseiten. Durch Bewegung können Sie nicht nur klickibunti Webseiten erstellen, sondern gezielt Benutzeraktionen verdeutlichen oder Inhalte ein- und ausblenden und so Zusammenhänge aufzeigen. In SVG können Sie dafür mehrere Techniken nutzen, die in diesem Teil der SVG-Serie vorgestellt werden sollen.

Schon lange hat sich im Webdesign mit HTML und CSS die Trennung von Inhalt und Design durchgesetzt, wobei JavaScript Benutzerinteraktionen und Animationen übernehmen sollte. Mit CSS-Transitions und Animations wurde es möglich, das Design mit Übergängen und Effekten so zu gestalten, dass Kritiker die Grenze zwischen Seiteninhalt und Design bereits wieder verwischt sehen.

SMIL - Standardisierung schützt vor dem Sterben nicht

In der SVG-Welt gibt es mit SMIL (auszusprechen wie englisch: smile - lächeln) einen XML-Dialekt für zeitsynchronisierte, multimediale Inhalte. Bei Selfhtml-aktuell erschien im Oktober 2000 ein Artikel Streaming Media via HTTP/SMIL, in dem mit SMIL verschiedene Audio-Dateien angegeben werden konnten, unter denen der Realplayer auswählen konnte. YouTube verwendet SMIL für Untertitel.

In SVG ermöglicht es SMIL, Elemente direkt zu animieren. Dies hat den Vorteil, dass keine externen (JavaScript)-Scripte eingebunden werden mussten und so Animationen selbst in eingebetteten img-Grafiken möglich sind.

<rect width="100" height="100" rx="50" ry="50" fill="#dfac20">
  <animate attributeName="rx" from="50" to="0" begin="1s" dur="3s" />
  <animate attributeName="ry" from="50" to="0" begin="1s" dur="3s" />
</rect>

In diesem Beispiel startet eine Animation nach 1 Sekunde und verwandelt den Kreis innerhalb von 3 Sekunden in ein Quadrat. Dabei wird sich der Umstand zunutze gemacht, dass der vermeintliche Kreis in Wirklichkeit ein gleichseitiges Rechteck mit abgerundeten Ecken ist, deren Werte nun auf 0 gesetzt werden. Mit unregelmäßigen Formen innerhalb von path-Elementen lassen sich so eindrucksvolle Shape-Morphing-Effekte realisieren.

<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>

Der Beginn einer Animation kann wie oben durch eine Zeitangabe, wie in diesem Beispiel durch ein Ereignis wie click oder durch Anfang oder Ende einer anderen Animation gestartet werden. Allerdings ist es nicht möglich, Animationen durch einen Klick auf einen externen Button auszulösen.

SMIL ermöglicht Animationen, die mit anderen Techniken nicht oder nur schwierig umzusetzen sind:

  • Shape-Morphing durch Animation von path-Daten (noch nicht mit CSS-Animation möglich)
  • Kamerafahrten durch Animation des viewBox-Attributs (entweder durch Animation der transform-Werte eines (beschnittenen) Elternelements oder mit JS möglich)
  • Synchronisieren und Sequenzierung mehrerer Animationen (in CSS nur durch manuelle Feinabstimmung mit den Werten von animation-delay und animation-duration möglich)

Leider wurde SMIL, obwohl bereits 1999 als Standard vom W3C festgelegt, nie in den Internet Explorer implementiert. Dies mag ein Grund sein, warum nur wenige Webseiten animierte SVG-Grafiken verwenden.

Diese geringe Verbreitung führt Google als Argument dafür an, die Unterstützung für SMIL aus der Blink-Engine entfernen. So können die Perfomance bei Leistungstests verbessert werden.[1] Animationen sollen künftig mit CSS-Animations oder mit der WebAnimations-API erfolgen. Seit Chrome 45 und Opera 32 erscheint in der Konsole ein Warnhinweis, dass SMIL obsolet ist und in Zukunft entfernt werden kann. Allerdings gibt es mit fakeSmile einen Polyfill, der Webseiten, die SMIL verwenden, weiter nutzbar lässt.

Animationen mit CSS

Seit auch Microsoft CSS-Animations für SVG-Elemente im Edge implementiert hat, [2], können Sie Animationen in SVG realisieren, die in allen modernen Browsern funktionieren.
Die Vorgehensweise ist einfach: Über die CSS-Eigenschaft animation-name (oder die shorthand-Eigenschaft animation) wird eine @keyframes-Regel aufgerufen, in der Anfangs- und Endpunkte, bzw. auch mögliche Zwischenschritte festgelegt sind.

text {
  fill: none;
  stroke-width: 5px;
  stroke-dasharray: 10 50;
  animation: strokeAni 2s infinite linear;
}

@keyframes strokeAni {
0% { stroke-dashoffset: 60; }
100% { stroke-dashoffset: 0; }
}

In diesem Beispiel wird die Randlinie des Texts durch stroke-dasharray gestrichelt und dann mit stroke-dashoffset verschoben. Diese Verschiebung wird nun animiert. Auf diese Weise können Sie alle Präsentationseigenschaften bequem animieren.

Animation entlang eines Pfades

In SMIL kann man mit dem animateMotion-Element Objekte nicht nur linear, sondern auch entlang von Pfaden bewegen. So werden Kurven, Schleifen und elliptische Umlaufbahnen möglich. Um dies auch mit CSS-Animation zu erreichen, führte Chrome die Eigenschaft motion-path ein, die als offset-path standardisiert wurde. In Chrome 55 ist der neue Name bereits implementiert, in anderen Browsern funktioniert es noch nicht.



.forward {
motion-path: path('M300,100h300v100h-300z');
animation: run 6s linear infinite;
}


.reverse {
motion-path: path('M300,100h300v100h-300z');
animation: run 6s linear reverse infinite;
}


@keyframes run {
0% {
motion-offset: 0;
}
to {
motion-offset: 100%;
}
}

Die Web Animations API

Mit JavaScript können Sie mit den setInterval und requestAnimationFrame-Methoden Animationen zeitlich steuern und so z.B auch CSS-Animationen aufrufen. Aufgrund dieser bisher schon bestehenden Alternativen stellen sich viele die Frage, ob eine neue API wirklich nötig ist. Daniel Wilson hat diese Befürchtungen in seinem sehr anschaulichen Tutorial treffend auf den Punkt gebracht. [3] Die Web Animations API soll aber nicht als weitere Ergänzung dienen, sondern die verschiedenen Technologien durch eine performante Umsetzung ersetzen und diese erweitern. Sie nutzt CSS-Animation und steuert diese mit vielen neuen Eigenschaften und Methoden.

So können Animationen in SMIL und CSS zwar mit begin bzw. animation-delay verzögert gestartet, aber nicht angehalten und wiederaufgenommen werden. Die neuen Methoden animation.pause() und animation.play() ermöglichen eine einfache Steuerung mithlife des Animation-Objekts.

Auch das bisher nur schwierig umzusetzende Verknüpfen mehrerer unabhängiger Animationen wird mit der WAAPI möglich. Sie können mehrere Animations- und Keyframe-Objekte gleichzeitig aufrufen und steuern.

Quellen

  1. google: blink-dev: Intent to deprecate: SMIL vom 28.04.2015 ↩
  2. microsoft.com: CSS Transitions & Animations for SVG elements↩
  3. Daniel Wilson: Let’s talk about the Web Animations API↩

SVG-Serie

Beitrag melden
–
Informationen zu den Bewertungsregeln