Veidojiet Morphing ikonas pogā uz CSS-triki

Anonim

Ideja ir pogā izmantot SVG ikonu un, noklikšķinot uz pogas, nomainīt šo ikonu pret citu. Klikšķis uz pogas bieži liek domāt par kādas darbības veikšanu, tāpēc ikonu pārslēgšana var būt jauks lietotāja saskarnes pieskāriens, lai parādītu izmaiņas kontekstā un apstiprinātu, ka darbība ir notikusi.

Iespējamais izmantošanas gadījums varētu būt lejupielādes poga. Ikona pogā sākotnēji var norādīt, ka poga izraisīs lejupielādi, bet pēc noklikšķināšanas uz pogas tā tiks mainīta uz atzīmi.

Skatiet Pen MorphSVG pogā uz klikšķa, Geoff Graham (@geoffgraham) vietnē CodePen.

Izveidosim fragmentu, kas nodrošina šo modeli, lai mēs to varētu izmantot citos līdzīgos kontekstos.

Prasības

Kamēr mēs to iesniedzam kā SVG fragmentu, mēs paļausimies uz GSAP TweenMax, kas ir JavaScript bibliotēka, kas īpaši paredzēta SVG animēšanai, un MorphSVG, kas ir TweenMax sastāvdaļa.

Jā, SVG patiešām ir vietējs atbalsts animācijām, kas ļauj mums paveikt to pašu. Tomēr, samazinoties SMIL atbalstam WebKit un Blink pārlūkprogrammu turpmākajās versijās, un tas pilnībā atbalsta IE un Edge, GSAP kļūst par daudz pievilcīgāku alternatīvu.

Atlaidīsim tos un izveidosim paraugu!

1. darbība: izvēlieties SVG formas

Mēs nomainīsim vienu figūru pret citu. Šim fragmentam izmantotās formas nāca no IcoMoon, kurā ir daudz bezmaksas vektoru ikonu, taču jūs varētu izveidot arī pats. Jebkurā gadījumā sagatavojiet savas formas un pievienosim tās pogas elementa iekšpusē esošajam HTML.

  Download

2. solis: ieveidojiet pogu un SVG

Tālāk mēs varam izveidot CSS. Lielākā daļa mūsu piemērā esošo stilu ir raksturīgi demonstrācijai. Šeit ir minimums, kas nepieciešams, lai šī funkcionalitāte darbotos.

Ņemiet vērā, ka galvenais elements slēpj formu, kurā mēs pēc noklusējuma esam morfējuši. Mēs to darām, jo ​​mums ir nepieciešamas abas DOM formas, lai MorphSVG nomainītu vienu pret otru, taču mēs nevaram parādīt abus vienlaikus. Tas nozīmē, ka mēs paslēpjam otro formu un ļaujam MorphSVG darīt brīnumus, lai padarītu to redzamu, kad tas nepieciešams.

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

3. solis: Varenie morfīni SVG!

Šeit spēlē TweenMax un MorphSVG. Pilns piemēra kods ir norādīts zemāk, taču tas atbilst šim vispārējam skriptam:

  • Definējiet dažus mainīgos, lai sāktu, lai mēs tos varētu atsaukties visā kodā, katru reizi tos neizrakstot:
    • icons: pilns SVG elements
    • button: poga (vai saite), kurā ir mūsu formas
    • buttonText: teksts pogas iekšpusē
    • buttonTL: Komanda MorphSVG, lai lejupielādes ikonu apmainītu ar atzīmes ikonu
  • Hei, JavaScript, lūdzu, skatieties, lai poga tiktu noklikšķināta, un atskaņojiet MorphSVG animāciju uz priekšu un atpakaļ uz alternatīviem klikšķiem.
  • Ak un, hey JavaScript, arī nomainiet pogas tekstu, kad tiek noklikšķināts uz pogas.
  • Paldies, 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);

Demonstrācija

Šis ir mūsu apskatītā koda demonstrējums:

Skatiet Pen MorphSVG pogā uz klikšķa, Geoff Graham (@geoffgraham) vietnē CodePen.

Atsauces

  • GreenSock MorphSVG: Dokumentācija spraudņa izmantošanai.
  • Kā darbojas SVG Shape Morphing: Kriss publicēja šo pašu koncepciju, izmantojot SMIL, un nodrošināja jauku pamatu šim modelim.
  • Priecīgs / skumjš pildspalva: Krisa Genona demonstrācija, kas palīdzēja veidot šī modeļa animāciju.