Formenwandelnde Symbole in Schaltfläche beim Klicken

Die Idee ist hier, ein SVG-Symbol in einem Button zu verwenden und dieses Symbol bei einem Klick auf den Button durch ein anderes auszutauschen. Ein Klick auf einen Button deutet oft darauf hin, dass eine Aktion ausgeführt wurde, daher kann der Wechsel von Symbolen eine nette UI-Touch sein, um die Kontextänderung anzuzeigen und zu bestätigen, dass die Aktion stattgefunden hat.

Ein möglicher Anwendungsfall könnte ein Download-Button sein. Das Symbol im Button könnte zunächst darauf hinweisen, dass der Button einen Download auslöst, sich aber in ein Häkchen ändern, wenn der Button geklickt wurde.

Siehe den Pen MorphSVG in Button on Click von Geoff Graham (@geoffgraham) auf CodePen.

Lassen Sie uns ein Snippet erstellen, das dieses Muster umsetzt, damit wir es in anderen ähnlichen Kontexten verwenden können.

Anforderungen

Obwohl wir dies als SVG-Snippet einreichen, werden wir uns auf GSAPs TweenMax verlassen, eine JavaScript-Bibliothek speziell für die Animation von SVG, und MorphSVG, eine Komponente von TweenMax.

Ja, SVG hat tatsächlich native Unterstützung für Animationen, die es uns ermöglichen würden, dasselbe zu erreichen. Da jedoch die Unterstützung für SMIL in zukünftigen Versionen von WebKit- und Blink-Browsern abnimmt und SMIL in IE und Edge überhaupt nicht unterstützt wird, wird GSAP zu einer viel attraktiveren Alternative.

Lassen Sie uns diese starten und ein Muster erstellen!

Schritt 1: Wählen Sie die SVG-Formen

Wir werden eine Form durch eine andere austauschen. Die Formen, die für dieses Snippet verwendet wurden, stammen von IcoMoon, das tonnenweise kostenlose Vektor-Icons anbietet, aber Sie können auch Ihre eigenen erstellen. Bereiten Sie Ihre Formen vor und fügen Sie sie im HTML innerhalb eines Button-Elements hinzu.

<!-- The button element (we could have used `<button>`) -->
<a class="button" href="#">
  
  <!-- The main SVG where both shapes will be drawn -->
  <svg id="icons" class="button-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    
    <!-- The download icon -->
    <path id="download" class="icon" d="M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z"></path>
    
    <!-- The checkmark icon -->
    <path id="checkmark" class="icon" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>

  <!-- The button text -->
  <!-- The ID will be used to swap the text with JavaScript -->
  <span id="button-text">Download</span>

</a>

Schritt 2: Gestalten Sie den Button und das SVG

Als nächstes können wir das CSS einrichten. Die meisten Stile in unserem Beispiel sind spezifisch für die Demo. Hier ist das absolute Minimum, was notwendig ist, damit diese Funktionalität funktioniert.

Beachten Sie, dass das wichtigste Stück darin besteht, die Form, in die wir sich verwandeln, standardmäßig zu verbergen. Das tun wir, weil wir beide Formen für MorphSVG im DOM benötigen, um eine für die andere auszutauschen, aber wir können nicht beide gleichzeitig anzeigen. Das bedeutet, wir verbergen die zweite Form und lassen MorphSVG seine Wunder wirken, um sie sichtbar zu machen, wenn sie benötigt wird.

/* The main SVG */
.button-icons {
  width: 1.25em;
}

/* The individual icons */
.icon {
  fill: #fff;
}

/* We hide the checkmark by default */
#checkmark {
  visibility: hidden;
}

Schritt 3: Mighty Morphin’ SVGs!

Hier kommen TweenMax und MorphSVG ins Spiel. Der vollständige Code für das Beispiel ist unten angegeben, aber er folgt diesem allgemeinen Skript

• Definieren Sie zunächst einige Variablen, damit wir sie im gesamten Code referenzieren können, ohne sie jedes Mal ausschreiben zu müssen
• icons: das gesamte SVG-Element
• button: der Button (oder Link), der unsere Formen enthält
• buttonText: der Text innerhalb des Buttons
• buttonTL: Der MorphSVG-Befehl zum Austauschen des Download-Symbols gegen das Häkchen-Symbol
• Hey, JavaScript, bitte beobachte, ob der Button geklickt wird, und spiele die MorphSVG-Animation bei alternierenden Klicks vorwärts und rückwärts ab.
• Und, hey JavaScript, wechsle auch den Button-Text, wenn der Button geklickt wird.
• Vielen Dank, JavaScript

// We're going to select some things and make them variables
var select = function(s) {
  return document.querySelector(s);
},
  icons = select('#icons'),
  button = select('.button'),
  buttonText = document.getElementById("button-text")

// Morph the Download icon into the Checkmark icon
var buttonTl = new TimelineMax({paused:true});
buttonTl.to('#download', 1, {
  morphSVG:{shape:'#checkmark'},
  ease:Elastic.easeInOut
})

// On button click, play the animation
button.addEventListener('click', function() {
  if (buttonTl.time() > 0) {
    buttonTl.reverse();
    
  } else {
    buttonTl.play(0);
  }
})

// On button click, swap out the button text
button.addEventListener('click', function() {  
  if (button.classList.contains("saved")) {
    button.classList.remove("saved");
    buttonText.innerHTML = "Download";
  } else {
    button.classList.add("saved");
    buttonText.innerHTML = "Saved!";
  }
}, false);

Demo

Das Folgende ist eine Demo des Codes, den wir behandelt haben

Siehe den Pen MorphSVG in Button on Click von Geoff Graham (@geoffgraham) auf CodePen.

Referenzen

• GreenSock MorphSVG: Dokumentation zur Verwendung des Plugins.
• So funktioniert SVG Shape Morphing: Chris hat dasselbe Konzept mit SMIL veröffentlicht und eine gute Grundlage für dieses Muster geschaffen.
• Happy/Sad Pen: Chris Gannons Demo, die bei der Konstruktion der Animation für dieses Muster geholfen hat.