SVG/Anwendung und Praxis/Shape-Morphing

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel lernen Sie, wie Sie Shape-Morphing-Animationen erstellen können. Beim Shape-Morphing wird eine geometrische Form in einem oder mehreren fließenden Zwischenschritten in eine andere verwandelt.

  • SVG 1.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

In CSS kann man mit :hover oder auch transition Stileigenschaften wie Farbe oder auch Abmessungen ändern. In SVG können Sie darüber hinaus bei unregelmäßigen Formen wie Polygonen oder Pfaden die Koordinaten ändern, so dass neue Formen entstehen können.

Dies können Sie am Einfachsten mit Hilfe von SMIL direkt im SVG-Code erreichen. Da der Internet Explorer (und bald auch Chrome) SMIL nicht unterstützt, stellen wir Ihnen auch Alternativen mit JavaScript und CSS vor.


Inhaltsverzeichnis

[Bearbeiten] Funktionsweise

Das XML-Attribut d beinhaltet die Pfadkommandos und die dazugehörigen Koordinaten. Das eigentlich inhaltsleere path-Element erhält nun ein Kind-Element animate.

Die unterschiedlichen Koordinaten können entweder mit from to oder bei mehreren Animationsschritten die einzelnen Schlüsselzustände in einer mit Semikolon getrennen values-Liste notiert werden.


Beispiel ansehen …
<path d="M100,250 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0">
  <animate attributeName="d" 
    values="M100,250 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0;
            M100,250 l18,-60 l-48,-40 l60,0 l20,-60 l20,60 l60,0 l-48,38 l17,60 l-49,-38 l-49,38;
            M100,250 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0;"
    dur="2s" 
    repeatCount="indefinite" 
  />
</path>
 
<path id="eins" d="M420,250 l-40,-80 l40,-80 h100 l40,80 l-40,80Z">
  <animate attributeName="d" 
           values="M420,250 l-40,-80 l40,-80 h100 l40,80 l-40,80Z;
                   M400,250 l0,-80 l0,-80 h140 l0,80 l0,80Z;
                   M420,250 l-40,-80 l40,-80 h100 l40,80 l-40,80Z;"
           begin="eins.mouseover"
           end="eins.click"
           dur="2s"
           repeatCount="indefinite" 
  />	
</path>
<text>Bewegen Sie die Maus über das Sechseck; zum Beenden klicken Sie auf die Figur.</text>
Die Kanten des Fünfecks bestehen aus jeweils 2 Linien, die während der Animation nach innen rücken und so einen Stern bilden.
Die Kanten des Sechsecks richten sich während der Animation so aus, dass ein Rechteck entsteht. Sie können die Animation starten, wenn Sie mit der Maus über die Figur fahren und Sie beenden, wenn Sie darauf klicken.


Beachten Sie: Um eine flüssige Animation zu erreichen, muss die Anzahl der Koordinaten immer identisch sein; ansonsten springt die Animation zwischen den Zuständen.

[Bearbeiten] komplexere Formen mit Kurven

Sie können auch komplexere Formen wie Kurven morphen. Hier empfielt es sich das Pfadkommando für kubische Bézier-Kurven zu verwenden, mit dem Sie aber auch gerade Linien ziehen können, wenn Sie die Kontrollpunkte auf (0,0) setzen.

Beispiel ansehen …
<path d="M100,50 c0,0 0,0 100,0 0,0 0,0 0,100 0,0 0,0 -100,0 0,0 0,0 0,-100;">
  <animate attributeName="d" 
	   values="M100,50 c0,0 0,0 100,0 0,0 0,0 0,100 0,0 0,0 -100,0 0,0 0,0 0,-100;
                   M100,50 c46,-46 92,-9 100,0 0,0 46.5,46 0,100 0,0 -45,49 -100,0 0,0 -46,-46 0,-100;
                   M100,50 c46,-46 92,-9 100,0 0,0 46.5,46 0,100 0,0 -45,49 -100,0 0,0 -46,-46 0,-100;
                   M100,50 c0,0 0,0 50,0 0,0 0,0 50,0 0,0 0,0 -50,120 0,0 0,0 -50,-120;
                   M100,50 c0,0 0,0 50,0 0,0 0,0 50,0 0,0 0,0 -50,120 0,0 0,0 -50,-120;
                   M100,50 c46,-46 92,-9 100,0 0,0 46.5,46 0,100 0,0 -45,49 -100,0 0,0 -46,-46 0,-100;
                   M100,50 c46,-46 92,-9 100,0 0,0 46.5,46 0,100 0,0 -45,49 -100,0 0,0 -46,-46 0,-100;
                   M100,50 c0,0 0,0 100,0 0,0 0,0 0,100 0,0 0,0 -100,0 0,0 0,0 0,-100;
                   M100,50 c0,0 0,0 100,0 0,0 0,0 0,100 0,0 0,0 -100,0 0,0 0,0 0,-100;"
	   dur="5s" 
           repeatCount="indefinite" 
  />
</path>
Damit die Formen nicht gleich wieder beginnen die nächste Form anzunehmen, werden die Werte doppelt eingetragen.
So wird das Rechteck zum Kreis und verharrt dann, bis es zum Dreieck wird und dann nach einer Pause wieder zum Kreis.

[Bearbeiten] Anwendungsbeispiele

Ein sehr gut erklärtes Anwendungsbeispiel bietet css-tricks, wo Chris Coyier einen fünfzackigen Stern zu einem Check-mark beim Online-Einkauf morphen lässt. Er erklärt (auf Englisch, aber mit vielen Grafiken) wie er die Koordinaten verschiebt. [1]

Eine weitere eindrucksvolle Animation ist die Präsentation verschiedener Batman-Logos in Tavmjong Bah's Blog. [2]

Auf Tympanus.net finden Sie elastische SVG-Elemente wie Eingabefelder oder Menüs, die durch bei Interaktionen zittern, wackeln und reagieren.[3]


[Bearbeiten] Ampelmännchen

Nach der Wiedervereinigung 1990 wurden die Ost-Ampelmännchen im Gebiet der ehemaligen DDR zunächst sukzessive gegen das westdeutsche Ampelmännchen ausgetauscht. Innerhalb der Bevölkerung kam es daraufhin zu Protesten, und das Ost-Ampelmännchen wurde etwas später in den Richtlinien für Lichtsignalanlagen als zulässiges Sinnbild aufgenommen. [4]


Beispiel ansehen …
<path fill="url(#verlaufGruen)"
         d="m146 226c-4-12 14-27-1-35-14-11-27-23-40-35C83 174 66 199 47 218 35 207 22 195 12 182c4-12 21 9 27-5 8-11 17-22 25-33 6-7 1-16-8-11
            C44 135 38 122 27 119 16 111 9 100 0 90-5 77 18 70 21 84 31 92 43 100 56 101 65 95 71 84 76 75 71 67 56 63 61 49 64 42 51 37 62 34 
            70 29 70 18 60 16 52 10 61 5 67 10 78 16 83-1 93 7c10 6 21 10 31 16 5 6 0 18 12 19 7 0 14 12 3 9-11-4-23 2-26 14 2 73 81 116 64 131
            -4 5-24 31-31 31z" >
    <animate attributeName="d" 
             values="m146 226c-4-12 14-27-1-35-14-11-27-23-40-35C83 174 66 199 47 218 35 207 22 195 12 182c4-12 21 9 27-5 8-11 17-22 25-33 
                     6-7 1-16-8-11C44 135 38 122 27 119 16 111 9 100 0 90-5 77 18 70 21 84 31 92 43 100 56 101 65 95 71 84 76 75 71 67 56 
                     63 61 49 64 42 51 37 62 34 70 29 70 18 60 16 52 10 61 5 67 10 78 16 83-1 93 7c10 6 21 10 31 16 5 6 0 18 12 19 7 0 14 
                     12 3 9-11-4-23 2-26 14 2 73 81 116 64 131-4 5-24 31-31 31z;
		     m146 226c-4-12 14-27-1-35-14-11-27-23-40-35C83 174 66 199 47 218 35 207 22 195 12 182c4-12 21 9 27-5 8-11 17-22 25-33 
                     6-7 1-16-8-11C44 135 38 122 27 119 16 111 9 100 0 90-5 77 18 70 21 84 31 92 43 100 56 101 65 95 71 84 76 75 71 67 56 
                     63 61 49 64 42 51 37 62 34 70 29 70 18 60 16 52 10 61 5 67 10 78 16 83-1 93 7c10 6 21 10 31 16 5 6 0 18 12 19 7 0 14 
                     12 3 9-11-4-23 2-26 14 2 73 81 116 64 131-4 5-24 31-31 31z;
                     m143 212c-6 4-26 12-24 0 17-11-7-28-24-66-21 19-25 50-43 70-25-12-34-20-23-23 14-6 8 10 27-35 31-56 14-62 18-74-3-7 0 
                     7-9 12-12 2-24 16-34 13-10-8 4 6-7-5-3-6-1-7 1-9 11-6 1-1 12-7 9-5-3 1 9-3 9-9 9-7 15-19 4-8 2-11 11-16 9-5 17-6 11-9-
                     8-6-6-20-4-25 0-3 8-17 18-10 9 7 4 1 9 10 3 7 1 11-2 15 1 2-12 6 11 13 42 29 47 110 19 74-21-86-29-30-3 41-4 5 25 51 
                     13 55z;	
                     m143 212c-6 4-26 12-24 0 17-11-7-28-24-66-21 19-25 50-43 70-25-12-34-20-23-23 14-6 8 10 27-35 31-56 14-62 18-74-3-7 0 
                     7-9 12-12 2-24 16-34 13-10-8 4 6-7-5-3-6-1-7 1-9 11-6 1-1 12-7 9-5-3 1 9-3 9-9 9-7 15-19 4-8 2-11 11-16 9-5 17-6 11-9-
                     8-6-6-20-4-25 0-3 8-17 18-10 9 7 4 1 9 10 3 7 1 11-2 15 1 2-12 6 11 13 42 29 47 110 19 74-21-86-29-30-3 41-4 5 25 51 
                     13 55z;	
		     m146 226c-4-12 14-27-1-35-14-11-27-23-40-35C83 174 66 199 47 218 35 207 22 195 12 182c4-12 21 9 27-5 8-11 17-22 25-33 
                     6-7 1-16-8-11C44 135 38 122 27 119 16 111 9 100 0 90-5 77 18 70 21 84 31 92 43 100 56 101 65 95 71 84 76 75 71 67 56 
                     63 61 49 64 42 51 37 62 34 70 29 70 18 60 16 52 10 61 5 67 10 78 16 83-1 93 7c10 6 21 10 31 16 5 6 0 18 12 19 7 0 14 
                     12 3 9-11-4-23 2-26 14 2 73 81 116 64 131-4 5-24 31-31 31z;"
             dur="5s" 
             repeatCount="indefinite" />
</path>
Als Vorlage benutzte ich die in der Wikipedia vorhandene Grafik. Obwohl im SVG-Format, musste sie optimiert werden:
  • Im Code-Editor:
    • Gruppierungen und nicht verwendete Pfade löschen
  • In Inkscape:
    • Grafik skalieren
    • Pfade vereinfachen
  • Im SVG-Optimizerdie Dezimalstellen runden
  • Metadaten löschen

Das West-Ampelmännchen wurde dann in Inkscape als Schablone unter den optimierten Pfad gelegt und die Endpunkte der Pfade verschoben.

Beachten Sie:
  • Versuchen Sie die Punkte möglichst wenig zu verschieben, damit das Ineinanderfließen natürlicher aussieht.
  • Symmetrische Figuren können nur einseitig definiert und dann mit transform="scale" noch einmal spiegelverkehrt dargestellt werden.

ToDo (weitere ToDos)

  • Ampelmännchen genauer zeichnen
  • Herzschlag
  • zu- und abnehmender Mond
  • territoriale Veränderungen
    • Westverschiebung Polens

[Bearbeiten] Alternative mit CSS

Da Koordinaten wie das d-Attribut des path-Elements noch nicht zu den Präsentationsattributen gehören, können sie nicht mit CSS festgelegt und folglich auch nicht animiert werden. Es gibt aber einen Umweg über die clip-path-Eigenschaft, mit der Sie ein Element beschneiden können.

  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
button {
  -webkit-clip-path: polygon(50% 0%, 65.5% 32.9%, 100% 38.2%, 75% 63.8%, 80.9% 100%, 50% 82.9%, 
       19.1% 100%, 25% 63.8%, 0% 38.2%, 34.5% 32.9%);
  clip-path: polygon(50% 0%, 65.5% 32.9%, 100% 38.2%, 75% 63.8%, 80.9% 100%, 50% 82.9%, 
       19.1% 100%, 25% 63.8%, 0% 38.2%, 34.5% 32.9%);
  background: #dfac20;
  width: 10em;
  height: 10em;
  transition: all 1s;
}
 
button:hover, button:focus {
  -webkit-clip-path: polygon(50% 0%, 75% 18.1%, 100% 38.2%, 90.45% 69.55%, 80.9% 100%, 50% 100%, 
       19.1% 100%, 8.55% 69.1%, 0% 38.2%, 25% 19.1%);
  clip-path: polygon(50% 0%, 75% 18.1%, 100% 38.2%, 90.45% 69.55%, 80.9% 100%, 50% 100%, 
       19.1% 100%, 8.55% 69.1%, 0% 38.2%, 25% 19.1%);
  background: #c32e04;
}
Der rechteckige Button mit je 10em Höhe und Breite wird mit clip-path zu einem fünfzackigen Stern beschnitten. In nicht unterstützten Browsern ist das originale Quadrat zu sehen.
Wenn er mit der Maus überfahren oder mit der Tastatur aktiviert wird, ändert er in allen Browsern seine Farbe und in unterstützten Browsern seine Form zu einem Fünfeck. Durch die Verwendung von transition entsteht ein weicher Übergang.
Empfehlung: Die Koordinaten für die Beschneidung erhalten Sie, wenn Sie in Inkscape oder Illustrator eine 100 x 100 px große Grafik erstellen und diese Pixelwerte dann manuell in Prozentwerte ändern.

Abgesehen von der mangelnden Browserunterstützung ist nur das Verändern von Polygonen, nicht jedoch von Formen, die Kurven und Bögen beinhalten, möglich. Hier ist der Einsatz von SMIL oder JavaScript zwingend erforderlich.

[Bearbeiten] Alternative mit JavaScript

[Bearbeiten] GreenSock MorphSVGPlugin

Das GreenSock MorphSVGPlugin ermöglicht es Formen mithilfe von JavaScript zu morphen.[5] Was es gegenüber anderen Plugins auszeichnet, ist, dass die Anzahl der Koordinaten der zu morphenden Formen nicht identisch sein muss. Mit einem shapeindex kann man kontrolieren, welche Punkte mit welchen verschmelzen, um glattere und ansehnlichere Animationen zu erreichen.

Um es kommerziell zu nutzen, müssen Sie jedoch Mitglied im Green Sock Club werden.

[Bearbeiten] Weblinks

  1. css-tricks.com: How SVG Shape Morphing Works
  2. tavmjong.free.fr: Tavmjong Bah's Blog SVG Path-Morphing am Beispiel des Batman-Zeichens
  3. tympanus.net: Elastic SVG-Elements
  4. wikipedia: Entwicklung der besonderen Ampelmännchen in der DDR
  5. css-tricks: https://css-tricks.com/greensock-morphsvgplugin/ GreenSock MorphSVGPlugin]
  6. codepen: MorphSVGPlugin Examples

Deutsch:


Englisch:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML