SVG/Tutorials/SVG und JavaScript/Animation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
← DOM-Scripting
SVG und JavaScript
(Übersicht)
Datenvisualisierung →

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.

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:

Beispiel ansehen …
function animiere() { 
  var ladebalken = document.getElementById('ladebalken');
  ladebalken.animate(
    [
      {
        width: '20px',
        fill: 'green'
      }, {
        width: '200px',  
        fill: 'lime'
      }
    ], {
      duration: 2000,
      iterations: 1,
      fill: 'forwards'
    })
  };
ansehen …

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 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 * π) anpassen und die stroke-width auf den doppelten Radius erhöhen, erhalten Sie nun ein Kreissegment.

Dies kann alles mit CSS erreicht werden; für die Berechnung bietet sich jedoch der Einsatz von JavaScript an.

Pie Timer ansehen …
code
ansehen …

ToDo (weitere ToDos)

--Matthias Scharwies (Diskussion) 07:02, 29. Jul. 2018 (CEST)

Zahnräder:

Schrift von Zauberhand[Bearbeiten]

Information

Schrift in Pfade umwandeln

Leider gibt es keinen Königsweg Schrift zu vektorisieren. In Programmen wie Inkscape können Sie Text mit 

Objekt > Objekt in Pfad umwandeln
vektorisieren. 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.

erster Versuch mit SMIL ansehen …
  <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>
Die von Hand vektorisierte Schrift wird nun analog zu den bisherigen Beispielen mit einer gestrichelten Kontur versehen, die durch stroke-dashoffset außerhalb des sichtbaren Fläche positioniert ist und erst durch die Animation hereingeschoben wird.
ansehen …

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.[3]

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.

Beispiel 
var path = document.querySelector('.handschrift');
path.getTotalLength();


zweiter Versuch

ToDo (weitere ToDos)

  • Pfade aus 1. Beispiel einzeln notieren
  • Länge auslesen
  • einzeln animieren
--MScharwies (Diskussion) 06:45, 23. Mär. 2016 (CET)


  • 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

Alternativen:

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[4] vor, mit dem beliebige Formen in Pfade umgewandelt und dann gezeichnet werden.[5]

DrawSVG für jQuery – animierte Pfade beleben deine Website.[6]


← DOM-Scripting
SVG und JavaScript
(Übersicht)
Datenvisualisierung →

Quellen[Bearbeiten]

  1. ↑ sarasoueidan: Art-Directing SVG Images With The viewBox Attribute How-To, Notes, Tips and Why We Need A viewBox Property in CSS
  2. ↑ smashingmagazine: Designing A Flexible, Maintainable CSS Pie Chart With SVG von Lea Verou (28.07.2015)
  3. ↑ ref:tutsplus: sign-on-the-dotted-line-animating-your-own-svg-signature-
  4. ↑ maxwellitto.github: vivus
  5. ↑ drweb.de: Flexibel: Vivus-Framework animiert SVG mit JavaScript
  6. ↑ drweb.de: DrawSVG für jQuery – animierte Pfade beleben deine Website

Weblinks[Bearbeiten]

Line-Animation[Bearbeiten]

Convert Text to Path in Inkscape[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Tutorials/SVG_und_JavaScript/Animation&oldid=65886“