Enne kui mu karjäär arendusse jõudis, tegin After Effectsis hunniku liikuva graafika tööd. Kuid isegi selle taustaga tundsin, et veebis animeerimine on minu jaoks üsna segane.
Videograafika kujundatakse kindlas vahekorras ja eksporditakse seejärel välja. Valmis! Kuid veebis pole ekspordiseadeid. Me lihtsalt lükkame koodi maailma välja ja meie animatsioonid peavad kohanema mis tahes seadmega, kuhu nad maanduvad.
Räägime siis reageerivast animatsioonist! Kuidas läheneda metsikus veebis animeerimisele kõige paremini? Me käsitleme mõningaid üldisi lähenemisviise, mõningaid GSAP-spetsiifilisi näpunäiteid ja mõningaid liikumispõhimõtteid. Alustame mõne raamiga…
Kuidas seda animatsiooni kasutatakse?
Zach Saucieri artikkel reageerivast animatsioonist soovitab astuda sammu tagasi, et mõelda lõpptulemusele enne koodi juurde hüppamist.
Kas animatsioon on moodul, mida korratakse teie rakenduse mitmes osas? Kas seda on üldse vaja skaleerida? Selle meelespidamine võib aidata määrata meetodi, mille abil animatsiooni skaleerida, ja vältida jõupingutuste raiskamist.
See on suurepärane nõuanne. A tohutu osa tundliku animatsiooni kujundamisest on teada, kas ja kuidas seda animatsiooni tuleb skaleerida, ning seejärel valida algusest peale õige lähenemisviis.
Enamik animatsioone jaguneb järgmistesse kategooriatesse:
- fikseeritud: Animatsioonid asjadele, nagu ikoonid või laadijad, mis säilitavad kõigis seadmetes sama suuruse ja kuvasuhte. Siin pole põhjust muretseda! Kodeerige sinna mõned piksliväärtused ja jätkake oma päevaga.
- Vedelik: Animatsioonid, mis peavad erinevates seadmetes sujuvalt kohanema. Enamik paigutusanimatsioone kuulub sellesse kategooriasse.
- Sihitud: Animatsioonid, mis on spetsiifilised teatud seadmele või ekraanisuurusele või muutuvad oluliselt teatud katkestuspunktis, nt ainult töölaua animatsioonid või interaktsioonid, mis sõltuvad seadmepõhisest interaktsioonist, nagu puudutus või hõljutamine.
Vedelikud ja suunatud animatsioonid nõuavad erinevaid mõtteviise ja lahendusi. Heidame pilgu peale…
Vedelikuanimatsioon
As Andy kelluke ütleb: Olge brauseri mentor, mitte selle mikrohaldur – andke brauserile kindlad reeglid ja näpunäited, seejärel laske sellel teha külastajate jaoks õigeid otsuseid.
(Siin on slaidid sellest esitlusest.)
Vedeliku animatsiooni eesmärk on lasta brauseril raske töö ära teha. Paljusid animatsioone saab hõlpsasti kohandada erinevate kontekstidega, kasutades algusest peale õigeid üksusi. Kui muudate selle pliiatsi suurust, näete, et animatsioon kasutab vaateava ühikud skaleerib sujuvalt, kui brauser kohandab:
Lilla kast muudab isegi laiust erinevatel murdepunktidel, kuid kuna me kasutame selle liigutamiseks protsente, mastaabib ka animatsioon koos sellega.
Paigutuse omaduste animeerimine nagu left ja top võib põhjustada paigutuse ümbervoogusid ja närvilist nördinud animatsiooni, nii et võimaluse korral pidage kinni teisendustest ja läbipaistmatusest.
Kuid me ei piirdu ainult nende üksustega – vaatame mõnda muud võimalust.
SVG ühikud
Üks asi, mis mulle SVG-ga töötamise juures meeldib, on see, et saame animatsiooniks kasutada SVG-kasutajaüksusi, mis reageerivad koheselt. Vihje on tõesti nimes - skaleeritav Vektorgraafika. SVG-maal joonistatakse kõik elemendid kindlatele koordinaatidele. SVG-ruum on nagu lõpmatu tükk millimeetripaberit, kuhu saame paigutada elemente. The viewBox määrab nähtava graafikupaberi mõõtmed.
viewBox="0 0 100 50”Selles järgmises demos on meie SVG viewBox is 100 ühikut lai ja 50 ühikut pikk. See tähendab, et kui me animeerime elementi 100 ühikut piki x-telge, liigub see alati kogu oma põhi-SVG laiuse võrra, olenemata sellest, kui suur või väike see SVG on! Muutke demo vaatamiseks suurust.
Alamelemendi animeerimine emakonteineri laiuse alusel on HTML-i maa-alal väike trikk. Siiani oleme pidanud JavaScripti abil haarama vanema laiuse, mis on animeerimisel piisavalt lihtne from ümberkujundatud asend, kuid animeerimisel pisut keerulisem to kuskil, nagu näete järgmises demos. Kui teie lõpp-punkt on teisendatud asukoht ja muudate ekraani suurust, peate seda asukohta käsitsi kohandama. Sassis… 🤔
Kui muudate suuruse muutmisel väärtusi, pidage meeles põrgatamavõi isegi käivitada funktsioon pärast brauseri suuruse muutmise lõpetamist. Suuruse muutmise kuulajad käivitavad iga sekundiga hulga sündmusi, nii et iga sündmuse atribuutide värskendamine on brauseri jaoks palju tööd.
Kuid see animatsiooni kiirendus on varsti minevik! Trummipõrin palun… 🥁
Konteinerühikud! Armas kraam. Sel ajal, kui ma seda kirjutan, töötasid need ainult Chrome'is ja Safaris, kuid võib-olla on selleks ajaks, kui seda loete, ka Firefox. Tutvuge nendega järgmises demos. Vaata, kuidas need väikesed poisid lähevad! Kas pole põnev, animatsioon, mis on seotud vanemate elementidega!
Selle brauseri tugiandmed pärinevad Kas ma võin kasutada, millel on rohkem üksikasju. Arv näitab, et brauser toetab seda funktsiooni sellel ja uuemal versioonil.
lauaarvuti
| Kroom | Firefox | IE | serv | safari |
|---|---|---|---|---|
| 105 | Ei | Ei | 105 | 16.0 |
Mobiil / tahvelarvuti
| android-kroom | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Ei | 106 | 16.0 |
Vedeliku paigutuse üleminekud FLIP-iga
Nagu varem mainisime, on SVG-landis kõik elemendid kenasti ühele ruudustikule paigutatud ja neid on väga lihtne tundlikult liigutada. HTML-maal on see palju keerulisem. Responsiivsete paigutuste koostamiseks kasutame hunnikut erinevaid positsioneerimismeetodeid ja paigutussüsteeme. Veebis animeerimise üks peamisi raskusi on see palju paigutuse muudatusi on võimatu animeerida. Võib-olla peab element positsioonilt liikuma relative et fixed, või mõned painduva konteineri lapsed tuleb vaateava ümber sujuvalt segada. Võib-olla tuleb element isegi uuesti vanem seada ja viia DOM-is täiesti uude kohta.
Keeruline, ah?
Noh. FLIP-tehnika on siin, et päästa päeva; see võimaldab meil neid võimatuid asju lihtsalt animeerida. Põhieeldus on:
- esimene: haarake üleminekuga seotud elementide algne asukoht.
- viimane: liigutage elemente ja haarake lõppasend.
- Vaheta: Töötage välja muudatused esimese ja viimase oleku vahel ja rakendage teisendusi, et pöörata elemendid tagasi nende algsesse asukohta. See jätab mulje, nagu oleksid elemendid ikka veel sees esimene positsiooni, kuid tegelikult nad seda ei ole.
- mängima: eemaldage ümberpööratud teisendused ja animeerige nende järgi võltsitud esimene osariik viimane riik.
Siin on demo, mis kasutab GSAP-i FLIP-pluginat, mis teeb kõik raskused teie eest ära!
Kui soovite vanilje teostuse kohta natuke rohkem mõista, minge Paul Lewise poole blogi postitus — ta on FLIP-tehnika taga aju.
Sujuvalt skaleeriv SVG
Sa said minust aru... see pole nii tõesti animatsiooni näpunäide. Kuid lava õige seadmine on hea animatsiooni jaoks hädavajalik! SVG skaleerib vaikimisi ülikenasti, kuid me saame kontrollida, kuidas see veelgi rohkem skaleerub preserveAspectRatio, mis on väga mugav, kui SVG-elemendi kuvasuhe ja viewBox kuvasuhted on erinevad. See toimib paljuski samamoodi nagu background-position ja background-size atribuudid CSS-is. Deklaratsioon koosneb joondusväärtusest (background-position) ja a Vastama or Viil viide (background-size).
Mis puudutab neid Meet and Slice'i viiteid - slice on nagu background size: coverja meet on nagu background-size: contain.
preserveAspectRatio="MidYMax slice"— Joondage x-telje keskosaga, y-telje põhjaga ja suurendage kogu vaateava katmiseks skaleerimist.preserveAspectRatio="MinYMin meet"— Joondage x-teljest vasakule, y-telje ülaosale ja suurendage mõõtkava, säilitades samal ajal koguviewBoxnähtav.
Tom Miller kasutades seda sammu edasi overflow: visible CSS-is ja seda sisaldavat elementi, et näidata "lava vasakpoolne" ja "lava parempoolne", hoides samas kõrgust piiratud:
Reageerivate SVG-animatsioonide jaoks võib olla mugav kasutada SVG-vaatekasti, et luua vaade, mis kärbib ja mastaabib teatud brauseri laiusest allapoole, paljastades samal ajal rohkem SVG-animatsiooni paremale ja vasakule, kui brauser on sellest laiem. künnis. Selle saavutamiseks lisame SVG-s nähtava ülevoolu ja ühendame selle a
max-heightümbris, et vältida SVG-l liiga palju vertikaalset skaleerimist.
Vedelalt skaleeruv lõuend
Lõuend on palju tõhusam keerukate animatsioonide jaoks palju liikuvatest osadest kui SVG või HTML DOM-i animeerimine, kuid see on oma olemuselt ka keerulisem. Nende jõudluse suurendamise nimel peate töötama! Erinevalt SVG-st, millel on suurepärased tundlikud üksused ja karbist välja skaleeritav, tuleb ringi juhtida ja natuke mikrojuhtida.
Mulle meeldib oma nii et see töötab sarnaselt SVG-ga (võin olla kallutatud), millel on armas ühikusüsteem ja fikseeritud kuvasuhe. Samuti tuleb iga kord ümber joonistada, kui midagi muutub, nii et ärge unustage uuesti joonistamist edasi lükata, kuni brauser on suuruse muutmise lõpetanud või debounce!
George Francis pane ka selle kokku armas väike raamatukogu mis võimaldab teil määratleda lõuendi viewBox atribuut ja preserveAspectRatio — täpselt nagu SVG!
Sihitud animatsioon
Mõnikord peate oma animatsioonile lähenema vähem sujuvalt ja suunatumalt. Mobiilseadmetel on palju vähem kinnisvara ja vähem animatsioonijõudlust kui lauaarvutitel. Seega on mõttekas pakkuda mobiilikasutajatele vähendatud animatsiooni, potentsiaalselt isegi ilma animatsioonita:
Mõnikord on mobiili jaoks parim tundlik animatsioon üldse mitte animatsioon! Mobiilse kasutuskogemuse puhul seadke prioriteediks luba kasutajal kiiresti sisu tarbida, mitte oodata animatsioonide lõppemist. Mobiilianimatsioonid peaksid pigem parandama sisu, navigeerimist ja interaktsioone, mitte seda edasi lükkama. Eric van Holtz
Selleks saame kasutada meediumipäringuid, et sihtida konkreetseid vaateava suurusi, nagu me teeme CSS-i kujundamisel! Siin on lihtne demo, mis näitab CSS-animatsiooni, mida käsitletakse meediumipäringute abil ja GSAP-animatsiooni, mida käsitletakse gsap.matchMedia():
Selle demo lihtsuses peitub hunnik maagiat! JavaScripti animatsioonid nõuavad natuke rohkem seadistamist ja puhastamist, et õigesti töötada ainult ühe kindla ekraanisuurusega. Olen varem näinud õudusi, kus inimesed on lihtsalt animatsiooni CSS-is vaate eest peitnud opacity: 0, kuid animatsioon tuhiseb endiselt taustal, kasutades ressursse. 😱
Kui ekraani suurus enam ei ühti, tuleb animatsioon hävitada ja prügikorjamiseks vabastada ning animatsiooni mõjutatud elemendid tuleb puhastada kõigist liikumisega sisseviidud sisestiilidest, et vältida konflikte muude stiilidega. Kuni kuni gsap.matchMedia(), see oli tülikas protsess. Pidime iga animatsiooni jälgima ja seda kõike käsitsi haldama.
gsap.matchMedia() Selle asemel saate hõlpsalt sisestada animatsioonikoodi funktsiooni, mis käivitatakse ainult siis, kui konkreetne meedia päringule tikud. Siis, kui see enam ei sobi, kõik GSAP-animatsioonid ja ScrollTriggers selles funktsioonis ennistatakse automaatselt. Meediapäring, millesse animatsioonid hüppatakse, teeb kogu raske töö teie eest ära. See on versioonis GSAP 3.11.0 ja see muudab mängu!
Me ei ole piiratud ka ainult ekraani suurustega. Seal on a palju meediafunktsioone külge haakima!
(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 */Järgmises demos oleme lisanud tšeki prefers-reduced-motion nii et kasutajad, kes peavad animatsiooni desorienteerivaks, ei häiriks ringi siblivatest asjadest.
Ja vaadake Tom Milleri teist lõbusat demo, kus ta kasutab animatsiooni reguleerimiseks seadme kuvasuhet:
Mõeldes väljaspool kasti, kaugemale kui ekraani suurus
Tundlikule animatsioonile tuleb mõelda rohkem kui lihtsalt ekraanisuurustele. Erinevad seadmed võimaldavad erinevat suhtlust ja kui te sellega ei arvesta, on lihtne sassi sattuda. Kui loote hõljutusolekuid CSS-is, saate kasutada hover meediumifunktsioon, et testida, kas kasutaja omab esmane sisestusmehhanism võib hõljuda elementide kohal.
@media (hover: hover) {
/* CSS hover state here */
}Mõned nõuanded Jake Whiteley:
Enamasti lähtume animatsioonide tegemisel brauseri laiusest, eeldades naiivset, et lauaarvutite kasutajad soovivad hõljutusolekuid. Mul isiklikult on minevikus olnud palju probleeme, mille puhul vahetasin üle 1024 piksli töölauapaigutusele, kuid võisin JS-is teha puutetuvastuse – see toob kaasa mittevastavuse, kus paigutus oli lauaarvutite jaoks, aga JS oli mõeldud mobiiltelefonidele. Tänapäeval toetun hõljukile ja kursorile, et tagada võrdsus ning käsitleda ipad Pro või Windowsi pindu (mis võib muuta kursori tüüpi olenevalt sellest, kas kaas on all või mitte)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Seejärel ühendan oma CSS-i paigutuse ja JavaScripti päringud, nii et pean sisendseadet esmaseks teguriks toetab laiuse järgi, mitte vastupidi.
ScrollTriggeri näpunäited
Kui kasutate GSAP-i ScrollTriggeri pistikprogramm, on olemas väike mugav utiliit, mille abil saate hõlpsalt seadme puutevõimet eristada: ScrollTrigger.isTouch.
0- puuduta (ainult kursor/hiir)1- ainult puutetundlik seade (nagu telefon)2– seade võib vastu võtta puudutama sisend ja hiir/kursor (nagu Windowsi tahvelarvutid)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Veel üks näpunäide tundlikuks kerimisega käivitatud animatsiooniks…
Allolev demo liigutab pildigaleriid horisontaalselt, kuid laius muutub sõltuvalt ekraani suurusest. Kui muudate ekraani suurust, kui olete animatsiooni poole peal, võite lõppeda katkiste animatsioonide ja aegunud väärtustega. See on tavaline, kuid kergesti lahendatav kiirustõke! Lisage ekraani suurusest sõltuv arvutus funktsionaalseks väärtuseks ja määrake invalidateOnRefresh:true. Nii arvutab ScrollTrigger selle väärtuse teie eest uuesti, kui brauseri suurust muudetakse.
Boonus GSAP nohiku vihje!
Mobiilseadmetes kuvatakse ja peidetakse tavaliselt brauseri aadressiriba kerimisel. Seda loetakse suuruse muutmise sündmuseks ja see käivitab a ScrollTrigger.refresh(). See ei pruugi olla ideaalne, kuna see võib teie animatsioonis hüppeid põhjustada. Lisatud on GSAP 3.10 ignoreMobileResize. See ei mõjuta brauseririba käitumist, kuid takistab ScrollTrigger.refresh() eest vallandamisest puutetundlikel seadmetel väikesed vertikaalsuurused.
ScrollTrigger.config({
ignoreMobileResize: true
});Liikumise põhimõtted
Mõtlesin, et jätan teile mõned parimad tavad, mida veebis liikumisega töötamisel arvesse võtta.
Kaugus ja leevendus
Väike, kuid oluline asi, mida on tundliku animatsiooniga lihtne unustada, on kiiruse, hoo ja vahemaa suhe! Hea animatsioon peaks jäljendama tegelikku maailma et end usutavana tunda, ja reaalses maailmas kulub suurema vahemaa läbimiseks kauem aega. Pöörake tähelepanu kaugusele, mille animatsioon läbib, ja veenduge, et kasutatud kestus ja kergendus oleks teiste animatsioonide kontekstis mõistlikud.
Suurenenud hoo näitamiseks saate sageli rakendada elementidele veelgi järsemat leevendust, kus on edasi liikuda.
Teatud kasutusjuhtudel võib olla abi kestust dünaamilisemalt reguleerida vastavalt ekraani laiusele. Selles järgmises demos kasutame gsap.utils voolust tagasi saadud väärtuse kinnitamiseks window.innerWidth mõistlikku vahemikku, siis vastendame selle arvu kestusega.
Vahed ja kogus
Veel üks asi, mida meeles pidada, on erinevate ekraanisuuruste elementide vahekaugus ja kogus. Tsiteerides Steven Shaw:
Kui teil on akna ümber mingisugune keskkonnaanimatsioon (parallaks, pilved, puud, konfetid, kaunistused jne), siis veenduge, et need skaleeriksid ja/või kohandaksid kogust olenevalt ekraani suurusest. Suured ekraanid vajavad tõenäoliselt rohkem elemente laiali, samas kui väikesed ekraanid vajavad sama efekti saavutamiseks vaid mõnda.
Ma armastan, kuidas Ofer Vishnia mõtleb animatsioonist kui lavast. Elementide lisamine ja eemaldamine ei pea olema lihtsalt formaalsus, see võib olla osa üldisest koreograafiast.
Reageerivate animatsioonide kujundamisel ei seisne väljakutse mitte see, kuidas sama sisu vaateaknasse toppida, et see "sobiks", vaid pigem olemasoleva sisu komplekti kureerimine nii, et see edastaks sama kavatsuse. See tähendab, et tuleb teha teadlik valik, millised osad sisu lisada ja millised eemaldada. Tavaliselt ei hüppa animatsioonimaailmas asjad lihtsalt kaadrisse ega kaadrist välja. Mõistlik on mõelda elementidele kui „lavale“ sisenemisest või sealt väljumisest, animeerides seda üleminekut viisil, mis on visuaalselt ja temaatiliselt mõttekas.
Ja see on palju. Kui teil on tundlikumaid animatsiooninõuandeid, lisage need kommentaaride jaotisesse. Kui on midagi väga kasulikku, lisan need sellesse teabekogumisse!
lisa
Veel üks märkus Tom Miller kui ma seda artiklit ette valmistasin:
Tõenäoliselt jäin teie tundlike animatsioonide artikli jaoks selle näpunäidetega hiljaks, kuid soovitan tungivalt "viia kõik animatsioonid enne ehitamist lõpule". Varustan praegu mõnda saidi animatsiooni mobiiliversioonidega. Jumal tänatud
gsap.matchMedia… aga ma soovin, et oleksime algusest peale teadnud, et mobiilipaigutused/animatsioonid on eraldi.
Ma arvan, et me kõik hindame seda, et see näpunäide "ette planeerida" tuli absoluutselt viimasel minutil. Aitäh, Tom, ja palju õnne nende ümberehituste puhul.
