SVG/Tutorials/SVG und JavaScript/Animation
Informationen zu diesem Text
- Lesedauer
- 30min
- Schwierigkeitsgrad
- einfach
- Vorausgesetztes Wissen
- Grundkenntnisse in
• SVG
• JavaScript
Animationen mit JavaScript haben den Vorteil, dass sie anders als reine CSS-animation durch Interaktion mit dem Benutzer gesteuert werden können und dieser so immer die Kontrolle über die Webseite behält.
SMIL, das jetzt von allen Browsern unterstützt wird, kann dies mit Einschränkungen auch, „vermüllt“ aber das SVG-Markup durch seine Kindelemente und ist so nicht mehrfach verwendbar.
In diesem Kapitel werden einige Anwendungsbeispiele gezeigt, die ohne JavaScript so nicht möglich wären.
Inhaltsverzeichnis
Animationen mit WAAPI[Bearbeiten]
Mit der Web Animations API können Sie Präsentationseigenschaften schnell und komfortabel animieren und diese Animationen auch steuern. Leider ist sie aber eben auf diese beschränkt, sodass z.B. Shape-Morphing mittels Animation des d-Attributs oder Kamerafahrten, bei denen das viewBox-Attribut animiert wird, nicht möglich sind. [1]
Ladebalken[Bearbeiten]
Das erste Beispiel aus dem Einstieg in Web Animations-Tutorial kann auch in SVG realisiert werden:
function animiere() {
var ladebalken = document.getElementById('ladebalken');
ladebalken.animate(
[
{
width: '20px',
fill: 'green'
}, {
width: '200px',
fill: 'lime'
}
], {
duration: 2000,
iterations: 1,
fill: 'forwards'
})
};
In diesem Beispiel wird in einem script-Bereich eine Funktion (animiere) definiert. Diese Funktion legt sich eine Referenz auf das betreffende SVG-Element mit der id ladebalken in einer Variablen ab, um bequem darauf zurückgreifen zu können.
Beim Auslösen der Funktion werden die Breite und Farbe des rect-Elements, das diese id enthält, animiert.
Neben den keyframes der Animation werden mit duration: 2000 eine Dauer von 2 Sekunden (in Millisekunden) und mit iterations: 1 eine einmalige Durchführung festgelegt. fill: 'forwards' legt fest, dass das animierte Objekt im Endzustand der Animation bleibt und nicht zum Ausgangspunkt mit 1em Breite zurückspringt.
Pie Timer mit SVG[Bearbeiten]
Häufig soll eine Timer-Funktion auch grafisch visualisiert werden. Im Netz gibt es dazu unter dem Begriff pie timer mehrere meist mit canvas realisierte Beispiele. Da das Zeichnen von kreisförmigen Pfaden weder in canvas noch in SVG intuitiv zu nennen ist (David Gilbertson hat die diversen mathematischen Hürden in seinem Artikel A simple pie chart in SVG humorvoll aufs Korn genommen), wollen wir Ihnen einen alternativen Ansatz von Lea Verou vorstellen.[2]
Ein pie timer ist ja ein Kreisdiagramm, das auch durch ein circle-Element realisiert werden kann. Anstelle des Vollkreises soll aber nur ein (sich stetig vergrößerndes) Segment dargestellt werden.
Die durchgezogene Randlinie kann über stroke-dasharray gestrichelt werden. Wenn Sie den Intervall nun an die benötigte Länge (Kreisumfang U = 2r * π => 314.2) anpassen und die stroke-width auf den doppelten Radius erhöhen, erhalten Sie ein Kreissegment.
<circle r="100" fill="white" />
<circle r="50" fill="var(--yellow)"
stroke="var(--accent)"
stroke-width="100"
stroke-dasharray="52 52" />
Selbst die Animation des schrittweisen Füllens kann mit CSS erreicht werden; der Einsatz von JavaScript beschränkt sich auf das Steuern der Animation. Die Berechnung der einzelnen Schritte ist denkbar einfach: Startpunkt ist ein Strich von 0 und eine Lücke von 314 - am Endpunkt beträgt die Strichlänge 314 und die Lücke 0 - die Einteilung in 60 Schritte übernimmt CSS!
#timer {
fill: none;
stroke: var(--accent);
stroke-width: 100;
stroke-dasharray: 0 314;
transform: rotate(-90deg);
animation: timer 60s steps(60) forwards;
}
@keyframes timer {
from {
stroke-dasharray: 0 314;
}
to {
stroke-dasharray: 314 0;
}
}
In der Großansicht wird das Kreissegment teilweise nicht gerade gezeichnet (Firefox und Windows 10 auf Microsoft Surface; auch die png-Vorschau oben); in den meisten Browsern sieht es gut aus. In der kleineren Ansicht sind diese Fehler nicht mehr zu erkennen.
Animation mit der Web Animations API
Jede Animation sollte immer durch den Benutzer gesteuert werden können. Ein Timer soll gestartet, aber auch unter- oder abgebrochen werden können. Deshalb übertragen wir unsere CSS-Animation nun ins JavaScript:
...
var timer = document.querySelector( '#timer' );
// animate timer
var anim = timer.animate([{
strokeDasharray: '0 314'
}, {
strokeDasharray: '314 0'
}
], {
duration: 60*1000,
direction: 'normal',
iterations: Infinity,
easing: 'steps(60)',
playbackRate : 1
});
Das Script entspricht weitgehend der CSS-Animation. Ausnahmen sind …
-
stroke-dasharraywird, da in JavaScript keine Bindestriche erlaubt sind, zustrokeDasharrayin CamelCase-Schreibweise -
steps(60)wird in der easing-TimingOption notiert und erhält, da es ein String ist, Anführungszeichen
Die Kontroll-Buttons erhalten Eventlistener, die je eine Funktion PlayPause-Toggle und ein Abbruch der Animation veranlassen:
document.querySelector('#play').addEventListener('click', togglePlayPause);
document.querySelector('#stop').addEventListener('click', stopAnim);
var timer = document.querySelector( '#timer' );
// animate timer
...
function togglePlayPause () {
document.querySelector('output').innerText = ' togglePlayPause';
if (document.querySelector('#play').textContent == '❙❙') {
document.querySelector('#play').textContent = '►';
anim.pause();
} else {
document.querySelector('#play').textContent = '❙❙';
anim.play();
anim.playbackRate = 1;
}
}
function stopAnim () {
anim.playbackRate = 0;
anim.cancel();
}
Schrift von Zauberhand[Bearbeiten]
Information
Leider gibt es keinen Königsweg Schrift zu vektorisieren. In Programmen wie Inkscape können Sie Text mit
Objekt > Objekt in Pfad umwandelnvektorisieren. Allerdings werden Buchstaben hier nicht zu geschwungenen Linien, sondern als Flächen dargestellt, deren Rand dann doch wieder nur die Kontur der Buchstaben darstellt.
Text in SVG hat den Vorteil, dass er einerseits wirklich aus Text besteht, aber andererseits doch grafisch verändert und animiert werden kann.
Ein besonders attraktives Beispiel ist die Schrift von Zauberhand, die wie aus dem Nichts auf dem Bildschirm erscheint. In diesem Artikel wollen wir Ihnen die Voraussetzungen vorstellen und welche praktischen Probleme dabei aufgetreten sind.
<path d="M20,30 c-5,30 5,60 0,90 m30,-33 a16,16 1 1,0 0,33 c30,0 35,-50 35,-77 s-25,-10 -25,10 0,15
10,33 20,15 15,35
m60,-90 c-5,30 5,60 0,90 m17,-50 c0,-5 5,-5 10,0 s0,10 0,10 s-5,5 -12,-7
m0,20 v20 c0,8 20,5 30,-10 s -5,-10 -10,0 0,20 25,10 c10,-10 15,-20 10,-50 s-10,-10 -12,0
0,20 13,40 c10,-10 20,-20 20,3 s -10,10 -20,3
m28,-0 c10,0 20,-20 10,-20 c0,0 -5,-0 -10,5 s0,20 10,22 s5,0 10,-3
..."
stroke="black" stroke-width="3" fill="none"
stroke-dasharray="600 600" stroke-dashoffset="0">
<animate
attributeName="stroke-dashoffset"
from="600" to="0"
dur="20s"
repeatCount="indefinite" />
</path>
Fazit:
Der Pfad wird vom Browser nicht als ein einheitlicher Pfad gesehen, sondern setzt bei jedem moveTo wieder neu an.
Eine mögliche Lösung stellt Ian Yates vor, der seine, zugegeben kürzere, Unterschrift in verschiedene Pfade teilt und diese mit CSS animiert.[4]
Berechnen der Pfadlänge[Bearbeiten]
Um die verschiedenen Pfade nacheinander zu animieren, benötigen wir eine exakte Länge. Dies können Sie mit der JavaScript-Methode getTotalLength() auslesen.
var path = document.querySelector('.handschrift');
path.getTotalLength();
zweiter Versuch
ToDo (weitere ToDos)
- Pfade aus 1. Beispiel einzeln notieren
- Länge auslesen
- einzeln animieren
- getPointAtLength: gibt die x-y-Position eines Punktes auf dem Pfad zurück
- getTotalLength: ermittelt die Länge des Pfades
https://github.com/jarek-foksa/path-data-polyfill.js/
Information
Wenn Sie, wie im verlinkten Beispiel Füllung und Kontur von transparent auf farbig ändern würden, könnten Sie einen einzeiligen Text von links nach rechts schrittweise sichtbar werden lassen. Es hätte zwar nicht ganz den beabsichtigten Effekt, wäre aber eine einfachere Alternative.
Alternativen mit Frameworks
Dennis Potschien stellt in diesem Artikel das vivus-Framework[5] vor, mit dem beliebige Formen in Pfade umgewandelt und dann gezeichnet werden.[6]
DrawSVG für jQuery – animierte Pfade beleben deine Website.[7]
Quellen[Bearbeiten]
- ↑ sarasoueidan: Art-Directing SVG Images With The viewBox Attribute How-To, Notes, Tips and Why We Need A viewBox Property in CSS
- ↑ smashingmagazine: Designing A Flexible, Maintainable CSS Pie Chart With SVG von Lea Verou (28.07.2015)
- ↑ Sparkbox: How to Create an SVG Pie Chart—Code Along with Kasey (Video)
- ↑ ref:tutsplus: sign-on-the-dotted-line-animating-your-own-svg-signature-
- ↑ maxwellitto.github: vivus
- ↑ drweb.de: Flexibel: Vivus-Framework animiert SVG mit JavaScript
- ↑ drweb.de: DrawSVG für jQuery – animierte Pfade beleben deine Website
Weblinks[Bearbeiten]
- sitepoint: Bringing Pages to Life with the Web Animations API von Dudley Storey (10.10.2016)
- webdesigner-webdeveloper: Exploring the Web Animations API von Christian van Deursen (18.01.2015)
Line-Animation[Bearbeiten]
- codepen: animated signing of signature (by Gary Hepting)
- tutsplus: Sign on the Dotted Line: Animating Your Own SVG Signature
- css-tricks: SVG-Line animation works
- 24ways: animating-vectors-with-svg
- jake Archibald: animated-line-drawing-svg
- http://lazylinepainter.info/
- cssdeck: ironman-svg-line-animation
- medium.com: Masking SVG Animations
