Preden sem kariero skočil v razvoj, sem v After Effects delal kup gibljive grafike. Toda tudi s tem ozadjem se mi je animiranje na spletu še vedno zdelo precej begajoče.
Video grafika je zasnovana v določenem razmerju in nato izvožena. Končano! Vendar v spletu ni nobenih "izvoznih nastavitev". Samo potisnemo kodo v svet in naše animacije se morajo prilagoditi kateri koli napravi, na kateri pristanejo.
Pogovorimo se torej o odzivni animaciji! Kako se najbolje lotimo animacije na divjem divjem spletu? Zajeli bomo nekaj splošnih pristopov, nekaj nasvetov, specifičnih za GSAP, in nekaj načel gibanja. Začnimo z okvirjanjem …
Kako bo ta animacija uporabljena?
Članek Zacha Saucierja o odzivni animaciji priporoča, da naredite korak nazaj in razmislite o končnem rezultatu, preden skočite v kodo.
Ali bo animacija modul, ki se ponavlja v več delih vaše aplikacije? Ali je sploh treba meriti? Upoštevanje tega lahko pomaga določiti način, na katerega naj se animacija prilagodi, in vam prepreči zapravljanje truda.
To je odličen nasvet. A velika del oblikovanja odzivne animacije je vedeti, ali in kako je treba to animacijo prilagoditi, ter nato izbrati pravi pristop od samega začetka.
Večina animacij spada v naslednje kategorije:
- Določeno: Animacije za stvari, kot so ikone ali nalagalniki, ki ohranijo enako velikost in razmerje stranic v vseh napravah. Tukaj ni razloga za skrb! V kodo vnesite nekaj vrednosti slikovnih pik in nadaljujte s svojim dnevom.
- fluid: Animacije, ki se morajo tekoče prilagajati v različnih napravah. Večina animacij postavitve spada v to kategorijo.
- Ciljno: Animacije, ki so specifične za določeno napravo ali velikost zaslona ali se bistveno spremenijo na določeni prelomni točki, kot so animacije samo za namizje ali interakcije, ki temeljijo na interakciji, specifični za napravo, kot je dotik ali lebdenje.
Tekoče in ciljane animacije zahtevajo drugačne načine razmišljanja in rešitve. Oglejmo si…
Tekoča animacija
As Andy Bell pravi: Bodite mentor brskalnika, ne njegov mikroupravitelj – dajte brskalniku nekaj trdnih pravil in namigov, nato pa mu dovolite, da sprejema prave odločitve za ljudi, ki ga obiščejo.
(Tukaj so diapozitivi iz te predstavitve.)
Tekoča animacija pomeni, da brskalniku omogočite, da opravi trdo delo. Številne animacije se zlahka prilagodijo različnim kontekstom samo z uporabo pravih enot od začetka. Če spremenite velikost tega peresa, lahko vidite, da animacija uporablja enote vidnega polja tekoče spreminja, ko se brskalnik prilagaja:
Vijolično polje celo spreminja širino na različnih prelomnih točkah, a ker za premikanje uporabljamo odstotke, se tudi animacija spreminja skupaj z njim.
Animiranje lastnosti postavitve, kot je left in top lahko povzročijo preoblikovanje postavitve in nemirno 'janky' animacijo, zato se, kjer je to mogoče, držite transformacij in motnosti.
Vendar nismo omejeni le na te enote – poglejmo še nekaj drugih možnosti.
enote SVG
Ena od stvari, ki mi je všeč pri delu s SVG, je, da lahko za animacijo uporabimo uporabniške enote SVG, ki so takoj pripravljene odzivne. Namig je v resnici v imenu - Prilagodljiv Vektorska grafika. V SVG-landu so vsi elementi narisani na določenih koordinatah. Prostor SVG je kot neskončen kos milimetrskega papirja, kjer lahko razporejamo elemente. The viewBox določa dimenzije milimetrskega papirja, ki ga lahko vidimo.
viewBox="0 0 100 50”V tej naslednji predstavitvi je naš SVG viewBox is 100 enote široke in 50 enote visoke. To pomeni, če animiramo element z 100 enot vzdolž osi x, se bo vedno premaknil za celotno širino svojega nadrejenega SVG, ne glede na to, kako velik ali majhen je ta SVG! Spremenite velikost predstavitve, da jo vidite.
Animiranje podrejenega elementa glede na širino nadrejenega vsebnika je v deželi HTML majhen trik. Do zdaj smo morali z JavaScriptom pridobiti širino nadrejenega elementa, kar je dovolj enostavno, ko animirate from preoblikovan položaj, vendar nekoliko bolj nemiren, ko animirate to nekje, kot lahko vidite v naslednji predstavitvi. Če je vaša končna točka preoblikovan položaj in spremenite velikost zaslona, boste morali ta položaj prilagoditi ročno. Neurejeno… 🤔
Če prilagodite vrednosti pri spreminjanju velikosti, tega ne pozabite debounceali celo sproži funkcijo, ko brskalnik konča spreminjanje velikosti. Poslušalci spreminjanja velikosti sprožijo ogromno dogodkov vsako sekundo, zato je posodabljanje lastnosti vsakega dogodka za brskalnik veliko dela.
Vendar pa bo ta animacija hitrosti kmalu preteklost! Drum roll prosim ... 🥁
Kontejnerske enote! Lepe stvari. V času, ko to pišem, delujejo le v Chromu in Safariju — a morda bomo, ko boste to brali, imeli tudi Firefox. Preverite jih v akciji v naslednji predstavitvi. Poglej te fantje gredo! Ali ni to razburljivo, animacija, ki je relativna glede na nadrejene elemente!
Ti podatki o podpori brskalnika izvirajo iz Kaniuz, ki vsebuje več podrobnosti. Številka označuje, da brskalnik podpira funkcijo v tej različici ali novejši.
desktop
| Krom | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 105 | Ne | Ne | 105 | 16.0 |
Mobilni / tablični računalnik
| android-chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Ne | 106 | 16.0 |
Prehodi tekoče postavitve s FLIP
Kot smo že omenili, je v deželi SVG vsak element lepo postavljen na eno mrežo in ga je zelo enostavno odzivno premikati. V deželi HTML je veliko bolj zapleteno. Za izdelavo odzivnih postavitev uporabljamo vrsto različnih metod pozicioniranja in sistemov postavitev. Ena glavnih težav pri animaciji na spletu je ta veliko sprememb postavitve ni mogoče animirati. Morda se mora element premakniti s položaja relative do fixed, ali nekatere podrejene vsebniku flex je treba gladko premešati po vidnem polju. Morda je treba element celo ponovno nadrediti in ga premakniti na popolnoma nov položaj v DOM.
Zapleteno, kaj?
No. Tehnika FLIP je tu, da reši dan; omogoča nam enostavno animacijo teh nemogočih stvari. Osnovna predpostavka je:
- prva: Zgrabite začetni položaj elementov, vključenih v prehod.
- Zadnja: Premaknite elemente in zajemite končni položaj.
- Invert: Razmislite o spremembah med prvim in zadnjim stanjem ter uporabite transformacije, da obrnete elemente nazaj v prvotni položaj. Zaradi tega je videti, kot da so elementi še vedno v prvi položaju, vendar dejansko niso.
- Predvajaj: Odstranite obrnjene transformacije in jih animirajte ponarejeni prvi stanje na zadnja stanje.
Tukaj je predstavitev z uporabo vtičnika FLIP podjetja GSAP, ki namesto vas opravi vse težko delo!
Če želite razumeti nekaj več o vanilla implementaciji, pojdite k Paulu Lewisu blog post — on je možgani za tehniko FLIP.
Tekoče skaliranje SVG
Dobil si me ... to ni res nasvet za animacijo. Toda pravilna postavitev scene je nujna za dobro animacijo! SVG se privzeto zelo lepo spreminja, vendar lahko z njim nadziramo, kako se spreminja preserveAspectRatio, kar je zelo priročno, ko razmerje stranic elementa SVG in viewBox razmerje stranic je drugačno. Deluje skoraj na enak način kot background-position in background-size lastnosti v CSS. Deklaracija je sestavljena iz vrednosti poravnave (background-position) In Srečati or Slice referenca (background-size).
Kar se tiče teh referenc Meet and Slice – slice je kot background size: coverin meet je kot background-size: contain.
preserveAspectRatio="MidYMax slice"— Poravnajte na sredino osi x, na dno osi y in povečajte, da pokrijete celotno vidno polje.preserveAspectRatio="MinYMin meet"— Poravnajte levo od osi x, vrh osi y in povečajte, pri tem pa ohranite celotnoviewBoxvidno.
Tom Miller naredi korak dlje z uporabo overflow: visible v CSS in vsebovalni element za razkrivanje »stopnje levo« in »stopnje desno«, medtem ko je višina omejena:
Za odzivne animacije SVG je lahko priročno uporabiti polje za ogled SVG, da ustvarite pogled, ki se obrezuje in spreminja pod določeno širino brskalnika, hkrati pa razkrije več animacije SVG na desni in levi, ko je brskalnik širši od tega. prag. To lahko dosežemo tako, da dodamo preliv, viden na SVG, in ga združimo z a
max-heightovoj, da preprečite preveliko navpično skaliranje SVG.
Platno s tekočim skaliranjem
Platno je veliko bolj zmogljivo za kompleksne animacije veliko gibljivih delov kot animiranje SVG ali HTML DOM, vendar je tudi sama po sebi bolj zapletena. Za te povečane zmogljivosti se morate potruditi! Za razliko od SVG, ki ima čudovite odzivne enote in skaliranje takoj, je treba malo šefovati in mikroupravljati.
Rad postavljam svoje tako da deluje skoraj na enak način kot SVG (morda sem pristranski) s čudovitim sistemom enot za delo in fiksnim razmerjem stranic. prav tako ga je treba znova narisati vsakič, ko se kaj spremeni, zato ne pozabite odložiti ponovnega risanja, dokler brskalnik ne konča s spreminjanjem velikosti, ali odstrani odboj!
George Francis sestavite tudi to čudovita majhna knjižnica ki vam omogoča definiranje platna viewBox atribut in preserveAspectRatio — točno tako kot SVG!
Ciljna animacija
Včasih boste morali k svoji animaciji uporabiti manj tekoč in bolj usmerjen pristop. Mobilne naprave imajo veliko manj prostora in manjšo zmogljivost animacije kot namizni računalnik. Zato je smiselno uporabnikom mobilnih naprav ponuditi zmanjšano animacijo, morda celo brez animacije:
Včasih je najboljša odzivna animacija za mobilne naprave sploh brez animacije! Za mobilni UX dajte prednost tem, da uporabniku omogočite hitro uporabo vsebine namesto čakanja, da se animacije končajo. Mobilne animacije bi morale izboljšati vsebino, navigacijo in interakcije, namesto da bi jih odložile. Eric van Holtz
Da bi to naredili, lahko uporabimo medijske poizvedbe za ciljanje na določene velikosti vidnega polja, tako kot to počnemo pri oblikovanju s CSS! Tukaj je preprosta predstavitev, ki prikazuje animacijo CSS, ki se obravnava z uporabo medijskih poizvedb, in animacijo GSAP, ki se obravnava z gsap.matchMedia():
Preprostost te predstavitve skriva kup čarovnije! Animacije JavaScript zahtevajo nekaj več nastavitev in čiščenja, da lahko pravilno delujejo samo na eni določeni velikosti zaslona. V preteklosti sem videl grozljivke, ko so ljudje preprosto skrili animacijo pred pogledom v CSS z opacity: 0, vendar animacija še vedno brbota v ozadju in porabi vire. 😱
Če se velikost zaslona ne ujema več, je treba animacijo uničiti in sprostiti za zbiranje smeti, elemente, na katere vpliva animacija, pa je treba očistiti vseh vgrajenih slogov, ki jih vnese gibanje, da preprečite konflikte z drugimi slogi. Pokonci do gsap.matchMedia(), je bil to težaven postopek. Vsako animacijo smo morali spremljati in vse to upravljati ročno.
gsap.matchMedia() namesto tega vam omogoča preprosto vstavljanje vaše animacijske kode v funkcijo, ki se izvede samo, ko določeno medijska poizvedba tekme. Potem, ko se ne ujema več, se vse animacije GSAP in ScrollTriggers v tej funkciji se samodejno povrnejo. Medijska poizvedba, v katero se prikažejo animacije, opravi vse težko delo namesto vas. Je v GSAP 3.11.0 in spreminja igro!
Tudi nismo omejeni le na velikost zaslona. Obstajajo ogromno medijskih funkcij priklopiti se!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */V naslednji predstavitvi smo dodali preverjanje za prefers-reduced-motion tako da uporabniki, ki jih animacija zmede, ne bodo motili stvari, ki švigajo naokoli.
Oglejte si še drugo zabavno predstavitev Toma Millerja, kjer uporablja razmerje stranic naprave za prilagajanje animacije:
Razmišljanje izven okvirjev, onkraj velikosti zaslona
O odzivni animaciji je treba razmišljati več kot le o velikostih zaslona. Različne naprave omogočajo različne interakcije in zlahka se znajdete v zagati, če tega ne upoštevate. Če ustvarjate stanja lebdenja v CSS, lahko uporabite hover medijska funkcija za preverjanje, ali je uporabnik primarni vnosni mehanizem lahko lebdi nad elementi.
@media (hover: hover) {
/* CSS hover state here */
}Nekaj nasvetov iz Jake Whiteley:
Večino časa naše animacije temeljijo na širini brskalnika, pri čemer naivno domnevamo, da uporabniki namiznih računalnikov želijo stanja lebdenja. Osebno sem imel v preteklosti veliko težav, pri katerih sem preklopil na postavitev namizja >1024 slikovnih pik, vendar bi lahko zaznaval dotik v JS – kar je povzročilo neujemanje, kjer je bila postavitev za namizne računalnike, JS pa za mobilne naprave. Te dni se zanašam na lebdenje in kazalec, da zagotovim pariteto in obravnavam površine ipad Pro ali Windows (ki lahko spremenijo vrsto kazalca, odvisno od tega, ali je pokrov spuščen ali ne)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Nato bom združil svoje poizvedbe glede postavitve CSS in poizvedbe JavaScript, tako da bom vnosno napravo obravnaval kot glavni dejavnik podprta po širini, ne pa nasprotno.
ScrollTrigger nasveti
Če uporabljate GSAP Vtičnik ScrollTrigger, obstaja majhen priročen pripomoček, ki ga lahko priključite, da zlahka prepoznate zmožnosti naprave na dotik: ScrollTrigger.isTouch.
0- brez dotika (samo kazalec/miška)1- samo na dotik naprava (kot telefon)2– naprava lahko sprejme na dotik vhod in miška/kazalec (kot tablice Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Še en nasvet za odzivno animacijo, ki jo sproži drsenje ...
Naslednja spodnja predstavitev premika galerijo slik vodoravno, vendar se širina spreminja glede na velikost zaslona. Če spremenite velikost zaslona, ko ste na polovici počiščene animacije, lahko na koncu dobite pokvarjene animacije in zastarele vrednosti. To je običajna hitrostna napaka, ki pa jo je enostavno rešiti! Izračun, ki je odvisen od velikosti zaslona, dodajte v funkcionalno vrednost in nastavite invalidateOnRefresh:true. Tako bo ScrollTrigger namesto vas ponovno izračunal to vrednost, ko brskalnik spremeni velikost.
Bonus GSAP piflarski namig!
V mobilnih napravah se naslovna vrstica brskalnika običajno prikaže in skrije med premikanjem. To se šteje kot dogodek spreminjanja velikosti in sproži a ScrollTrigger.refresh(). To morda ni idealno, saj lahko povzroči skoke v vaši animaciji. Dodan GSAP 3.10 ignoreMobileResize. Ne vpliva na obnašanje vrstice brskalnika, vendar preprečuje ScrollTrigger.refresh() od streljanja za majhne navpične spremembe velikosti na napravah samo na dotik.
ScrollTrigger.config({
ignoreMobileResize: true
});Načela gibanja
Mislil sem, da bi vam pustil nekaj najboljših praks, ki jih morate upoštevati pri delu z gibanjem v spletu.
Distanca in olajšanje
Majhna, a pomembna stvar, ki jo zlahka pozabite pri odzivni animaciji, je razmerje med hitrostjo, zagonom in razdaljo! Dobra animacija mora posnemati resnični svet da se počutijo verodostojne, v resničnem svetu pa traja dlje, da premagajo večjo razdaljo. Bodite pozorni na razdaljo, ki jo vaša animacija prepotuje, in se prepričajte, da sta uporabljeno trajanje in popuščanje smiselna v kontekstu drugih animacij.
Pogosto lahko uporabite tudi bolj dramatično popuščanje elementov, ki jih je treba še potovati, da prikažete povečan zagon:
Za določene primere uporabe je morda koristno, če trajanje prilagodite bolj dinamično glede na širino zaslona. V naslednji predstavitvi, ki jo bomo uporabili gsap.utils za vpenjanje vrednosti, ki jo dobimo nazaj iz toka window.innerWidth v razumnem obsegu, potem to število preslikamo v trajanje.
Razmik in količina
Druga stvar, ki jo morate upoštevati, je razmik in količina elementov pri različnih velikostih zaslona. Citiranje Steven Shaw:
Če imate nekakšno okoljsko animacijo (paralaksa, oblaki, drevesa, konfeti, okraski itd.), ki je razporejena okoli okna, se prepričajte, da se spreminja in/ali prilagodite količino glede na velikost zaslona. Veliki zasloni verjetno potrebujejo več elementov, razporejenih po vsem, medtem ko majhni zasloni potrebujejo le nekaj za enak učinek.
Všeč mi je, kako Opher Vishnia razmišlja o animaciji kot o odru. Dodajanje in odstranjevanje elementov ne sme biti samo formalnost, lahko je del celotne koreografije.
Pri oblikovanju odzivnih animacij izziv ni v tem, kako isto vsebino stlačiti v vidno polje, da se »prilega«, temveč v tem, kako urediti nabor obstoječe vsebine, da bo sporočala isti namen. To pomeni, da se morate zavestno odločiti, katere dele vsebine dodati in katere odstraniti. Običajno se v svetu animacije stvari ne pojavijo kar tako v kadru ali iz njega. Smiselno je razmišljati o elementih kot o vstopu ali izstopu iz »odra«, ki animira ta prehod na način, ki ima vizualni in tematski smisel.
In to je veliko. Če imate še kakšne nasvete za odzivno animacijo, jih dodajte v razdelek za komentarje. Če je kaj zelo koristnega, ga bom dodal v to zbirko informacij!
Dodatek
Še ena opomba od Tom Miller ko sem pripravljal ta članek:
Verjetno sem prepozen s tem nasvetom za vaš članek o odzivnih animacijah, vendar toplo priporočam, da "dokončajte vse animacije pred gradnjo". Trenutno nadgrajujem nekatere animacije spletnega mesta z »mobilnimi različicami«. Hvala bogu za
gsap.matchMedia… vendar si želim, da bi že od začetka vedeli, da bodo obstajale ločene mobilne postavitve/animacije.
Mislim, da vsi cenimo, da je ta nasvet za »načrtovanje vnaprej« prišel v zadnjem trenutku. Hvala, Tom, in vso srečo pri teh predelavah.
