Myšlenkou je použít ikonu SVG v tlačítku a vyměnit tuto ikonu za jinou, když na tlačítko kliknete. Kliknutí na tlačítko často naznačuje, že byla provedena nějaká akce, takže přepínání ikon může být příjemným dotykem uživatelského rozhraní, aby se zobrazila změna v kontextu a potvrdilo se, že k akci došlo.
Možným případem použití může být tlačítko pro stažení. Ikona v tlačítku může zpočátku indikovat, že tlačítko spustí stahování, ale po kliknutí na tlačítko se změní na značku zaškrtnutí.
Podívejte se na pero MorphSVG v Button on Click od Geoffa Grahama (@geoffgraham) na CodePen.
Vytvořme úryvek, který splní tento vzor, abychom jej mohli použít v jiných podobných kontextech.
Požadavky
Zatímco to nahráváme jako úryvek SVG, budeme se spoléhat na TweenMax GSAP, což je knihovna JavaScriptu speciálně pro animaci SVG, a MorphSVG, který je součástí TweenMax.
Ano, SVG skutečně má nativní podporu pro animace, které by nám umožnily dosáhnout stejné věci. S podporou SMIL v budoucích verzích prohlížečů WebKit a Blink a úplným nedostatkem podpory v IE a Edge se GSAP stává mnohem atraktivnější alternativou.
Rozpálíme je a vytvořme nám vzor!
Krok 1: Vyberte tvary SVG
Vyměníme jeden tvar za jiný. Tvary použité pro tento úryvek pocházejí z aplikace IcoMoon, která má spoustu volných vektorových ikon, ale můžete si také vytvořit vlastní. Ať tak či onak, připravte si tvary a přidejme je do HTML uvnitř prvku tlačítka.
Download Krok 2: Upravte styl tlačítka a SVG
Můžeme nastavit CSS další. Většina stylů v našem příkladu je specifická pro ukázku. Tady je minimum toho, co je nezbytné, aby tato funkce fungovala.
Všimněte si, že klíčová část ve výchozím nastavení skrývá tvar, do kterého se morfujeme. Děláme to proto, že potřebujeme oba tvary v DOMu, aby MorphSVG zaměnily jeden za druhý, ale nemůžeme ukázat oba najednou. To znamená, že skryjeme druhý tvar a necháme MorphSVG dělat jeho zázraky, aby byl viditelný, když to bude potřeba.
/* 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!
Zde vstupují do hry TweenMax a MorphSVG. Celý kód příkladu je uveden níže, ale následuje tento obecný skript:
- Definujte několik proměnných, které chcete spustit, abychom na ně mohli odkazovat v celém kódu, aniž bychom je museli pokaždé zapisovat:
icons: celý prvek SVGbutton: tlačítko (nebo odkaz), které obsahuje naše tvarybuttonText: text uvnitř tlačítkabuttonTL: Příkaz MorphSVG pro výměnu ikony stahování za ikonu zaškrtnutí- Ahoj, JavaScript, sledujte klikání na tlačítko a při alternativních kliknutích přehrávejte animaci MorphSVG dopředu a dozadu.
- Aha, hej JavaScript, také po kliknutí na tlačítko vyměňte text tlačítka.
- Děkuji, 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);Ukázka
Následuje ukázka kódu, který jsme pokryli:
Podívejte se na pero MorphSVG v Button on Click od Geoffa Grahama (@geoffgraham) na CodePen.
Reference
- GreenSock MorphSVG: Dokumentace k použití pluginu.
- Jak funguje tvarování tvarů SVG: Chris publikoval stejný koncept pomocí SMIL a poskytl tomuto modelu pěkný základ.
- Happy / Sad Pen: demo Chrisa Gannona, které pomohlo vytvořit animaci pro tento vzor.