CSS metodes materiālu pulsācijas efektam

Ceļvedis dažādām paņēmieniem, kā iegūt ripple efektu, izmantojot CSS un JavaScript

Man nesen bija jāievieš pulsācijas efekts no materiāla dizaina tīmekļa lietojumprogrammā. Un tad es sapratu, ka man nav ne mazākās nojausmas, kā tas tika īstenots. Tas mani noveda pie tā, lai izpētītu esošās ieviešanas un pat nākt klajā ar pavisam jaunu paņēmienu, kas jums varētu būt noderīgs.

Kāds ir šis pulsācijas efekts?

Pagaidiet, vai jūs nezināt, kāds ir virmošanas efekts no Google materiāla dizaina? Cik gadus esat dzīvojis alā?

Viļņu efekts tiek izmantots, nospiežot pogu. Tas darbojas tāpat kā mijiedarbība ar peli vai skārienu.

Pozīciju, uz kuras noklikšķinājāt vai pieskaraties pogai, sauc par saskares punktu. No turienes tiek nosūtīta pulsācija, kas virzās uz āru, zaudējot necaurredzamību, jo tā kļūst lielāka, līdz tā aizpilda visu pogu. Tad tas pilnībā izzūd.

Šī pulsācijas efekta dinamika ir līdzīga viļņiem, ko saņemat, pieskaroties šķidruma virsmai vai nolaižot akmeni ezerā.

Pārdomas, kuras atradīsit tīmeklī

Pēc pētījumu veikšanas es varētu atrast divus galvenos paņēmienus, kas tiek izmantoti, lai ieviestu pulsācijas efektu tīmekļa lietojumprogrammās.

Izmantojot :: pēc pseidoelementa

Izmantojot šo paņēmienu, pogas :: pseidoelements tiek veidots kā daļēji caurspīdīgs aplis un tiek animēts, lai augtu un izbalētu. Tvertnes pogai jābūt pārpildītai: paslēptai, lai aplis nekad neplūst ārpus pogas virsmas, un novietojumam: attiecībā pret to, lai apli būtu ērti novietot pogas iekšpusē. Sīkāku informāciju par šo paņēmienu varat izlasīt šajā Ionuț Kolceriu rakstā.

Viena no šīs tehnikas lieliskajām lietām ir tā, ka tas ir tīrs CSS risinājums pulsācijas efektam. Tomēr pulsācijas efekts vienmēr sākas ar pogas centru, nevis ar saskares punktu. Tās nav dabiskākās atsauksmes.

To varētu uzlabot, izmantojot JavaScript, lai saglabātu kontaktpunktu un izmantotu to, lai novietotu pulsāciju. Tas ir tieši tas, ko material.io ir paveicis viņu tīmekļa pulsācijas komponentam. Kontaktpunkta saglabāšanai tas izmanto CSS mainīgos, un :: pseidoelements :: izmanto šos mainīgos pozicionēšanai.

Bērnu elementu izmantošana

Būtībā šajā tehnikā tiek izmantota tā pati stratēģija kā iepriekš. Bet pseidoelementa vietā tas pogas iekšpusē pievieno laiduma elementu, kuru pēc tam var novietot caur JavaScript. Šis paņēmiens ir aprakstīts šajā Jhey Tompkins rakstā.

Vienkāršākā ieviešana rada atstarpi katram pogas klikšķim un, izmantojot peles pozīciju uz klikšķa notikuma, maina atskaites pozīciju. CSS animācija ļauj paplašināt un izbalināt, līdz kļūst pilnīgi caurspīdīga. Kad animācija ir pabeigta, mēs varam izvēlēties noņemt atstarpi no DOM vai vienkārši atstāt to tur zem paklāja - neviens tiešām nepamanīs caurspīdīgu laidumu, kas karājas.

Es atradu vēl vienu šī varianta variantu, kurā pakārtotais elements ir svg, bet nevis span, un svg tiek animēts caur JavaScript. Šīs variācijas izskaidro Deniss Gaebels, taču būtībā tas, šķiet, ir tāds pats, un, iespējams, ļauj izmantot sarežģītas SVG formas un efektus.

Problēma ar iesniegto datu iesniegšanu

Abas iepriekš aprakstītās tehnikas šķiet lieliskas. Bet tas notiek, kad mēģināju tos pielietot ievades elementiem ar type = iesniegt:

Kāpēc viņi nestrādā?

Ievades elements ir aizstāts elements. Īsāk sakot, tas nozīmē, ka ar šiem elementiem var izdarīt ļoti maz, attiecībā uz DOM un CSS. Konkrētāk, viņiem nevar būt bērnu elementi un arī pseidoelementi. Tagad ir skaidrs, kāpēc šie paņēmieni neizdodas.

Tātad, ja jūs izmantojat materiālu noformējumu, labāk ir atturēties no ievades [type = iesniegt] un pieturēties pie pogas elementiem. Vai vienkārši turpiniet lasīt.

Pievienojot ripples, lai iesniegtu ievadus

Tīmekļa lietojumprogrammā, pie kuras strādāju, mums jau bija daudz iesniegšanas pogu. Lai tos visus mainītu par atšķirīgu elementu, būs nepieciešams daudz darba un liels risks sabojāt stila lapas un JavaScript loģiku. Tāpēc man bija jāizdomā, kā esošajām iesniegšanas pogām pievienot ripples.

Iesaiņojuma konteinera izmantošana

Es ātri sapratu, ka es varētu iesaiņot iesniegšanas pogu iekšējā bloka elementa iekšpusē un izmantot elementu inline bloķēt kā pulsācijas virsmu. Šī ir ātra demonstrācija:

Lai gan man patīk šis risinājums tā vienkāršības dēļ, tas tomēr prasīja, lai es pārāk daudzās vietās mainītu uzcenojumu. Un es zināju, ka tas būs trausls risinājums - jaunie izstrādātāji iesaistīsies projektā un izveidos iesniegšanas pogas, neiesaiņojot tos ripple virsmā. Tāpēc es turpināju meklēt citus risinājumus, kuriem nebija nepieciešams mainīt DOM.

Radiālie slīpumi

Radiālā gradienta sintakse ļauj man kontrolēt gan gradienta centru, gan tā lielumu. Protams, tas ļauj man arī kontrolēt gradienta krāsu, ieskaitot daļēji caurspīdīgas krāsas. Un tas nekad nepārlādē elementu, kuram tas tiek piemērots. Tāpēc šķiet, ka tas jau dara visu, kas man vajadzīgs!

Ne tik ātri ... pietrūkst vienas lietas: fona attēla īpašība nav atdarināma. Izmantojot CSS animācijas, es nevarēju likt gradientam augt un samazināties līdz caurspīdīgam. Man izdevās panākt tā izaugsmi, aktivizējot fona lieluma īpašumu, bet tas bija viss, ko es varēju darīt.

Es izmēģināju dažas citas lietas, piemēram, kā animētu attēlu (izmantojot apng formātu) izbalējušu loku un izmantoju to kā fona attēlu. Bet tad es nevarēju kontrolēt, kad sākās un beidzās attēla cilpa.

Visbeidzot, risinājums ar JavaScript

Ko nevar darīt CSS, to var izdarīt JavaScript. Pavadījis vairāk laika, nekā esmu gatavs atzīt, ka cenšos panākt šo efektu, izmantojot CSS animācijas, es vienkārši atteicos un nolēmu animāciju uzrakstīt JavaScript.

Es sāku ar augšējā radiālā gradienta risinājumu un izmantoju window.requestAnimationFrame, lai veidotu mainīgu radiālā gradienta animāciju, kas aug un izbalē. Šis ir mans galīgais risinājums:

Secinājums

Tātad ir iespējama pulsācijas ietekme uz iesniegšanas pogām, tikai ne tikai ar CSS.

Es nekur tīmeklī nevarēju atrast šo paņēmienu, kas būtu dokumentēts, tāpēc es to saucu par savu. Leonardo pulsācijas tehnikā nav vajadzīgas izmaiņas DOM, un tā darbojas ar jebkuru elementu, jo tā nav atkarīga no pseidoelementiem vai pakārtotiem elementiem. Tomēr tas nav nevainojams risinājums.

Pirmkārt, tur ir sniegums. Animējot gradientu ar JavaScript, jūs zaudējat daudz pārlūka optimizāciju. Tā kā vienīgais mainītais īpašums ir fona attēls, man būtu aizdomas, ka pārlūkprogrammām nevajadzēs mainīties, un viņiem vienkārši būs jāpiemēro stili un jāpārkrāso elements. Praksē tieši tas notiek, un sniegums ir patiešām labs. Izņēmums no šī paziņojuma ir Firefox Mobile, kas kaut kādu iemeslu dēļ neatpaliek no animācijas. (rediģēt: mūsdienu Firefox Mobile versijās animācija ir vienmērīga)

Otrkārt, paņēmienā tiek izmantota pogas fona attēla īpašība. Ja jūsu noformējums prasa, lai jūsu pogām attēls tiktu piemērots uz tā fona, ņirboņa efekts to ignorēs. Ja jums tiešām ir nepieciešams šis attēls uz jūsu dizaina, tad JavaScript var tikt modificēts, lai uz esošā fona attēla uzzīmētu radiālo gradientu.

Treškārt, šķiet, ka tas nedarbojas Internet Explorer. Tomēr es neredzu iemeslu, kāpēc tam nevajadzētu darboties ar IE10 un jaunāku versiju. Varbūt tas ir tāpēc, ka IE radiālajam gradientam izmanto atšķirīgu sintakse. Bet kam mūsdienās rūp IE? (rediģēt: šī metode darbojas bez problēmām pārlūkprogrammā Internet Explorer 11)