CSS metodai, skirti medžiagų pulsavimo efektui

Įvairių virpėjimo efektų metodų, naudojant CSS ir „JavaScript“, vadovas

Neseniai turėjau įdiegti „pulsavimo“ efektą iš medžiagos projektavimo į interneto programą. Ir tada supratau, kad net neįsivaizduoju, kaip tai buvo įgyvendinta. Tai paskatino mane mokytis esamų diegimų ir netgi sugalvoti visiškai naują techniką, kuri gali būti jums naudinga.

Koks yra šis pulsavimo efektas?

Palaukite, jūs nežinote, koks yra „Google“ medžiagoje „Dizainas“ esantis efektas? Ar daug metų gyveni oloje?

Virpėjimo efektas naudojamas paspaudus mygtuką. Jis veikia lygiai taip pat, kaip sąveikaujama su pele ar palietimu.

Padėtis, kurią spustelėjote ar palietėte mygtuką, vadinama kontaktiniu tašku. Iš ten pulsavimas siunčiamas į išorę, prarandant nepermatomumą, nes jis didėja, kol užpildo visą mygtuką. Tada jis visiškai išnyksta.

Šio pulsavimo efekto dinamika yra panaši į virpėjimą, kurį gaunate, kai liečiate skysčio paviršių, arba kai numetate uolą į ežerą.

Ripples, kuriuos rasite internete

Atlikęs keletą tyrimų, aš galėčiau rasti du pagrindinius metodus, kurie yra naudojami norint įgyti efektą interneto programose.

Naudojant :: po pseudoelementą

Taikant šią techniką, mygtukas :: po pseudoelemento yra pusiau skaidrus apskritimas, kuris animuojamas, kad augtų ir išnyktų. Talpyklos mygtukas turi būti perpildytas: paslėptas, kad apskritimas niekada neperpildytų už mygtuko paviršiaus, ir padėtis: santykinai, kad būtų lengviau išdėstyti apskritimą mygtuke. Daugiau informacijos apie šią techniką galite perskaityti šiame Ionuț Colceriu straipsnyje.

Vienas iš nuostabių šios technikos dalykų yra tai, kad tai yra grynas CSS sprendimas, skirtas pulsavimo efektui. Tačiau pulsavimo efektas visada prasideda nuo mygtuko centro, o ne nuo sąlyčio taško. Tai nėra pats natūraliausias atsiliepimas.

Tai galima patobulinti naudojant „JavaScript“, kad būtų galima išsaugoti sąlyčio tašką ir naudoti jį pulsavimo vietai išdėstyti. Būtent tai „material.io“ padarė savo žiniatinklio suplėtimo komponentui. Kontaktinio taško saugojimui jis naudoja CSS kintamuosius, o pseudoelementas :: naudoja šiuos kintamuosius padėties nustatymui.

Vaikų elementų naudojimas

Iš esmės ši technika naudoja tą pačią strategiją kaip ir anksčiau. Vietoj pseudoelemento mygtuko viduje pridedamas span elementas, kurį vėliau galima išdėstyti per „JavaScript“. Ši technika aprašyta šiame straipsnyje Jhey Tompkins.

Paprasčiausias įgyvendinimas sukuria intervalą kiekvienam mygtuko paspaudimui, o pelės padėtis paspaudimo įvykyje naudojama norint pakeisti span ilgį. CSS animacija verčia plėsti ir blėsti tol, kol tampa visiškai skaidri. Mes galime pasirinkti pašalinti DOM tarpą, kai animacija pasibaigs, arba tiesiog palikti jį ten po kilimu - niekas tikrai nepastebės, kad kabo skaidrus spanas.

Radau kitą variantą, kuriame antrinis elementas yra svg, o ne span, o svg yra pagyvinamas naudojant „JavaScript“. Šį variantą paaiškina Dennisas Gaebelis, tačiau iš esmės jis atrodo tas pats ir galbūt leidžia naudoti sudėtingas SVG formas ir efektus.

Pateikimo duomenų problema

Abi aukščiau aprašytos technikos atrodo puikios. Bet tai nutinka, kai bandžiau juos pritaikyti įvesties elementams, kurių tipas = pateikti:

Kodėl jie neveikia?

Įvesties elementas yra pakeistas elementas. Trumpai tariant, tai reiškia, kad su šiais elementais galima padaryti labai mažai, atsižvelgiant į DOM ir CSS. Tiksliau, jie negali turėti antrinių elementų ir jokių pseudoelementų. Dabar aišku, kodėl šie būdai nepavyksta.

Taigi, jei naudojate Medžiagos dizainą, geriau atsiriboti nuo įvesties [type = pateikti] ir laikytis mygtukų elementų. Arba tiesiog skaitykite toliau.

Pridedami ripples pateikti įvestys

Žiniatinklio programoje, kurioje dirbau, jau turėjome daug pateikimo mygtukų. Jei juos visus pakeisite skirtingais elementais, prireiks daug darbo ir didelė rizika sugadinti stilių lenteles ir „JavaScript“ logiką. Taigi aš turėjau išsiaiškinti, kaip pridėti ripples prie esamų pateikimo mygtukų.

Naudojant vyniojamąjį indą

Greitai supratau, kad galėčiau apvynioti pateikimo mygtuką „inline-block“ elemento viduje ir naudoti „inline-block“ elementą kaip „pulsavimo“ paviršių. Čia yra greita demonstracinė versija:

Nors šis sprendimas man patinka dėl jo paprastumo, jis vis tiek reikalavo pakeisti žymėjimą per daug vietų. Ir aš žinojau, kad tai bus trapus sprendimas - nauji kūrėjai įsijungs į projektą ir sukuria pateikimo mygtukus, tinkamai nevyniodami į juos į virpančią paviršių. Taigi aš nuolat ieškojau kitų sprendimų, kuriems nereikia pakeisti DOM.

Radialiniai nuolydžiai

Radialinio gradiento sintaksė leidžia man valdyti ir gradiento centrą, ir dydį. Be abejo, tai taip pat leidžia man valdyti gradiento spalvą, įskaitant pusiau skaidrias spalvas. Ir niekada neperpildo elemento, kuriam jis pritaikytas. Taigi panašu, kad tai jau daro viską, ko man reikia!

Ne taip greitai ... trūksta vieno dalyko: fono vaizdo ypatybės nėra pagyvinamos. Negalėjau priversti gradiento augti ir pereiti prie skaidrumo naudodamas CSS animaciją. Man pavyko priversti jį augti, pagyvinant fono dydžio nuosavybę, bet tai buvo viskas, ką galėjau padaryti.

Išbandžiau keletą kitų dalykų, pavyzdžiui, turėjau išblukusį ratą kaip animuotą vaizdą (naudodamas apng formatą) ir pritaikiau jį kaip fono paveikslėlį. Bet tada aš negalėjau kontroliuoti, kada vaizdo ciklas prasidėjo ir baigėsi.

Galiausiai sprendimas su „JavaScript“

Ko negalite padaryti CSS, galite tai padaryti „JavaScript“. Praleidęs daugiau laiko, nei aš sutinku pripažinti, kad bando išgauti šį efektą dirbdamas naudodamas CSS animaciją, aš tiesiog pasidaviau ir nusprendžiau animaciją parašyti „JavaScript“.

Pradėjau nuo aukščiau nurodyto radialinio gradiento sprendimo ir, naudodamas langą.requestAnimationFrame, naudodamas skystą radialinio gradiento animaciją, augantį ir blukiantį. Štai mano galutinis sprendimas:

Išvada

Taigi, pateikimo mygtukus galima paveikti pulsavimo būdu, tik ne naudojant CSS.

Niekur internete neradau šios technikos dokumentais, todėl vadinu ją savo. „Leonardo“ ripple technika nereikalauja DOM pakeitimų ir veikia su bet kokiu elementu, nes ji nėra pagrįsta pseudo elementais ar antriniais elementais. Tačiau tai nėra nepriekaištingas sprendimas.

Pirma, tai spektaklis. Animuodami gradientą naudodami „JavaScript“, prarasite daug naršyklės optimizacijų. Kadangi vienintelė keičiama savybė yra fono vaizdas, įtarčiau, kad naršyklėms nereikės perdaryti, o tereikės iš naujo pritaikyti stilius ir perdažyti elementą. Praktiškai būtent taip nutinka, o atlikimas yra tikrai geras. Išimtis šiam teiginiui yra „Firefox Mobile“, kuris dėl tam tikrų priežasčių neatsilieka nuo animacijos. (Redaguoti: šiuolaikinėse „Firefox Mobile“ versijose animacija sklandi)

Antra, technika naudoja mygtuko fono paveikslėlį. Jei jūsų dizainas reikalauja, kad jūsų mygtukai būtų pritaikyti atvaizdo fone, virpėjimo efektas tai pakeis. Jei jums to paveikslo tikrai reikia savo dizaine, tada „JavaScript“ gali būti pakeista, kad ant esamo fono paveikslo būtų brėžiamas radialinis gradientas.

Trečia, neatrodo, kad tai veikia „Internet Explorer“. Tačiau nematau jokios priežasties, kodėl ji neturėtų veikti su IE10 ir naujesnėmis versijomis. Galbūt taip yra todėl, kad IE radialinis gradientas naudoja skirtingą sintaksę. Bet kam šiais laikais rūpi IE? (Redaguoti: šis metodas veikia be jokių problemų „Internet Explorer 11“)