CSS tehnike za efekt valovanja materijala

Vodič za različite tehnike za efekt ripplea pomoću CSS-a i JavaScript-a

Nedavno sam morao implementirati efekt ripplea iz dizajna materijala u web aplikaciju. I tada sam shvatio da nemam pojma kako se to provodi. To me odvelo na putovanje kako bih proučio postojeće implementacije, pa čak i došao do potpuno nove tehnike koja bi vam mogla biti korisna.

Kakav je to efekt varalice?

Čekajte, ne znate efekt varalice iz Googleovog Materijalnog dizajna? Živite li u pećini koliko godina?

Efekat valovitosti koristi se kada pritisnete gumb. Djeluje na isti način i za interakcije miša ili dodira.

Položaj na koji kliknete ili dodirnete gumb naziva se kontaktnom točkom. Odatle se pukotina šalje pomičući se prema van, gubeći neprozirnost kako raste, sve dok ne napuni cijeli gumb. Tada potpuno nestaje.

Dinamika ovog efekta valovanja slična je pukotinama koje dobijete kada dodirnete tekuću površinu ili kad bacate kamen u jezero.

Oboje ćete naći na webu

Nakon istraživanja učinio sam dvije glavne tehnike koje se koriste za provođenje efekta varalice na web aplikacijama.

Korištenje :: nakon pseudo-elementa

Pomoću ove tehnike pseudo element :: nakon gumba stiliziran je kao poluprozirni krug i animiran je da raste i propada. Gumb spremnika mora imati prelijevanje: skriveno tako da krug nikada ne prelijeva izvan površine gumba i položaj: relativno da bi bilo lakše pozicionirati krug unutar gumba. Više detalja o ovoj tehnici možete pročitati u ovom članku Ionuț Colceriu.

Jedna od sjajnih stvari u vezi s ovom tehnikom je da je to čisto CSS rješenje efekta valovitosti. Međutim, efekt valovanja uvijek počinje od središta gumba, umjesto točke kontakta. To nije najprirodnija povratna informacija.

To bi se moglo poboljšati pomoću JavaScripta za pohranjivanje kontaktne točke i korištenjem za pozicioniranje vage. To je upravo ono što je material.io učinio za svoju komponentu mrežne varalice. Koristi CSS varijable za pohranjivanje kontaktne točke, a pseudo-element :: after koristi ove varijable za pozicioniranje.

Korištenje podređenih elemenata

U osnovi, ova tehnika koristi istu strategiju kao i prije. Ali umjesto pseudo-elementa, dodaje se raspon elementa unutar gumba, koji se tada može postaviti putem JavaScript-a. Ovu je tehniku ​​u ovom članku opisao Jhey Tompkins.

Najjednostavnija implementacija stvara raspon za svaki klik na gumb i koristi položaj miša na događaju klika da promijeni položaj raspona. CSS animacija raspon raste i blijedi dok ne postane potpuno proziran. Možemo odlučiti ukloniti raspon iz DOM-a nakon što animacija završi, ili je ostavimo tamo pod tepihom - nitko neće primijetiti kako prozirni raspon visi okolo.

Pronašao sam drugu varijaciju toga, na kojem je podređeni element svg umjesto span-a, a SVG je animiran putem JavaScript-a. Dennis Gaebel objašnjava ovu varijaciju, ali u suštini se čini da je ista i možda dopušta upotrebu složenih SVG oblika i efekata.

Problem sa slanjem unosa

Obje gore opisane tehnike izgledaju sjajno. Ali to se događa kad sam ih pokušao primijeniti na ulazne elemente s tipom = submit:

Zašto ne rade?

Ulazni element je zamijenjeni element. Ukratko, to znači da s tim elementima možete učiniti vrlo malo, u odnosu na DOM i CSS. Konkretno, ne mogu imati podređene elemente, niti pseudo-elemente. Sada je jasno zašto te tehnike ne uspijevaju.

Dakle, ako upotrebljavate Material Design, bolje je držati se podalje od unosa [type = submit] i držati se elemenata gumba. Ili samo nastavite čitati.

Dodavanje valova za slanje ulaza

Na web aplikaciji na kojoj sam radio već smo imali dosta gumba za slanje. Promjena svih njih da postanu drugačiji element zahtijeva mnogo rada i visok rizik od probijanja tablica stilova i logike JavaScript-a. Stoga sam morao smisliti kako dodati valove u postojeće gumbe za slanje.

Korištenjem ambalaže za omatanje

Brzo sam shvatio da mogu umetnuti gumb za slanje unutar elementa ugrađenog bloka i upotrijebiti element ugrađenog bloka kao površinu valjka. Evo kratkog prikaza:

Iako mi se ovo rješenje sviđa zbog njegove jednostavnosti, ipak je zahtijevalo od mene da promijenim oznaku na previše mjesta. I znao sam da će to biti krhko rješenje - novi programeri će ući u projekt i stvoriti gumbe za slanje bez da ih pravilno zamotaju u površinu. Tako sam nastavio tražiti druga rješenja za koja nije bila potrebna promjena DOM-a.

Radijalni gradijenti

Sintaksa radijalnog gradijenta omogućuje mi kontrolu i središta i veličine gradijenta. Naravno, omogućuje mi i kontrolu boje gradijenta, uključujući poluprozirne boje. I nikad ne preplavi element na koji se odnosi. Stoga se čini kao da već radi sve što trebam!

Ne tako brzo ... nedostaje jedna stvar: svojstvo pozadinske slike nije animirano. Nisam mogao učiniti da gradijent naraste i propadne do prozirnog koristeći CSS animacije. Uspio sam to povećati animirajući svojstvo veličine pozadine, ali to je bilo jedino što sam mogao učiniti.

Pokušao sam s još nekoliko stvari, poput uspostavljanja kruga koji bledi kao animirane slike (koristeći apng format), i primijenio je kao pozadinsku sliku. Ali tada nisam mogao kontrolirati kada se petlja za slike pokrenula i završila.

Konačno, rješenje s JavaScript-om

Ono što ne možete u CSS-u, možete to učiniti i u JavaScript-u. Nakon što sam potrošio više vremena nego što sam spreman priznati pokušavajući postići ovaj efekt radeći pomoću CSS animacija, jednostavno sam odustao i odlučio sam napisati animaciju na JavaScript-u.

Počeo sam s rješenjem radijalnog gradijenta iznad i koristio sam window.requestAnimationFrame da napravim fluidnu animaciju radijalnog gradijenta, raste i blijedi. Evo mog konačnog rješenja:

Zaključak

Na gumbe za predaju mogu se pojaviti valovi, samo ne sa CSS-om.

Nisam mogao pronaći ovu tehniku ​​dokumentiranu nigdje na webu, pa je nazivam svojom. Leonardova tehnika valjkarenja ne zahtijeva izmjene DOM-a i radi za bilo koji element jer se ne oslanja na pseudo-elemente ili podređene elemente. Međutim, to nije besprijekorno rješenje.

Prvo, tu je izvedba. Animacijom gradijenta s JavaScript-om gubite puno optimizacija preglednika. Ali, budući da se jedino svojstvo koje se mijenja je pozadinska slika, sumnjam da se preglednici ne bi trebali ponovo nadopunjavati, već će samo zahtijevati ponovnu primjenu stilova i ponovno uređivanje elementa. U praksi se upravo to događa i performanse su stvarno dobre. Izuzetak od te izjave je Firefox Mobile, koji iz nekog razloga ne ide u korak s animacijom. (uredi: animacija je glatka u modernim verzijama Firefox Mobile)

Drugo, tehnika koristi svojstvo pozadinske slike gumba. Ako vaš dizajn zahtijeva da se na vašim gumbima primijeni slika na pozadini, efekt valovitosti bi to nadjačao. Ako vam je stvarno potrebna slika na vašem dizajnu, onda bi se JavaScript mogao izmijeniti kako bi se nacrtao radijalni gradijent na vrhu postojeće pozadinske slike.

Treće, čini se da to ne radi u programu Internet Explorer. Međutim, ne vidim nijedan razlog zašto to ne bi trebao raditi s IE10 i novijima. Možda je zbog toga što IE koristi drugačiju sintaksu za radijalni gradijent. Ali, koga danas zanima IE? (uredi: ova metoda funkcionira bez problema u programu Internet Explorer 11)