<p>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 <a href="https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/">SVG-Serie</a> vorgestellt werden sollen.</p> <p><!--more--></p> <p>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.</p> <h2>SMIL - Standardisierung schützt vor dem Sterben nicht</h2> <p>In der SVG-Welt gibt es mit <a href="https://wiki.selfhtml.org/wiki/SMIL">SMIL</a> (auszusprechen wie englisch: <em>smile</em> - lächeln) einen XML-Dialekt für zeitsynchronisierte, multimediale Inhalte. Bei <a href="https://wiki.selfhtml.org/wiki/Museum/Selfhtml-aktuell">Selfhtml-aktuell</a> erschien im Oktober 2000 ein Artikel <a href="https://web.archive.org/web/20100731192358/http://aktuell.de.selfhtml.org/artikel/grafik/streaming">Streaming Media via HTTP/SMIL</a>, in dem mit SMIL verschiedene Audio-Dateien angegeben werden konnten, unter denen der Realplayer auswählen konnte. YouTube verwendet SMIL für Untertitel.</p> <p>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 <code>img</code>-Grafiken möglich sind.</p> <pre>&lt;rect width="100" height="100" rx="50" ry="50" fill="#dfac20"&gt; &lt;animate attributeName="rx" from="50" to="0" begin="1s" dur="3s" /&gt; &lt;animate attributeName="ry" from="50" to="0" begin="1s" dur="3s" /&gt; &lt;/rect&gt; </pre> <p>In <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Animation-01.html">diesem Beispiel</a> 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.</p> <pre>&lt;circle cx="200" cy="100" r="50" fill="#c32e04"&gt; &lt;animate id="An1" attributeName="cx" from="200" to="800" begin="kreis.click" dur="3s" fill="freeze" /&gt; &lt;animate id="An2" attributeName="cy" from="100" to="400" fill="freeze" begin="An1.end" dur="2s" /&gt; &lt;/circle&gt; &lt;circle cx="800" cy="500" r="50" fill="#5a9900"&gt; &lt;animate id="An3" attributeName="cx" from="800" to="100" fill="freeze" begin="An2.end+1s" dur="2s" /&gt; &lt;/circle&gt; </pre> <p>Der Beginn einer Animation kann wie oben durch eine Zeitangabe, wie in <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Animation-13.html">diesem Beispiel</a> durch ein Ereignis wie <code>click</code> 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.</p> <p>SMIL ermöglicht Animationen, die mit anderen Techniken nicht oder nur schwierig umzusetzen sind:</p> <ul> <li><strong>Shape-Morphing </strong>durch Animation von <code>path</code>-Daten (noch nicht mit CSS-Animation möglich)</li> <li><strong>Kamerafahrten</strong> durch Animation des <code>viewBox</code>-Attributs (entweder durch Animation der <code>transform</code>-Werte eines (beschnittenen) Elternelements oder mit JS möglich)</li> <li><strong>Synchronisieren</strong> und Sequenzierung <strong>mehrerer Animationen </strong>(in CSS nur durch manuelle Feinabstimmung mit den Werten von <code>animation-delay</code> und <code>animation-duration</code> möglich)</li> </ul> <p>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.</p> <p>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.<a id="a1" href="#f1">^[1]</a> 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 <strong><em>fakeSmile</em></strong> einen <a href="https://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Animation#Polyfills_f.C3.BCr_SMIL">Polyfill</a>, der Webseiten, die SMIL verwenden, weiter nutzbar lässt.</p> <h2>Animationen mit CSS</h2> <p>Seit auch Microsoft CSS-Animations für SVG-Elemente im Edge implementiert hat, <a id="a2" href="#f2">^[2]</a>, können Sie Animationen in SVG realisieren, die in allen modernen Browsern funktionieren.<br> Die Vorgehensweise ist einfach: Über die CSS-Eigenschaft <code>animation-name</code> (oder die <em>shorthand</em>-Eigenschaft <code>animation</code>) wird eine <code>@keyframes</code>-Regel aufgerufen, in der Anfangs- und Endpunkte, bzw. auch mögliche Zwischenschritte festgelegt sind.</p> <pre>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; } } </pre> <p>In <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/F%C3%BCllungen_und_Randlinien#animinierte_Randlinien">diesem Beispiel</a> wird die Randlinie des Texts durch <code>stroke-dasharray</code> gestrichelt und dann mit <code>stroke-dashoffset</code> verschoben. Diese Verschiebung wird nun animiert. Auf diese Weise können Sie alle <a href="https://wiki.selfhtml.org/wiki/SVG/Attribute/Pr%C3%A4sentationsattribute">Präsentationseigenschaften</a> bequem animieren.</p> <h3>Animation entlang eines Pfades</h3> <p>In SMIL kann man mit dem <code>animateMotion</code>-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 <em>motion-path</em> ein, die als <code><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation/offset">offset-path</a></code> standardisiert wurde. In Chrome 55 ist der neue Name bereits implementiert, in anderen Browsern funktioniert es noch nicht.</p> <pre> > .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%; } } </pre> <h2>Die Web Animations API</h2> <p>Mit JavaScript können Sie mit den <code>setInterval</code> und <code>requestAnimationFrame</code>-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. <a id="a3" href="#f3">^[3]</a> Die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Animation">Web Animations API </a>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.</p> <p>So können Animationen in SMIL und CSS zwar mit <code>begin</code> bzw. <code>animation-delay</code> verzögert gestartet, aber nicht angehalten und wiederaufgenommen werden. Die neuen Methoden <code>animation.pause()</code> und <code>animation.play()</code> ermöglichen eine einfache Steuerung mithlife des Animation-Objekts.</p> <p>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.</p> <h2>Quellen</h2> <ol> <li>google: blink-dev: <a id="f1" href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM">Intent to deprecate: SMIL</a> vom 28.04.2015 <a href="#a1">&#x21a9;</a></li> <li>microsoft.com: <a id="f2" href="https://status.modern.ie/csstransitionsanimationsforsvgelements">CSS Transitions &amp; Animations for SVG elements</a><a href="#a2">&#x21a9;</a></li> <li>Daniel Wilson: <a id="f3" href="http://danielcwilson.com/blog/2015/07/animations-intro/">Let’s talk about the Web Animations API</a><a href="#a3">&#x21a9;</a></li> </ol> <h2>SVG-Serie</h2> <ul> <li>Teil 1: <a href="https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/">SVG – ein Format für alle Fälle</a></li> <li>Teil 2: <a href="https://blog.selfhtml.org//2016/11/28/svg-2-was-lange-waehrt/">SVG 2: Was lange währt</a> <li>Teil 3: <a href="https://blog.selfhtml.org/2017/04/15/svg-animationen-zum-leben-erwecken/">Animationen: SVG zum Leben erwecken</a></li> <li>Teil 4: ein Bild sagt mehr als 1000 Worte: Infografiken mit SVG</li> <li>Teil 5: Datenvisualiserung mit SVG <em>(geplant für Juni 2021)</em></li> </ul>

<p>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 <a href="https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/">SVG-Serie</a> vorgestellt werden sollen.</p> <p><!--more--></p> <p>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.</p> <h2>SMIL - Standardisierung schützt vor dem Sterben nicht</h2> <p>In der SVG-Welt gibt es mit <a href="https://wiki.selfhtml.org/wiki/SMIL">SMIL</a> (auszusprechen wie englisch: <em>smile</em> - lächeln) einen XML-Dialekt für zeitsynchronisierte, multimediale Inhalte. Bei <a href="https://wiki.selfhtml.org/wiki/Museum/Selfhtml-aktuell">Selfhtml-aktuell</a> erschien im Oktober 2000 ein Artikel <a href="https://web.archive.org/web/20100731192358/http://aktuell.de.selfhtml.org/artikel/grafik/streaming">Streaming Media via HTTP/SMIL</a>, in dem mit SMIL verschiedene Audio-Dateien angegeben werden konnten, unter denen der Realplayer auswählen konnte. YouTube verwendet SMIL für Untertitel.</p> <p>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 <code>img</code>-Grafiken möglich sind.</p> <pre> &lt;rect w</p> width="100" height="100" rx="50" ry="50" fill="#dfac20"&gt; &lt;animate attributeName="rx" from="50" to="0" begin="1s" dur="3s" /&gt; &lt;animate attributeName="ry" from="50" to="0" begin="1s" dur="3s" /&gt; &lt;/rect&gt; </pre> <p>In <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Animation-01.html">diesem Beispiel</a> 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.</p> <pr re> &lt;circle cx="200" cy="100" r="50" fill="#c32e04"&gt; &lt;animate id="An1" attributeName="cx" from="200" to="800" begin="kreis.click" dur="3s" fill="freeze" /&gt; &lt;animate id="An2" attributeName="cy" from="100" to="400" fill="freeze" begin="An1.end" dur="2s" /&gt; &lt;/circle&gt; &lt;circle cx="800" cy="500" r="50" fill="#5a9900"&gt; &lt;animate id="An3" attributeName="cx" from="800" to="100" fill="freeze" begin="An2.end+1s" dur="2s" /&gt; &lt;/circle&gt; </pre> <p>Der Beginn einer Animation kann wie oben durch eine Zeitangabe, wie in <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Animation-13.html">diesem Beispiel</a> durch ein Ereignis wie <code>click</code> 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.</p> <p>SMIL ermöglicht Animationen, die mit anderen Techniken nicht oder nur schwierig umzusetzen sind:</p> <ul> <li><strong>Shape-Morphing </strong>durch Animation von <code>path</code>-Daten (noch nicht mit CSS-Animation möglich)</li> <li><strong>Kamerafahrten</strong> durch Animation des <code>viewBox</code>-Attributs (entweder durch Animation der <code>transform</code>-Werte eines (beschnittenen) Elternelements oder mit JS möglich)</li> <li><strong>Synchronisieren</strong> und Sequenzierung <strong>mehrerer Animationen </strong>(in CSS nur durch manuelle Feinabstimmung mit den Werten von <code>animation-delay</code> und <code>animation-duration</code> möglich)</li> </ul> <p>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.</p> <p>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.<a id="a1" href="#f1">^[1]</a> 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 <strong><em>fakeSmile</em></strong> einen <a href="https://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Animation#Polyfills_f.C3.BCr_SMIL">Polyfill</a>, der Webseiten, die SMIL verwenden, weiter nutzbar lässt.</p> <h2>Animationen mit CSS</h2> <p>Seit auch Microsoft CSS-Animations für SVG-Elemente im Edge implementiert hat, <a id="a2" href="#f2">^[2]</a>, können Sie Animationen in SVG realisieren, die in allen modernen Browsern funktionieren.<br> Die Vorgehensweise ist einfach: Über die CSS-Eigenschaft <code>animation-name</code> (oder die <em>shorthand</em>-Eigenschaft <code>animation</code>) wird eine <code>@keyframes</code>-Regel aufgerufen, in der Anfangs- und Endpunkte, bzw. auch mögliche Zwischenschritte festgelegt sind.</p> <pre> text {<br> fil</p> ll: none; stroke-width: 5px; stroke-dasharray: 10 50; animation: strokeAni 2s infinite linear; } @keyframes strokeAni { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } } </pre> <p>In <a href="https://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/Texteffekte#animinierte_Randlinien">diesem Beispiel</a> wird die Randlinie des Texts durch <code>stroke-dasharray</code> gestrichelt und dann mit <code>stroke-dashoffset</code> verschoben. Diese Verschiebung wird nun animiert. Auf diese Weise können Sie alle <a href="https://wiki.selfhtml.org/wiki/Referenz:SVG/Attribute/Pr%C3%A4sentationsattribute">Präsentationseigenschaften</a> bequem animieren.</p> <h3>Animation entlang eines Pfades</h3> <p>In SMIL kann man mit dem <code>animateMotion</code>-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 <em>motion-path</em> ein, die als <code><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation/offset">offset-path</a></code> standardisiert wurde. In Chrome 55 ist der neue Name bereits implementiert, in anderen Browsern funktioniert es noch nicht.</p> <pre> > .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%; } } </pre> <h2>Die Web Animations API</h2> <p>Mit JavaScript können Sie mit den <code>setInterval</code> und <code>requestAnimationFrame</code>-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. <a id="a3" href="#f3">^[3]</a> Die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Animation">Web Animations API </a>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.</p> <p>So können Animationen in SMIL und CSS zwar mit <code>begin</code> bzw. <code>animation-delay</code> verzögert gestartet, aber nicht angehalten und wiederaufgenommen werden. Die neuen Methoden <code>animation.pause()</code> und <code>animation.play()</code> ermöglichen eine einfache Steuerung mithlife des Animation-Objekts.</p> <p>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.</p> <h2>Quellen</h2> <ol> <li>google: blink-dev: <a id="f1" href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM">Intent to deprecate: SMIL</a> vom 28.04.2015 <a href="#a1">&#x21a9;</a></li> <li>microsoft.com: <a id="f2" href="https://status.modern.ie/csstransitionsanimationsforsvgelements">CSS Transitions &amp; Animations for SVG elements</a><a href="#a2">&#x21a9;</a></li> <li>Daniel Wilson: <a id="f3" href="http://danielcwilson.com/blog/2015/07/animations-intro/">Let’s talk about the Web Animations API</a><a href="#a3">&#x21a9;</a></li> </ol> <h2>SVG-Serie</h2> <ul> <li>Teil 1: <a href="https://blog.selfhtml.org/2016/11/23/svg-ein-format-fuer-alle-faelle/">SVG – ein Format für alle Fälle</a></li> <li>Teil 2: <a href="https://blog.selfhtml.org//2016/11/28/svg-2-was-lange-waehrt/">SVG 2: Was lange währt</a> <li>Teil 3: <a href="https://blog.selfhtml.org/2017/04/15/svg-animationen-zum-leben-erwecken/">Animationen: SVG zum Leben erwecken</a></li> <li>Teil 4: ein Bild sagt mehr als 1000 Worte: Infografiken mit SVG <em>(geplant für Mai 2017)</em></li> <li>Teil 5: Datenvisualiserung mit SVG <em>(geplant für Juni 2017)</em></li> </ul>