SVG/Tutorials/Shape-Morphing: Unterschied zwischen den Versionen
K (T) |
(MorphSVGPlugin) |
||
| Zeile 145: | Zeile 145: | ||
== Alternative mit JavaScript == | == Alternative mit JavaScript == | ||
| − | + | === GreenSock MorphSVGPlugin === | |
| + | Das '''GreenSock MorphSVGPlugin'''ermöglicht es Formen mithilfe von JavaScript zu morphen.<ref>css-tricks: https://css-tricks.com/greensock-morphsvgplugin/ GreenSock MorphSVGPlugin]</ref> Was es gegenüber anderen Plugins auszeichnet, ist, dass die Anzahl der Koordinaten der zu morphenden Formen nicht identisch sein muss. Mit einem <code>shapeindex</code> kann man kontrolieren, welche Punkte mit welchen verschmelzen, um glattere und ansehnlichere Animationen zu erreichen. | ||
| + | *Beispiele auf [http://codepen.io/collection/naMaNQ/ codepen]<ref>codepen: [http://codepen.io/collection/naMaNQ/ MorphSVGPlugin] Examples</ref> | ||
| + | |||
| + | Um es kommerziell zu nutzen, müssen Sie Mitglied im [http://greensock.com/club/ Green Sock Club] werden. | ||
== Weblinks == | == Weblinks == | ||
Version vom 11. Oktober 2015, 06:17 Uhr
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.
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
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.
<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 x="250" y="70">Bewegen Sie die Maus über das Sechseck; zum Beenden klicken Sie auf die Figur.</text>
komplexere Formen
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.
<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>
So wird das Rechteck zum Kreis und verharrt dann, bis es zum Dreieck wird und dann nach einer Pause wieder zum Kreis.
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]
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]
<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>
- 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.
- 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
Alternative mit JavaScript
GreenSock MorphSVGPlugin
Das GreenSock MorphSVGPluginermö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 Mitglied im Green Sock Club werden.
Weblinks
- ↑ css-tricks.com: How SVG Shape Morphing Works
- ↑ tavmjong.free.fr: Tavmjong Bah's Blog SVG Path-Morphing am Beispiel des Batman-Zeichens
- ↑ tympanus.net: Elastic SVG-Elements
- ↑ wikipedia: Entwicklung der besonderen Ampelmännchen in der DDR
- ↑ css-tricks: https://css-tricks.com/greensock-morphsvgplugin/ GreenSock MorphSVGPlugin]
- ↑ codepen: MorphSVGPlugin Examples
Deutsch:
- drweb.de: Animiertes SVG-Morphing mit Illustrator
- theappguruz: theappguruz.com SVG-Shape-Morphing mit JavaScript
Englisch:
- noahblon An Intro to SVG Animation with SMIL
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.