Suformuokite „Morphing“ piktogramas paspaudę mygtuką CSS-gudrybės

Anonim

Čia idėja yra naudoti SVG piktogramą mygtuke ir spustelėjus mygtuką, pakeiskite ją kita. Spustelėjus mygtuką, dažnai rodoma, kad buvo atliktas veiksmas, todėl piktogramų perjungimas gali būti naudingas vartotojo sąsajos palietimas, kad būtų parodytas pokytis kontekste ir patvirtinta, kad veiksmas įvyko.

Galimas naudojimo atvejis gali būti atsisiuntimo mygtukas. Mygtuko piktograma iš pradžių gali reikšti, kad mygtukas paskatins atsisiuntimą, bet spustelėjus mygtuką, jis pasikeis į žymę.

Žiūrėkite „Pen MorphSVG“ mygtuką „Spustelėkite mygtuką“, kurį sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.

Sukurkime fragmentą, kuris sukuria šį modelį, kad galėtume jį naudoti kituose panašiuose kontekstuose.

Reikalavimai

Nors tai pateiksime kaip SVG fragmentą, remsimės GSAP „TweenMax“, kuri yra „JavaScript“ biblioteka, skirta specialiai SVG animacijai, ir „MorphSVG“, kuri yra „TweenMax“ komponentas.

Taip, SVG iš tikrųjų palaiko animacijas, kurios leidžia mums atlikti tą patį. Tačiau, kai būsimose „WebKit“ ir „Blink“ naršyklių versijose mažėja SMIL palaikymas ir visiškai trūksta palaikymo „IE“ ir „Edge“, GSAP tampa daug patrauklesne alternatyva.

Šaudykime tuos žmones ir pastatykime modelį!

1 žingsnis: Pasirinkite SVG formas

Mes pakeisime vieną figūrą kita. Šiam fragmentui naudojamos figūros atkeliavo iš „IcoMoon“, kuriame yra daugybė nemokamų vektorinių piktogramų, tačiau jūs taip pat galite sukurti patys. Bet kuriuo atveju paruoškite savo formas ir pridėkime jas prie HTML mygtuko elemento viduje.

  Download

2 žingsnis: Sukurkite mygtuką ir SVG

Toliau galime sukurti CSS. Dauguma mūsų pavyzdžio stilių būdingi demonstracijai. Štai minimalus būtiniausias dalykas, kad ši funkcija veiktų.

Atkreipkite dėmesį, kad pagrindinis kūrinys slepia formą, į kurią mes morfuojame pagal numatytuosius nustatymus. Tai darome todėl, kad mums reikia abiejų DOM formų, kad „MorphSVG“ pakeistų vienas kitą, tačiau negalime rodyti abiejų tuo pačiu metu. Tai reiškia, kad mes slepiame antrąją formą ir leidžiame „MorphSVG“ daryti stebuklus, kad ji būtų matoma, kai to reikia.

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

3 žingsnis: Mighty Morphin 'SVG!

Čia žaidžia „TweenMax“ ir „MorphSVG“. Visas pavyzdžio kodas pateikiamas toliau, tačiau jis atitinka šį bendrą scenarijų:

  • Apibrėžkite kelis kintamuosius, kad galėtumėte pradėti, kad galėtume juos nurodyti visame kode, nereikalaudami jų kaskart:
    • icons: visas SVG elementas
    • button: mygtukas (arba nuoroda), kuriame yra mūsų formos
    • buttonText: mygtuko viduje esantis tekstas
    • buttonTL: „MorphSVG“ komanda, kad atsisiuntimo piktogramą pakeistumėte žymės piktograma
  • Ei, „JavaScript“, stebėkite, ar paspaudžiamas mygtukas, ir paleiskite „MorphSVG“ animaciją pirmyn ir atgal, kai paspaudžiate pakaitomis.
  • O, ei, „JavaScript“, taip pat pakeiskite mygtuko tekstą, kai paspaudžiamas mygtukas.
  • Ačiū, „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);

Demonstracija

Toliau pateikiama mūsų aprašyto kodo demonstracinė versija:

Žiūrėkite „Pen MorphSVG“ mygtuką „Spustelėkite mygtuką“, kurį sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.

Nuorodos

  • „GreenSock MorphSVG“: Papildinio naudojimo dokumentacija.
  • Kaip veikia „SVG Shape Morphing“: Chrisas paskelbė tą pačią koncepciją naudodamas SMIL ir pateikė gražų šio modelio pagrindą.
  • Laimingas / liūdnas rašiklis: Chriso Gannono demonstracinė versija, padėjusi sukurti šio modelio animaciją.