CSS-tekniikat materiaalin ripple-efektiin

Opas eri tekniikoihin aaltoilutehosteen käyttämiseksi CSS: n ja JavaScript: n avulla

Minun piti äskettäin toteuttaa ripple-efekti materiaalisuunnittelusta web-sovellukseksi. Ja sitten tajusin, että minulla ei ollut aavistustakaan, kuinka se toteutettiin. Tämä johti minut matkalle tutkimaan olemassa olevia toteutuksia ja keksimään jopa aivan uuden tekniikan, josta voi olla hyötyä sinulle.

Mikä tämä aaltoiluvaikutus on?

Odota, et tiedä Googlen materiaalisuunnittelun aaltoiluvaikutusta? Oletko asunut luolassa monta vuotta?

Aaltoilutehostetta käytetään, kun painat painiketta. Se toimii samalla tavalla hiiren tai kosketuksen vuorovaikutuksissa.

Painiketta, jota napsautat tai jota kosketat, kutsutaan yhteyspisteeksi. Sieltä pulssi lähetetään ulospäin menettäen opasiteetin kasvaessaan, kunnes se täyttää koko painikkeen. Sitten se katoaa kokonaan.

Tämän aaltoilutehosteen dynamiikka on samanlainen kuin aallot, jotka saat koskettaessasi nestemäistä pintaa tai pudottamalla kallion järvelle.

Internetistä löytyvät aallot

Tutkimukseni jälkeen löysin kaksi päätekniikkaa, joita käytetään ripple-vaikutuksen toteuttamiseen verkkosovelluksissa.

Käyttämällä :: pseudo-elementin jälkeen

Tätä tekniikkaa käyttämällä painikkeen :: pseudoelementti muotoillaan puoliläpinäkyväksi ympyräksi ja animoidaan kasvamaan ja häipymään. Säiliöpainikkeella on oltava ylivuoto: piilotettu, jotta ympyrä ei koskaan virtaa painikkeen pinnan ulkopuolella, ja sijainti: suhteessa, jotta ympyrän sijoittaminen painikkeen sisällä on helppoa. Voit lukea lisätietoja tästä tekniikasta tässä artikkelissa Ionu this Colceriu.

Yksi tämän tekniikan hienoista asioista on, että se on puhdas CSS-ratkaisu aaltoilutehosteeseen. Aaltoiluvaikutus alkaa kuitenkin aina painikkeen keskeltä kosketuskohdan sijaan. Se ei ole luonnollisinta palautetta.

Sitä voitaisiin parantaa käyttämällä JavaScriptiä yhteyspisteen tallentamiseen ja sen avulla aaltoilun sijoittamiseen. Juuri juuri material.io on tehnyt heidän web ripple -komponenttinsa hyväksi. Se käyttää CSS-muuttujia kontaktipisteen tallentamiseen, ja pseudo-elementin jälkeen :: käyttää näitä muuttujia paikannukseen.

Lapsielementtien käyttäminen

Pohjimmiltaan tämä tekniikka käyttää samaa strategiaa kuin ennen. Mutta pseudo-elementin sijasta se lisää painikealueeseen span-elementin, joka voidaan sitten sijoittaa JavaScriptin kautta. Tätä tekniikkaa on kuvattu tässä artikkelissa Jhey Tompkins.

Yksinkertaisin toteutus luo kunkin painikkeen napsautuksen span ja muuttaa hiiren sijaintia hiiren sijainnilla napsautustapahtumassa. CSS-animaatio saa span kasvamaan ja haalistumaan, kunnes siitä tulee täysin läpinäkyvä. Voimme halutessaan poistaa span DOM: sta heti, kun animaatio on valmis, tai jättää sen vain maton alle - kukaan ei todellakaan huomaa läpinäkyvää span leijuvaa.

Löysin tästä toisen muunnoksen, jossa lapsielementti on svg span-sijasta ja svg-animaatio on JavaScriptin kautta. Dennis Gaebel selittää tämän variaation, mutta pohjimmiltaan se näyttää olevan sama ja mahdollisesti mahdollistaa monimutkaisten SVG-muotojen ja tehosteiden käytön.

Lähetysten ongelma

Molemmat yllä kuvatut tekniikat vaikuttavat mahtavilta. Mutta näin tapahtuu, kun yritin soveltaa niitä syöttöelementeihin, joiden tyyppi on = Lähetä:

Miksi he eivät toimi?

Syöttöelementti on korvattu elementti. Lyhyesti sanottuna, se tarkoittaa, että näillä elementeillä on vain vähän tekemistä DOM: n ja CSS: n suhteen. Erityisesti niissä ei voi olla alaelementtejä eikä myöskään pseudoelementtejä. Nyt on selvää, miksi nämä tekniikat epäonnistuvat.

Joten jos käytät materiaalisuunnittelua, on parempi pysyä poissa syöttöstä [type = Submit] ja pysyä painikeelementeissä. Tai vain jatka lukemista.

Lisää värejä syötteiden lähettämistä varten

Työskentelemässäni verkkosovelluksessa meillä oli jo paljon lähetyspainikkeita. Niiden muuttaminen erilaisiksi elementeiksi vaatisi paljon työtä ja suurta riskiä rikkoa tyylitaulukoita ja JavaScript-logiikkaa. Joten minun piti miettiä, kuinka lisätä väreilyä olemassa oleviin lähetä-painikkeisiin.

Kääreastian käyttäminen

Ymmärsin nopeasti, että voin kääriä lähetyspainikkeen inline-block-elementin sisälle ja käyttää inline-block-elementtiä aaltoilupintana. Tässä on nopea esittely:

Pidän tästä ratkaisusta sen yksinkertaisuuden vuoksi, mutta se kuitenkin vaati minua muuttamaan merkintöjä liian monissa paikoissa. Ja tiesin, että se olisi hauras ratkaisu - uudet kehittäjät tulevat projektiin ja luovat painikkeita käärittämättä niitä kunnolla pintaan. Joten etsin edelleen muita ratkaisuja, jotka eivät edellyttäneet DOM: n muuttamista.

Radiaaliset kaltevuudet

Radiaaligradientin syntaksin avulla voin hallita sekä kaltevuuden keskipistettä että kokoa. Tietenkin se antaa minulle myös mahdollisuuden säätää kaltevuuden väriä, mukaan lukien puoliläpinäkyvät värit. Ja se ei koskaan ylivuota elementtiä, johon sitä sovelletaan. Joten näyttää siltä, ​​että se tekee jo kaiken mitä tarvitsen!

Ei niin nopeasti… yksi asia puuttuu: taustakuvan ominaisuutta ei voida jäljittää. En voinut saada gradienttia kasvamaan ja haalistumaan avoimeksi CSS-animaatioilla. Onnistuin saamaan sen kasvamaan animoimalla taustan koon omaisuutta, mutta se oli kaikki mitä voin tehdä.

Yritin muutamia muita asioita, kuten haalistuneen ympyrän animoidun kuvan (käyttämällä apng-muotoa) ja soveltaen sitä taustakuvana. Mutta silloin en voinut hallita, milloin kuvasilmukka alkoi ja päättyi.

Lopuksi ratkaisu JavaScriptillä

Mitä et voi tehdä CSS: ssä, voit tehdä sen JavaScriptillä. Vietettyäni enemmän aikaa kuin olen valmis myöntämään, että yritän saada tämän vaikutelman toimivaksi CSS-animaatioilla, lopetin vain ja päätin kirjoittaa animaation JavaScriptiin.

Aloitin yllä olevasta säteittäisgradienttiratkaisusta ja käytin ikkunan.requestAnimationFrame avulla juoksevaa animaatiota säteittäisestä kaltevuudesta, kasvavasta ja häipyvästä. Tässä on lopullinen ratkaisuni:

johtopäätös

Joten on mahdollista saada aaltoiluvaikutuksia lähetä-painikkeisiin, ei vain CSS: n kanssa.

En löytänyt tätä tekniikkaa dokumentoiduksi missään verkossa, joten kutsun sitä omaksi. Leonardon aaltoilutekniikka ei vaadi muutoksia DOM: iin, ja se toimii mille tahansa elementille, koska se ei ole riippuvainen pseudoelementeistä tai alaelementeistä. Se ei kuitenkaan ole virheetön ratkaisu.

Ensinnäkin siellä on suorituskyky. Animoimalla gradienttia JavaScriptillä, menetät paljon selaimen optimointeja. Mutta koska ainoa muuttuva ominaisuus on taustakuva, epäilen, että selainten ei tarvitse muuttaa uudelleen, vaan tarvitsisi vain tyylien asettamisen uudelleen ja elementin maalaamisen uudelleen. Käytännössä juuri niin tapahtuu, ja suorituskyky on todella hyvä. Poikkeus kyseiseen lausuntoon on Firefox Mobile, joka jostain syystä ei pysy animaation kanssa. (muokkaa: animaatio on sujuvaa nykyaikaisissa Firefox Mobile -versioissa)

Toiseksi tekniikka käyttää painikkeen taustakuvaominaisuutta. Jos suunnittelussa vaaditaan, että painikkeillasi on kuva, jota käytetään taustalla, aaltoilutehoste ohittaa sen. Jos tarvitset tätä kuvaa todella mallissasi, JavaScriptiä voidaan muokata vetämään säteittäinen kaltevuus olemassa olevan taustakuvan päälle.

Kolmanneksi, tämä ei näytä toimivan Internet Explorerissa. En kuitenkaan näe mitään syytä siihen, miksi sen ei pitäisi toimia IE10: n tai uudemman kanssa. Ehkä se johtuu siitä, että IE käyttää erilaista syntaksia radiaaligradientille. Mutta kuka välittää IE: stä nykyään? (muokkaa: tämä menetelmä toimii ilman ongelmia Internet Explorer 11: ssä)