Ikony morfowania kształtów w przycisku po kliknięciu - CSS-Tricks

Anonim

Pomysł polega na użyciu ikony SVG w przycisku i zamianie tej ikony na inną po kliknięciu przycisku. Kliknięcie przycisku często sugeruje, że podjęto działanie, więc przełączanie ikon może być miłym akcentem interfejsu użytkownika, aby pokazać zmianę w kontekście i potwierdzić, że akcja się wydarzyła.

Możliwym przypadkiem użycia może być przycisk pobierania. Ikona na przycisku może początkowo wskazywać, że przycisk wyzwoli pobieranie, ale po kliknięciu przycisku zmieni się w znacznik wyboru.

Zobacz Pen MorphSVG w Button on Click autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Utwórzmy fragment, który realizuje ten wzorzec, abyśmy mogli go używać w innych podobnych kontekstach.

Wymagania

Kiedy zapisujemy to jako fragment SVG, będziemy polegać na TweenMax firmy GSAP, która jest biblioteką JavaScript przeznaczoną specjalnie do animowania SVG, oraz MorphSVG, który jest składnikiem TweenMax.

Tak, SVG rzeczywiście ma natywne wsparcie dla animacji, które pozwoliłyby nam osiągnąć to samo. Jednak wraz z zanikaniem obsługi SMIL w przyszłych wersjach przeglądarek WebKit i Blink oraz całkowitym brakiem wsparcia w przeglądarkach IE i Edge, GSAP staje się znacznie bardziej atrakcyjną alternatywą.

Odpalmy je i zbudujmy wzór!

Krok 1: Wybierz kształty SVG

Zamienimy jeden kształt na inny. Kształty użyte w tym fragmencie pochodzą z IcoMoon, który ma mnóstwo darmowych ikon wektorowych, ale możesz też stworzyć własne. Tak czy inaczej, przygotuj swoje kształty i dodajmy je do kodu HTML wewnątrz elementu przycisku.

  Download

Krok 2: Stylizacja przycisku i SVG

Następnie możemy ustawić CSS. Większość stylów w naszym przykładzie jest specyficzna dla wersji demonstracyjnej. Oto minimum tego, co jest konieczne, aby ta funkcja działała.

Zwróć uwagę, że kluczowy element domyślnie ukrywa kształt, w który się przekształcamy. Robimy to, ponieważ potrzebujemy obu kształtów w DOM dla MorphSVG, aby zamienić jeden na drugi, ale nie możemy pokazać obu jednocześnie. Oznacza to, że ukrywamy drugi kształt i pozwalamy MorphSVG działać cuda, aby był widoczny, gdy zajdzie taka potrzeba.

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

Krok 3: Mighty Morphin 'SVG!

Tutaj do gry wchodzą TweenMax i MorphSVG. Pełny kod przykładu znajduje się poniżej, ale jest zgodny z tym ogólnym skryptem:

  • Zdefiniuj kilka zmiennych na początek, abyśmy mogli odwoływać się do nich w całym kodzie bez konieczności ich zapisywania za każdym razem:
    • icons: pełny element SVG
    • button: przycisk (lub link) zawierający nasze kształty
    • buttonText: tekst wewnątrz przycisku
    • buttonTL: Polecenie MorphSVG do zamiany ikony pobierania na ikonę znacznika wyboru
  • Hej, JavaScript, uważaj na kliknięcie przycisku i odtwarzaj animację MorphSVG do przodu i do tyłu po kolejnych kliknięciach.
  • Aha, hej JavaScript, również zamień tekst przycisku po kliknięciu przycisku.
  • Dziękuję, 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);

Próbny

Poniżej znajduje się demonstracja kodu, który omówiliśmy:

Zobacz Pen MorphSVG w Button on Click autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Bibliografia

  • GreenSock MorphSVG: Dokumentacja dotycząca korzystania z wtyczki.
  • Jak działa SVG Shape Morphing: Chris opublikował tę samą koncepcję za pomocą SMIL i zapewnił dobrą podstawę dla tego wzoru.
  • Happy / Sad Pen: Demo Chrisa Gannona, które pomogło w stworzeniu animacji dla tego wzoru.