Ennen kuin urani hyppäsi kehitykseen, tein joukon liikegrafiikkaa After Effectsissä. Mutta vaikka sillä taustallakin, internetin animointi oli minusta melko hämmentävää.
Videografiikka suunnitellaan tietyssä suhteessa ja viedään sitten ulos. Tehty! Mutta verkossa ei ole "vientiasetuksia". Työnämme koodin vain maailmalle, ja animaatioidemme on mukauduttava mihin tahansa laitteeseen, johon ne laskeutuvat.
Puhutaanpa siis reagoivasta animaatiosta! Miten suhtaudumme parhaiten animaatioon villissä verkossa? Käsittelemme joitain yleisiä lähestymistapoja, joitain GSAP-spesifisiä vinkkejä ja joitain liikeperiaatteita. Aloitetaan kehystyksellä…
Miten tätä animaatiota käytetään?
Zach Saucierin artikkeli reagoivasta animaatiosta suosittelee ottamaan askeleen taaksepäin ja miettimään lopputulosta ennen kuin hyppäät koodiin.
Onko animaatio moduuli, joka toistetaan useissa sovelluksesi osissa? Tarvitseeko sitä skaalata ollenkaan? Tämän pitäminen mielessä voi auttaa määrittämään menetelmän, jolla animaatio tulisi skaalata, ja estää sinua tuhlaamasta vaivaa.
Tämä on loistava neuvo. A valtava osa responsiivisen animaation suunnittelua on tietää, onko animaation skaalattava ja miten, ja sitten oikean lähestymistavan valitseminen alusta alkaen.
Useimmat animaatiot kuuluvat seuraaviin luokkiin:
- kiinteä: Animaatioita, kuten kuvakkeita tai latauslaitteita, jotka säilyttävät saman koon ja kuvasuhteen kaikissa laitteissa. Ei tässä mitään hätää! Koodaa siihen joitain pikseliarvoja ja jatka päivääsi.
- Fluid: Animaatiot, joiden on mukauduttava sujuvasti eri laitteissa. Useimmat asetteluanimaatiot kuuluvat tähän luokkaan.
- Kohdennettu: Animaatiot, jotka ovat ominaisia tietylle laitteelle tai näytön kokoon tai muuttuvat olennaisesti tietyssä keskeytyskohdassa, kuten vain työpöytäanimaatiot tai vuorovaikutukset, jotka perustuvat laitekohtaiseen vuorovaikutukseen, kuten kosketus tai hiiri.
Sujuvat ja kohdistetut animaatiot vaativat erilaisia ajattelutapoja ja ratkaisuja. Katsotaanpa…
Fluid animaatio
As Andy bell sanoo: Ole selaimen mentori, älä sen mikropäällikkö – anna selaimelle tiukkoja sääntöjä ja vihjeitä ja anna sen sitten tehdä oikeat päätökset vierailevien ihmisten puolesta.
(Tässä ovat dioja tuosta esityksestä.)
Fluid-animaatiossa on kyse siitä, että selaimen annetaan tehdä kova työ. Monet animaatiot mukautuvat helposti erilaisiin yhteyksiin käyttämällä oikeita yksiköitä alusta alkaen. Jos muutat tämän kynän kokoa, voit nähdä, että animaatio käyttää näkymän yksiköt skaalautuu sujuvasti selaimen mukautuessa:
Violetti laatikko jopa muuttaa leveyttä eri keskeytyspisteissä, mutta kun käytämme prosenttiosuuksia sen siirtämiseen, myös animaatio skaalautuu sen mukana.
Animoivat asetteluominaisuudet, kuten left ja top voi aiheuttaa asettelun uudelleenjuoksua ja hermostuneita "jännikkäitä" animaatioita, joten pysy mahdollisuuksien mukaan muunnoksissa ja läpinäkyvyydessä.
Emme kuitenkaan rajoitu vain näihin yksiköihin – katsotaanpa joitain muita mahdollisuuksia.
SVG-yksiköt
Yksi asioista, joista pidän SVG:n kanssa työskentelyssä, on se, että voimme käyttää animaatioon SVG-käyttäjäyksiköitä, jotka reagoivat heti valmiiksi. Vihje on todella nimessä - Skaalautuva Vektorigrafiikka. SVG-maassa kaikki elementit piirretään tiettyihin koordinaatteihin. SVG-avaruus on kuin loputon kaaviopaperi, johon voimme järjestää elementtejä. The viewBox määrittää näkemämme kaaviopaperin mitat.
viewBox="0 0 100 50”Tässä seuraavassa esittelyssä meidän SVG viewBox is 100 yksiköt leveät ja 50 yksiköiden korkeita. Tämä tarkoittaa, jos animoimme elementin 100 yksikköä x-akselia pitkin, se liikkuu aina emo-SVG:n koko leveyden verran riippumatta siitä, kuinka suuri tai pieni se SVG on! Muuta demon kokoa nähdäksesi.
Alielementin animointi ylätason säilön leveyden perusteella on pieni temppu HTML-maassa. Tähän asti meidän on täytynyt napata vanhemman leveys JavaScriptillä, mikä on tarpeeksi helppoa animoitaessa from muuttunut asento, mutta hieman hankalampi animoitaessa to jossain, kuten näet seuraavassa demossa. Jos päätepisteesi on muutettu sijainti ja muutat näytön kokoa, sinun on säädettävä sitä manuaalisesti. Sotkua… 🤔
Jos muutat arvoja kokoa muuttaessa, muista se palautua, tai jopa käynnistää toiminnon, kun selain on muuttanut koon. Resize-kuuntelijat käynnistävät valtavan määrän tapahtumia sekunnissa, joten jokaisen tapahtuman ominaisuuksien päivittäminen on paljon työtä selaimelle.
Mutta tämä animaation nopeusrajoitus on pian menneisyyttä! Rumpupyörä, kiitos… 🥁
Konttiyksiköt! Ihania juttuja. Tätä kirjoittaessani ne toimivat vain Chromessa ja Safarissa – mutta ehkä ennen kuin luet tämän, meillä on myös Firefox. Katso ne toiminnassa tässä seuraavassa esittelyssä. Katsokaa noita pieniä poikia! Eikö olekin jännittävää, animaatio, joka on suhteessa emoelementteihin!
Tämän selaimen tukitiedot ovat peräisin Voinko käyttää, jossa on enemmän yksityiskohtia. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa ja sitä uudemmissa versioissa.
pöytä-
| kromi | Firefox | IE | reuna | safari |
|---|---|---|---|---|
| 105 | Ei | Ei | 105 | 16.0 |
Mobiili / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Ei | 106 | 16.0 |
Sujuva asettelu siirtyy FLIPillä
Kuten aiemmin mainitsimme, SVG-landissa jokainen elementti on sijoitettu siististi yhdelle ruudukolle ja niitä on todella helppo siirtää responsiivisesti. HTML-maassa se on paljon monimutkaisempaa. Responsiivisten asettelujen rakentamiseksi käytämme joukkoa erilaisia paikannusmenetelmiä ja asettelujärjestelmiä. Yksi web-animoinnin suurimmista ongelmista on se paljon asettelun muutoksia on mahdotonta animoida. Ehkä elementin täytyy siirtyä paikaltaan relative että fixed, tai joitain taipuisan säiliön lapsia on sekoitettava sujuvasti näkymän ympärillä. Ehkä elementti täytyy jopa asettaa uudelleen ja siirtää kokonaan uuteen paikkaan DOM:ssa.
Hankalaa, vai mitä?
Hyvin. FLIP-tekniikka pelastaa päivän; sen avulla voimme helposti animoida nämä mahdottomat asiat. Peruslähtökohta on:
- Etunimi: Tartu siirrossa mukana olevien elementtien alkuasentoon.
- Sukunimi: Siirrä elementtejä ja ota kiinni lopullisesta paikasta.
- Käänteinen: Harkitse muutokset ensimmäisen ja viimeisen tilan välillä ja käytä muunnoksia elementtien kääntämiseksi takaisin alkuperäiseen paikkaansa. Tämä saa näyttää siltä, että elementit ovat edelleen sisällä ensimmäinen asemaa, mutta eivät todellisuudessa ole.
- Pelaa: Poista käänteiset muunnokset ja animoi niiden mukaan väärentää ensimmäinen valtiolle viime valtio.
Tässä on demo, jossa käytetään GSAP:n FLIP-laajennusta, joka tekee kaiken raskaan noston puolestasi!
Jos haluat ymmärtää hieman enemmän vaniljatoteutuksesta, siirry Paul Lewisin puolelle blogi — hän on FLIP-tekniikan takana oleva aivo.
Sujuvasti skaalautuva SVG
Sait minut… tämä ei ole ihan oikeesti animaatiovinkki. Mutta näyttämön oikea asettaminen on välttämätöntä hyvän animaation kannalta! SVG skaalautuu oletuksena erittäin hienosti, mutta voimme hallita, kuinka se skaalautuu vielä pidemmälle preserveAspectRatio, joka on erittäin kätevä, kun SVG-elementin kuvasuhde ja viewBox kuvasuhteet ovat erilaisia. Se toimii pitkälti samalla tavalla kuin background-position ja background-size ominaisuuksia CSS:ssä. Ilmoitus koostuu kohdistusarvosta (background-position) Ja Tavata or Viipale viite (background-size).
Mitä tulee Meet and Slice -viittauksiin - slice on kuin background size: coverja meet on kuin background-size: contain.
preserveAspectRatio="MidYMax slice"— Kohdista x-akselin keskelle, y-akselin alaosaan ja skaalaa ylöspäin koko kuvaportin kattamiseksi.preserveAspectRatio="MinYMin meet"— Kohdista x-akselin vasemmalle puolelle, y-akselin yläreunaan ja skaalaa kokoa pitäenviewBoxnäkyvissä.
Tom Miller vie tätä askeleen pidemmälle käyttämällä overflow: visible CSS:ssä ja sisältävä elementti, joka paljastaa "vaiheen vasen" ja "lava oikea" pitäen korkeutta rajoitettuna:
Responsiivisissa SVG-animaatioissa voi olla kätevää käyttää SVG-näkymäruutua luodakseen näkymän, joka rajautuu ja skaalautuu tietyn selaimen leveyden alapuolelle ja paljastaa samalla enemmän SVG-animaatiota oikealle ja vasemmalle, kun selain on tätä leveämpi. kynnys. Voimme saavuttaa tämän lisäämällä SVG:ssä näkyvän ylivuodon ja yhdistämällä sen a
max-heightkääre estääksesi SVG:tä skaalautumasta liikaa pystysuunnassa.
Sujuvasti skaalautuva kangas
Canvas on paljon tehokkaampi monimutkaisille animaatioille erien liikkuvista osista kuin SVG:n tai HTML DOM:n animointi, mutta se on myös luonnostaan monimutkaisempi. Sinun on työskenneltävä näiden suoritushyötyjen eteen! Toisin kuin SVG:ssä, jossa on ihanat reagoivat yksiköt ja skaalattava heti, on ohjattava ja mikrohallittava hieman.
Tykkään perustaa omani joten se toimii paljolti samalla tavalla kuin SVG (saatan olla puolueellinen) ihanalla yksikköjärjestelmällä ja kiinteällä kuvasuhteella. on myös piirrettävä uudelleen aina, kun jotain muuttuu, joten muista viivyttää uudelleenpiirtämistä, kunnes selain on muuttanut tai debounce!
George Francis myös koota tämä ihana pieni kirjasto jonka avulla voit määrittää kankaan viewBox attribuutti ja preserveAspectRatio - aivan kuten SVG!
Kohdennettu animaatio
Joskus sinun on ehkä omaksuttava vähemmän sulava ja suunnatumpi lähestymistapa animaatioosi. Mobiililaitteissa on paljon vähemmän kiinteistöjä ja vähemmän animaatiomehua suorituskyvyn suhteen kuin pöytäkoneissa. Joten on järkevää tarjota mobiilikäyttäjille alennettua animaatiota, mahdollisesti jopa ilman animaatiota:
Joskus paras responsiivinen animaatio mobiililaitteille on ilman animaatiota! Mobiilikäyttöliittymässä priorisoi se, että käyttäjä voi kuluttaa sisältöä nopeasti sen sijaan, että odotat animaatioiden valmistumista. Mobiilianimaatioiden tulisi parantaa sisältöä, navigointia ja vuorovaikutusta sen sijaan, että ne viivästyisivät. Eric van Holtz
Tätä varten voimme käyttää mediakyselyjä kohdistaaksemme tiettyihin näkymäkokoihin aivan kuten teemme CSS-tyylityksessä! Tässä on yksinkertainen demo, joka näyttää CSS-animaatiota, jota käsitellään mediakyselyillä ja GSAP-animaatiota, jota käsitellään gsap.matchMedia():
Tämän demon yksinkertaisuus kätkee joukon taikuutta! JavaScript-animaatiot vaativat hieman enemmän asetuksia ja puhdistusta toimiakseen oikein vain yhdessä tietyssä näytön koossa. Olen nähnyt aiemmin kauhuja, joissa ihmiset ovat juuri piilottaneet animaation näkyvistä CSS:ssä opacity: 0, mutta animaatio kuluttaa edelleen resursseja taustalla. 😱
Jos näytön koko ei enää täsmää, animaatio on lopetettava ja vapautettava roskien keräämistä varten, ja animaation vaikuttamat elementit on poistettava kaikista liikkeen aiheuttamista rivityyleistä, jotta vältetään ristiriidat muiden tyylien kanssa. Saakka gsap.matchMedia(), tämä oli hankala prosessi. Meidän piti seurata jokaista animaatiota ja hallita kaikkea manuaalisesti.
gsap.matchMedia() Sen sijaan voit helposti työntää animaatiokoodisi toimintoon, joka suoritetaan vain, kun tietty mediakysely Ottelut. Sitten, kun se ei enää täsmää, kaikki GSAP-animaatiot ja ScrollTriggerit kyseisessä toiminnossa palautetaan automaattisesti. Mediakysely, johon animaatiot avautuvat, tekee kaiken kovan työn puolestasi. Se on GSAP 3.11.0:ssa ja se on pelin vaihtaja!
Emme myöskään ole rajoittuneet vain näyttökokoihin. Siellä on siellä on paljon mediaominaisuuksia koukkuun!
(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 */Seuraavaan esittelyyn olemme lisänneet shekin prefers-reduced-motion jotta kaikki käyttäjät, jotka pitävät animaatiota hämmentävänä, eivät joutuisi häiritsemään ympäriinsä kohinaa.
Ja katso Tom Millerin toinen hauska demo, jossa hän käyttää laitteen kuvasuhdetta animaation säätämiseen:
Ajatteleminen laatikon ulkopuolella, näytön kokojen lisäksi
Responsiivista animaatioista kannattaa ajatella muutakin kuin vain näyttökokoja. Eri laitteet mahdollistavat erilaisen vuorovaikutuksen, ja on helppo joutua sotkeutumaan, kun sitä ei oteta huomioon. Jos luot hover-tiloja CSS:ssä, voit käyttää hover mediaominaisuus testatakseen, onko käyttäjän ensisijainen syöttömekanismi voi olla elementtien päällä.
@media (hover: hover) {
/* CSS hover state here */
}Joitakin neuvoja Jake Whiteley:
Usein perustamme animaatiomme selaimen leveyteen, mikä tekee naiivin oletuksen, että pöytäkoneiden käyttäjät haluavat hover-tiloja. Minulla on henkilökohtaisesti ollut aiemmin paljon ongelmia, joissa vaihtaisin työpöytäasetteluun >1024px, mutta saatan tehdä kosketuksentunnistuksen JS:ssä – mikä johti yhteensopimattomuuteen, jossa asettelu oli tarkoitettu pöytäkoneille, mutta JS oli matkapuhelimille. Nykyään nojaan hiiriin ja osoittimeen varmistaakseni pariteetin ja käsittelen ipad Prosia tai Windows-pintoja (joka voi muuttaa osoittimen tyyppiä sen mukaan, onko kansi alhaalla vai ei)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Yhdistän sitten CSS-asettelukyselyni ja JavaScript-kyselyni, joten pidän syöttölaitetta ensisijaisena tekijänä tuettu leveyden mukaan päinvastoin.
ScrollTrigger-vinkit
Jos käytät GSAP:ia ScrollTrigger-laajennus, siinä on kätevä pieni apuohjelma, johon voit kytkeä laitteen kosketusominaisuuksien helppo tunnistaa: ScrollTrigger.isTouch.
0- Älä koske (vain osoitin/hiiri)1- vain kosketus laite (kuten puhelin)2– laite voi hyväksyä kosketa tulo ja hiiri/osoitin (kuten Windows-tabletit)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Toinen vinkki reagoivaan rullaavaan animaatioon…
Seuraava alla oleva demo siirtää kuvagalleriaa vaakasuunnassa, mutta leveys vaihtelee näytön koon mukaan. Jos muutat näytön kokoa, kun olet siivotun animaation puolivälissä, voit päätyä rikkinäisiin animaatioihin ja vanhentuneisiin arvoihin. Tämä on yleinen nopeushäiriö, mutta se on helppo ratkaista! Lisää näytön koosta riippuva laskelma toiminnalliseen arvoon ja aseta se invalidateOnRefresh:true. Tällä tavalla ScrollTrigger laskee arvon uudelleen, kun selain muuttaa kokoa.
Bonus GSAP-nörttivinkki!
Mobiililaitteissa selaimen osoitepalkki yleensä näkyy ja piiloutuu vierittäessäsi. Tämä lasketaan koonmuutostapahtumaksi ja laukaisee a ScrollTrigger.refresh(). Tämä ei ehkä ole ihanteellinen, koska se voi aiheuttaa hyppyjä animaatiossasi. GSAP 3.10 lisätty ignoreMobileResize. Se ei vaikuta selainpalkin toimintaan, mutta estää ScrollTrigger.refresh() ampumisesta pienet pystysuuntaiset koon muutokset kosketuslaitteissa.
ScrollTrigger.config({
ignoreMobileResize: true
});Liikkeen periaatteet
Ajattelin jättää sinulle joitain parhaita käytäntöjä, jotka on otettava huomioon työskennellessäsi liikkeen kanssa verkossa.
Etäisyys ja helpotus
Pieni mutta tärkeä asia, joka on helppo unohtaa reagoivan animaation avulla, on nopeuden, vauhdin ja matkan välinen suhde! Hyvä animaatio pitäisi matkia todellista maailmaa tuntea olonsa uskottavaksi, ja todellisessa maailmassa kestää kauemmin kattaa suuremman matkan. Kiinnitä huomiota etäisyyteen, jonka animaatiosi kulkee, ja varmista, että käytetty kesto ja helpotus sopivat muihin animaatioihin.
Voit myös usein soveltaa dramaattisempaa kevennystä elementteihin, joissa on enemmän matkaa, osoittaaksesi lisääntyneen vauhdin:
Tietyissä käyttötapauksissa voi olla hyödyllistä säätää kestoa dynaamisemmin näytön leveyden perusteella. Tässä seuraavassa demossa hyödynnämme gsap.utils kiristääksesi arvon, jonka saamme takaisin virrasta window.innerWidth kohtuulliselle alueelle, yhdistämme tämän luvun kestoon.
Väli ja määrä
Toinen asia, joka on pidettävä mielessä, on elementtien etäisyys ja määrä eri näytöissä. Lainaus Steven Shaw:
Jos sinulla on jonkinlainen ympäristöanimaatio (parallaksi, pilvet, puut, konfetti, koristeet jne.), joka on sijoitettu ikkunan ympärille, varmista, että ne skaalautuvat ja/tai säädät määrää näytön koon mukaan. Suuret näytöt tarvitsevat todennäköisesti enemmän elementtejä levitettyinä, kun taas pienet näytöt tarvitsevat vain muutaman saman tehosteen saavuttamiseksi.
Rakastan kuinka Opher Vishnia ajattelee animaatiota näyttämönä. Elementtien lisäämisen ja poistamisen ei tarvitse olla vain muodollisuus, se voi olla osa kokonaiskoreografiaa.
Responsiivisia animaatioita suunniteltaessa haasteena ei ole se, kuinka sama sisältö tukkia katseluporttiin niin, että se "sopii", vaan pikemminkin se, miten olemassa olevaa sisältöä kuratoidaan niin, että se viestii saman tarkoituksen. Tämä tarkoittaa tietoisen valinnan tekemistä siitä, mitkä osat sisältöä lisätään ja mitkä poistetaan. Yleensä animaation maailmassa asiat eivät vain ponnahtaa sisään tai ulos kehyksestä. On järkevää ajatella, että elementit tulevat "lavalle" tai poistuvat sieltä, animoimalla tätä siirtymää visuaalisella ja temaattisella tavalla.
Ja se on paljon. Jos sinulla on lisää reagoivia animaatiovinkkejä, kirjoita ne kommenttiosaan. Jos on jotain erittäin hyödyllistä, lisään ne tähän tietokokoelmaan!
lisäys
Vielä yksi huomautus Tom Miller kun valmistelin tätä artikkelia:
Olen luultavasti liian myöhässä tämän vihjeen kanssa responsiivisia animaatioita käsittelevälle artikkelillesi, mutta suosittelen "viimeistele kaikki animaatiot ennen rakentamista". Varustan parhaillaan joitakin sivuston animaatioita "mobiiliversioilla". Luojan kiitos
gsap.matchMedia… mutta toivon, että olisimme tienneet, että mobiiliasettelut/animaatiot olisivat alusta alkaen erilliset.
Luulen, että me kaikki arvostamme, että tämä "ennakkosuunnittelun" vinkki tuli aivan viime hetkellä. Kiitos, Tom, ja onnea jälkiasennuksiin.
