CSS-i tehnikad materjali pulsatsiooniefekti saavutamiseks

Juhend erinevatest meetoditest pulsatsiooniefekti jaoks, kasutades CSS-i ja JavaScripti

Hiljuti pidin rakendama pulsatsiooni efekti materjalide kujundamisest veebirakenduseks. Ja siis mõistsin, et mul pole aimugi, kuidas seda ellu viidi. See viis mind rännakule olemasolevate rakenduste uurimisele ja tuli välja isegi täiesti uue tehnikaga, mis võib teile kasulik olla.

Mis see pulsatsiooniefekt on?

Oota, kas sa ei tea Google'i materjalikujunduse pulsatsiooniefekti? Kas olete mitu aastat koopas elanud?

Ripplefekti kasutatakse nupu vajutamisel. See töötab samamoodi hiire või puutega interaktsioonide korral.

Asukohta, millel klõpsate või nuppu puudutate, nimetatakse kontaktpunktiks. Sealt saadetakse pulsatsioon väljapoole, kaotades läbipaistmatuse, kui see suureneb, kuni see täidab kogu nupu. Siis kaob see täielikult.

Selle pulsatsiooniefekti dünaamika sarnaneb vibratsioonidega, mis tekivad vedelikupinda puudutades või kivi järve laskmisel.

Veebis leiduvad vilinad

Pärast mõne uurimistöö tegemist suutsin leida kaks peamist tehnikat, mida kasutatakse veebirakendustes rippimise efekti rakendamiseks.

Kasutades :: pärast pseudo-elementi

Seda tehnikat kasutades kujundatakse nupu :: after pseudo-element poolläbipaistvaks ringiks ja animeeritakse kasvamiseks ja tuhmumiseks. Konteineri nupul peab olema ülevool: varjatud, nii et ring ei voola kunagi nupu pinnast väljapoole, ja asukoht: suhteline, et ringi nupule hõlpsalt paigutada. Lisateavet selle tehnika kohta saate lugeda Ionuț Colceriu sellest artiklist.

Üks selle tehnika suurepäraseid asju on see, et see on puhas CSS-lahendus pulsatsiooniefekti jaoks. Kuid pulsatsiooniefekt algab alati nupu keskpunktist, mitte kokkupuutepunktist. See pole kõige loomulikum tagasiside.

Seda saab parandada, kui kontaktpunkti salvestamiseks kasutatakse JavaScripti ja selle abil pulsatsiooni positsioneerimist. Täpselt seda on material.io teinud nende veebikomplekti jaoks. See kasutab kontaktpunkti salvestamiseks CSS-i muutujaid ja pseudo-element :: kasutab neid muutujaid positsioneerimiseks.

Lapselementide kasutamine

Sisuliselt kasutab see tehnika sama strateegiat kui varem. Kuid pseudo-elemendi asemel lisab see nupu sisse span-elemendi, mille saab seejärel JavaScripti kaudu positsioneerida. Seda tehnikat kirjeldab selles artiklis Jhey Tompkins.

Lihtsaim teostus loob iga nupule klõpsamise vahemiku ja kasutab vahemiku positsiooni muutmiseks hiire positsiooni klõpsamissündmusel. CSS-animatsioon paneb vahemiku kasvama ja tuhmuma, kuni muutub täielikult läbipaistvaks. Kui animatsioon on lõppenud, võime eemaldada DOM-ilt vahemiku või jätta selle lihtsalt vaiba alla - keegi ei märka seal rippuvat läbipaistvat spani.

Leidsin sellest veel ühe variatsiooni, mille alam-elemendiks on span asemel span, ja svg on JavaScripti kaudu animeeritud. Seda variatsiooni seletab Dennis Gaebel, kuid sisuliselt näib see olevat sama ja võib-olla lubab ta kasutada keerulisi SVG-vorme ja efekte.

Probleem sisendite esitamisega

Mõlemad ülalkirjeldatud tehnikad tunduvad suurepärased. Kuid see juhtub siis, kui püüdsin neid rakendada sisendielementidele, mille tüüp = esita:

Miks nad ei tööta?

Sisendielement on asendatud element. Lühidalt tähendab see, et nende elementidega on DOM-i ja CSS-i jaoks väga vähe võimalik ära teha. Täpsemalt, neil ei saa olla alamelemente ega ka pseudoelemente. Nüüd on selge, miks need tehnikad ebaõnnestuvad.

Seega, kui kasutate materjali kujundamist, on parem sisendist [type = Submit] eemale hoida ja jääda nupulementide juurde. Või lihtsalt jätkake lugemist.

Rippide lisamine sisendite esitamiseks

Veebirakenduses, millega töötasin, oli meil juba palju esitamisnuppe. Nende kõigi muutmine erinevaks elemendiks nõuaks palju tööd ja suurt riski stiililehtede ja JavaScripti loogika purunemiseks. Nii et ma pidin välja mõtlema, kuidas olemasolevatele esitamisnuppudele rippimist lisada.

Pakkemahuti kasutamine

Sain kiiresti aru, et võin pakkimisnupu mähkida sisseehitatud ploki elemendi sisse ja kasutada sisemise ploki elementi pulsatsioonipinnana. Siin on kiire tutvustus:

Ehkki mulle meeldib see lahendus selle lihtsuse tõttu, nõudis see siiski liiga paljudes kohtades märgistuse muutmist. Ja ma teadsin, et see on habras lahendus - uued arendajad osalevad projektis ja loovad esitamisnupud ilma, et nad mähise pinnale korralikult mähiksid. Nii et otsisin muid lahendusi, mis ei nõua DOM-i muutmist.

Radiaalsed kalded

Radiaalse gradiendi süntaks võimaldab mul kontrollida nii gradiendi keskpunkti kui ka suurust. Muidugi võimaldab see mul kontrollida ka gradiendi värvi, sealhulgas poolläbipaistvaid värve. Ja see ei ületa kunagi elementi, millele seda rakendatakse. Nii tundub, et see teeb juba kõik vajaliku!

Mitte nii kiiresti ... puudu on üks asi: taustpildi omadus ei ole jäljendatav. CSS-i animatsioonide abil ei suutnud gradient kasvada ja läbipaistvaks muutuda. Suutsin küll selle kasvatada, animeerides tausta suurust atribuuti, kuid see oli kõik, mida sain teha.

Proovisin veel mõnda asja, näiteks animeeritud pildina hääbuvat ringi (kasutades apng-vormingut) ja rakendasin seda taustpildina. Kuid siis ei saanud ma kontrollida, millal pildisilmus algas ja lõppes.

Lõpuks lahendus JavaScriptiga

Mida te ei saa CSS-is teha, saate seda teha JavaScriptis. Pärast seda, kui olen kulutanud rohkem aega, kui olen nõus tunnistama, et üritan seda efekti CSS-i animatsioonide abil tööle saada, loobusin lihtsalt ja otsustasin kirjutada animatsiooni JavaScripti.

Alustasin ülaltoodud radiaalse gradiendi lahendusega ja kasutasin window.requestAnimationFrame radiaalse gradiendi vedela animatsiooni tegemiseks, kasvades ja pleekides. Siin on minu lõplik lahendus:

Järeldus

Nii et edastamise nuppudele on võimalik pulsatsiooniefekte, mitte ainult CSS-iga.

Ma ei leidnud seda tehnikat kusagil veebis dokumenteeritud, seega nimetan seda enda omaks. Leonardo pulsatsioonitehnika ei nõua DOM-i muutmist ja töötab kõigi elementide puhul, kuna see ei sõltu pseudo- ega alamelementidest. Kuid see pole veatu lahendus.

Esiteks on esinemine. Gradiendi JavaScripti abil animeerides kaotate palju brauseri optimeerimisi. Kuid kuna ainus muudetav omadus on taustpilt, kahtlustaksin, et brauseritel poleks vaja uuesti voolida ja nad vajaksid lihtsalt stiilide uuesti rakendamist ja elemendi uuesti värvimist. Praktikas just see juhtub ja jõudlus on tõesti hea. Erandiks sellest avaldusest on Firefox Mobile, mis mingil põhjusel ei jälgi animatsiooni. (redigeeri: animatsioon on tänapäevastes Firefox Mobile versioonides sujuv)

Teiseks kasutab tehnika nupu taustpildi omadust. Kui teie kujundus nõuab, et nuppudele oleks taustpildile lisatud pilt, ületaks pulsatsiooniefekt selle. Kui teil on seda pilti oma kujunduses tõesti vaja, siis võiks JavaScripti muuta, et tõmmata radiaalne gradient olemasoleva taustpildi peale.

Kolmandaks, tundub, et see Internet Exploreris ei tööta. Kuid ma ei näe põhjust, miks see ei peaks IE10 ja uuemate versioonidega töötama. Võib-olla sellepärast, et IE kasutab radiaalgradiendi jaoks erinevat süntaksi. Kes aga tänapäeval IE-st hoolib? (redigeeri: see meetod töötab Internet Explorer 11-s probleemideta)