Wie SVG Shape Morphing funktioniert

Während das Animieren von SVG mit CSS einfach und bequem ist, kann CSS nicht alle möglichen SVG-Eigenschaften animieren. Zum Beispiel können alle Eigenschaften, die die *tatsächliche Form* der Elemente definieren, nicht in CSS geändert oder animiert werden. Sie können sie jedoch durch SMIL animieren. Sara Soueidan behandelt dies in ihrem Leitfaden zu SMIL hier auf CSS-Tricks, aber ich dachte, ich würde diese besondere Fähigkeit beleuchten.

Wichtigster Fakt: Die Formen müssen die gleiche Anzahl von Punkten haben

Andernfalls schlägt die Animation einfach fehl. Die Form verschwindet nicht oder so, aber sie wird nicht animiert.

Es ist nicht offensichtlich, wie viele Punkte eine Form hat, nur durch Betrachten des d (im Falle eines path) oder des points-Attributs (im Falle eines Polygons). Sie müssen also vielleicht einfach in einem Vektoreditor-Programm mit einer einzelnen Form beginnen und von dort aus arbeiten.

1. Beginnen Sie mit der kompliziertesten Form

In dieser Demo werde ich von einem Stern zu einem Häkchen morphen. Der Stern ist komplexer

Speichern Sie eine Kopie dieser SVG, dann erstellen Sie eine neue Kopie für die nächste Form.

2. Erstellen Sie die nächste Form mit denselben Punkten.

Ziehen Sie die Punkte herum, bis Sie Ihre nächste Form haben.

3. Verwenden Sie die Startform auf dem SVG-Formelement selbst

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

  </polygon>

</svg>

4. Fügen Sie ein Animationselement hinzu, das zur nächsten Form animiert

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

    <animate attributeName="points" dur="500ms" to=" ... shape 2 points ... " />

  </polygon>

</svg>

Diese Animation wird sofort ausgeführt, also müssen wir das etwas korrigieren.

5. Lösen Sie die Animationen nach Bedarf aus

SMIL kann Interaktionen wie Klicks und Hover verarbeiten, solange alles innerhalb der SVG selbst stattfindet. Zum Beispiel könnten Sie die Animation starten, wenn sie angeklickt wird, wie z.B.

<polygon id="shape" points=" ... shape 1 points ... ">

  <animate begin="shape.click" attributeName="points" dur="500ms" to=" ... shape 2 points ... />

</polygon>

Das ist ziemlich nett, aber es ist etwas einschränkend, da Sie nur Klicks von anderen Elementen innerhalb derselben SVG verarbeiten können. Vielleicht ist diese SVG nur ein Teil eines <button> und Sie möchten die Animation bei jedem Klick auf diesen Button ausführen.

Geben Sie der Animation zuerst eine ID, damit wir sie mit JavaScript finden können, und verhindern Sie dann, dass sie ausgeführt wird mit

<animate id="animation-to-check" begin="indefinite" ... />

Jetzt können Sie eine Referenz auf diese Animation erhalten und sie nach Belieben starten

animationToCheck = document.getElementById("animation-to-check");

// run this on a click or whenever you want
animationToCheck.beginElement();

Demo

Diese Demo hat tatsächlich vier Animationen. Eine zum Morphen des Sterns zu einem Häkchen, eine zum Ändern der Farbe und dann beide gleichen Animationen in umgekehrter Richtung. Das Klicken auf den Button prüft den Zustand des Buttons und führt dann die entsprechenden Animationen aus.

Sehen Sie den Pen Shape Morph Button von Chris Coyier (@chriscoyier) auf CodePen.

Wäre ziemlich cool für Diagramme, wie dieses alte Raphael-Demo