Mielőtt karrierem beugrott volna a fejlesztésbe, egy csomó mozgógrafikus munkát végeztem az After Effectsben. De még ezzel a háttérrel is elég zavarba ejtőnek találtam az interneten való animációt.
A videografikákat meghatározott arányban tervezik, majd exportálják. Kész! De az interneten nincsenek „exportálási beállítások”. Csak kiterítjük a kódot a világba, és animációinknak alkalmazkodniuk kell bármilyen eszközhöz, amelyen landolnak.
Szóval beszéljünk a reszponzív animációról! Hogyan közelíthetjük meg a legjobban az animációt a vad weben? Kitérünk néhány általános megközelítésre, néhány GSAP-specifikus tippre és néhány mozgási elvre. Kezdjük egy kis keretezéssel…
Hogyan fogják használni ezt az animációt?
Zach Saucier cikke a reszponzív animációról azt javasolja, hogy mielőtt belevágna a kódba, tegyen egy lépést hátra, és gondolja át a végeredményt.
Az animáció egy olyan modul lesz, amely az alkalmazás több részében ismétlődik? Egyáltalán kell méretezni? Ennek szem előtt tartása segíthet meghatározni az animáció méretezésének módját, és elkerülheti az erőfeszítések pazarlását.
Ez nagyszerű tanács. A hatalmas a reszponzív animáció tervezésének része annak ismerete, hogy az animációt kell-e és hogyan kell méretezni, majd a kezdetektől fogva kiválasztani a megfelelő megközelítést.
A legtöbb animáció a következő kategóriákba sorolható:
- Rögzített: Animációk olyan dolgokhoz, mint például az ikonok vagy a betöltők, amelyek minden eszközön megőrzik ugyanazt a méretet és képarányt. Itt nincs miért aggódni! Írjon be néhány pixelértéket, és folytassa a napot.
- Folyadék: Animációk, amelyeknek gördülékenyen kell alkalmazkodniuk a különböző eszközökhöz. A legtöbb elrendezési animáció ebbe a kategóriába tartozik.
- Célzott: Animációk, amelyek egy adott eszközre vagy képernyőméretre vonatkoznak, vagy egy bizonyos törésponton jelentősen változnak, például csak asztali animációk vagy olyan interakciók, amelyek az eszközspecifikus interakción alapulnak, például érintés vagy lebegtetés.
A folyékony és célzott animációk eltérő gondolkodást és megoldásokat igényelnek. Lássuk…
Fluid animáció
As Andy harang mondja: Legyen a böngésző mentora, ne a mikromenedzsere – adjon a böngészőnek néhány szilárd szabályt és tippet, majd hagyja, hogy a megfelelő döntéseket hozza meg a látogatók számára.
(Itt vannak a csúszdákat az előadásból.)
A folyékony animáció lényege, hogy hagyja, hogy a böngésző elvégezze a kemény munkát. Sok animáció könnyen alkalmazkodik a különböző kontextusokhoz, pusztán a megfelelő egységek használatával. Ha átméretezi ezt a tollat, láthatja, hogy az animációt használja nézetablak egységek folyamatosan skálázódik, ahogy a böngésző beállítja:
A lila doboz szélessége is változik a különböző töréspontokon, de mivel százalékokat használunk a mozgatáshoz, az animáció is skálázódik vele.
Az elrendezési tulajdonságok animálása, mint pl left és a top elrendezési áttöredezést és ideges "dühös" animációt okozhat, ezért ahol lehetséges, ragaszkodjon az átalakításokhoz és az átlátszatlansághoz.
Azonban nem csak ezekre az egységekre korlátozódunk – vessünk egy pillantást néhány más lehetőségre is.
SVG egységek
Az egyik dolog, amit szeretek az SVG-vel való munkában, az az, hogy SVG felhasználói egységeket használhatunk animációhoz, amelyek már a dobozból is érzékenyek. A nyom valóban a névben van... Skálázható vektoros grafika. Az SVG-landben minden elem meghatározott koordinátákon van ábrázolva. Az SVG tér olyan, mint egy végtelen darab milliméterpapír, ahol elrendezhetjük az elemeket. Az viewBox meghatározza az általunk látható milliméterpapír méreteit.
viewBox="0 0 100 50”Ebben a következő demóban az SVG-nket viewBox is 100 egységek széles és 50 egység magas. Ez azt jelenti, ha az elemet a 100 egységet az x tengely mentén, mindig a szülő SVG teljes szélességében mozog, függetlenül attól, hogy mekkora vagy kicsi az SVG! Méretezze át a bemutatót, hogy lássa.
Az alárendelt elem animálása a szülőtároló szélessége alapján egy kis trükk a HTML-országban. Mostanáig JavaScripttel kellett megragadnunk a szülő szélességét, ami elég egyszerű animáció közben from átalakított pozíció, de animálás közben kicsit bonyolultabb to valahol, amint az a következő demóban látható. Ha a végpont egy átalakított pozíció, és átméretezi a képernyőt, akkor manuálisan kell beállítania ezt a pozíciót. Rendetlen… 🤔
Ha módosítja az értékeket az átméretezésnél, ne feledje lepattanó, vagy akár elindíthatja a funkciót, miután a böngésző befejezte az átméretezést. Az átméretezési figyelők rengeteg eseményt indítanak el másodpercenként, így az egyes események tulajdonságainak frissítése sok munkát jelent a böngésző számára.
De ez az animációs gyorshajtás hamarosan a múlté lesz! Dobpergés kérem… 🥁
Konténer egységek! Kedves cucc. Amikor ezt írom, ezek csak Chrome-ban és Safariban működnek – de lehet, hogy mire ezt elolvasod, már a Firefox is meglesz. Tekintse meg őket működés közben ebben a következő bemutatóban. Nézzétek, menjenek azok a kis legények! Hát nem izgalmas, a szülőelemekhez viszonyított animáció!
A böngésző támogatási adatai innen származnak Használhatom, amely több részletet tartalmaz. Egy szám azt jelzi, hogy a böngésző támogatja a funkciót az adott verziónál és újabbnál.
asztali
| króm | Firefox | IE | él | Safari |
|---|---|---|---|---|
| 105 | Nem | Nem | 105 | 16.0 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | Nem | 106 | 16.0 |
Folyékony elrendezés átmenetek a FLIP segítségével
Ahogy korábban említettük, az SVG-landben minden elem szépen el van helyezve egy rácson, és nagyon könnyen mozgatható. A HTML-országban ez sokkal összetettebb. A reszponzív elrendezések felépítéséhez számos különböző pozicionálási módszert és elrendezési rendszert alkalmazunk. Az internetes animáció egyik fő nehézsége az nagyon Az elrendezés módosításait nem lehet animálni. Lehet, hogy egy elemnek el kell mozdulnia a helyéről relative nak nek fixed, vagy egy rugalmas tároló egyes gyermekeit simán meg kell keverni a nézetablakban. Lehet, hogy egy elemet újra szülővé kell tenni, és egy teljesen új pozícióba kell áthelyezni a DOM-ban.
Trükkös, mi?
Jól. A FLIP technika megmenti a helyzetet; lehetővé teszi számunkra, hogy könnyen megelevenítsük ezeket a lehetetlen dolgokat. Az alapfeltevés a következő:
- vezetéknév: Fogja meg az átmenetben részt vevő elemek kezdeti pozícióját.
- keresztnév: Mozgassa az elemeket és ragadja meg a végső pozíciót.
- Invert: Az első és az utolsó állapot közötti változások kidolgozása, és transzformációk alkalmazása az elemek eredeti helyzetükbe való visszafordításához. Így úgy tűnik, hogy az elemek még mindig a első pozícióban, de valójában nem.
- játszani: Távolítsa el a fordított transzformációkat, és animáljon hozzájuk hamisított első állam a utolsó állapot.
Íme egy demó a GSAP FLIP beépülő moduljával, amely elvégzi az összes nehéz feladatot Ön helyett!
Ha egy kicsit többet szeretne megtudni a vaníliás megvalósításról, menjen Paul Lewishoz blogbejegyzés — ő az agy a FLIP technika mögött.
Folyékonyan skálázható SVG
Értett engem… ez nem az tényleg egy animációs tipp. De a színpad megfelelő beállítása elengedhetetlen a jó animációhoz! Az SVG alapértelmezés szerint szuper szépen skálázódik, de szabályozhatjuk, hogyan skálázzon még tovább preserveAspectRatio, ami nagyon praktikus, amikor az SVG elem képaránya és a viewBox a képarány eltérő. Nagyjából ugyanúgy működik, mint a background-position és a background-size tulajdonságok a CSS-ben. A deklaráció egy igazítási értékből (background-position), Valamint egy Találkozik or Szelet hivatkozás (background-size).
Ami a Meet and Slice referenciákat illeti – slice olyan, mint background size: coverés meet olyan, mint background-size: contain.
preserveAspectRatio="MidYMax slice"— Igazítsa az x tengely közepéhez, az y tengely aljához, és méretezze fel, hogy lefedje a teljes nézetablakot.preserveAspectRatio="MinYMin meet"- Igazítsa az x tengely bal oldalához, az y tengely tetejéhez, és skálázza felfelé, miközben megtartja a teljesviewBoxlátható.
Tom Miller használatával egy lépéssel tovább lép overflow: visible a CSS-ben és egy olyan elemet, amely a „stage left” és a „Stage right” felfedésére szolgál, miközben korlátozza a magasságot:
Reszponzív SVG-animációk esetén hasznos lehet az SVG viewbox segítségével olyan nézetet létrehozni, amely egy bizonyos böngészőszélesség alatt levág és méretez, miközben az SVG animációt jobbra és balra is megjeleníti, ha a böngésző ennél szélesebb. küszöb. Ezt úgy érhetjük el, hogy hozzáadjuk az SVG-n látható túlcsordulást, és összekapcsoljuk a
max-heightwrapper, hogy megakadályozza az SVG túlzottan függőleges méretezését.
Folyékonyan skálázható vászon
A Canvas sokkal hatékonyabb az összetett animációkhoz sok mozgó alkatrészeket tartalmaz, mint az SVG vagy HTML DOM animálása, de eleve összetettebb is. A teljesítménynövekedésért meg kell dolgozni! Ellentétben az SVG-vel, amely gyönyörű érzékeny egységekkel és a dobozból kiszerelhető mérettel rendelkezik, egy kicsit irányítani és mikromenedzselni kell.
Szeretem beállítani így nagyjából ugyanúgy működik, mint az SVG (lehet, hogy elfogult vagyok), egy szép egységrendszerrel és fix képaránnyal. is újra kell rajzolni minden alkalommal, amikor valami megváltozik, ezért ne felejtse el késleltetni az újrarajzolást, amíg a böngésző be nem fejezi az átméretezést, vagy vissza kell állítani!
George Francis ezt is összerakni kedves kis könyvtár amely lehetővé teszi egy vászon meghatározását viewBox tulajdonság és preserveAspectRatio - pontosan mint az SVG!
Célzott animáció
Előfordulhat, hogy néha kevésbé gördülékeny és irányítottabb megközelítést kell alkalmaznia az animációhoz. A mobileszközök sokkal kevesebb ingatlannal rendelkeznek, és kevesebb az animáció teljesítménye, mint egy asztali gép. Tehát célszerű csökkentett animációt megjeleníteni a mobilfelhasználók számára, esetleg animáció nélkül is:
Néha a legjobban reagáló animáció mobilra az, ha egyáltalán nincs animáció! A mobil UX esetében előnyben részesítse, hogy a felhasználó gyorsan elfogyassza a tartalmat, és ne várja meg, amíg az animáció befejeződik. A mobilanimációknak inkább javítaniuk kell a tartalmat, a navigációt és az interakciókat, nem pedig késleltetniük. Eric van Holtz
Ennek érdekében médialekérdezéseket használhatunk meghatározott nézetablak méretek megcélzására, ugyanúgy, mint amikor CSS-t használunk! Íme egy egyszerű bemutató, amely egy CSS-animációt mutat be médialekérdezések segítségével, és egy GSAP-animációt gsap.matchMedia():
Ennek a demónak az egyszerűsége egy csomó varázslatot rejt magában! A JavaScript-animációk egy kicsit több beállítást és tisztítást igényelnek, hogy csak egy adott képernyőméreten megfelelően működjenek. A múltban láttam olyan borzalmakat, ahol az emberek éppen elrejtették az animációt a CSS-ben opacity: 0, de az animáció még mindig a háttérben zakatol, és felhasználja az erőforrásokat. 😱
Ha a képernyő mérete már nem egyezik, az animációt meg kell ölni, és el kell engedni a szemétgyűjtéshez, és az animáció által érintett elemeket meg kell tisztítani a mozgás által bevezetett soron belüli stílusoktól, hogy elkerüljük az ütközéseket más stílusokkal. Ig gsap.matchMedia(), ez macerás folyamat volt. Minden egyes animációt nyomon kellett követnünk, és mindezt manuálisan kellett kezelnünk.
gsap.matchMedia() ehelyett lehetővé teszi az animációs kód egyszerű beillesztését egy függvénybe, amely csak akkor fut le, ha egy adott média lekérdezés mérkőzések. Majd ha már nem egyezik, az összes GSAP animáció és ScrollTriggerek ebben a funkcióban automatikusan visszaáll. A médialekérdezés, amelybe az animációk beugrottak, mindent megtesz helyetted. A GSAP 3.11.0-ban van, és ez egy játékváltó!
Nem csak a képernyőméretekre vagyunk korlátozva. Vannak a rengeteg médiafunkció van odakint beleakadni!
(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 */A következő bemutatóhoz csekket adtunk hozzá prefers-reduced-motion hogy az animációt zavarónak találó felhasználókat ne zavarják a körülötte zajló dolgok.
És nézze meg Tom Miller másik szórakoztató bemutatóját, ahol az eszköz képarányát használja az animáció beállításához:
A dobozon kívüli gondolkodás, a képernyőméreteken túl
A reszponzív animációra nem csak a képernyőméretekre kell gondolni. A különböző eszközök különböző interakciókat tesznek lehetővé, és könnyen bekerülhet egy kis gubanc, ha ezt nem vesszük figyelembe. Ha CSS-ben hoz létre lebegési állapotokat, használhatja a hover médiafunkció annak tesztelésére, hogy a felhasználóé elsődleges A beviteli mechanizmus az elemek fölött lebeghet.
@media (hover: hover) {
/* CSS hover state here */
}Néhány tanács tőle Jake Whiteley:
Animációinkat legtöbbször a böngésző szélességére alapozzuk, és abból a naiv feltételezésből indulunk ki, hogy az asztali számítógépek felhasználói lebegő állapotokat akarnak. Nekem személy szerint sok olyan problémám volt a múltban, amikor átváltottam volna 1024 képpont feletti asztali elrendezésre, de előfordulhat, hogy érintésérzékelést végeztem a JS-ben – ami olyan eltéréshez vezetett, ahol az elrendezés asztali számítógépekhez, de a JS mobilokhoz való volt. Manapság a lebegtetésre és a mutatóra támaszkodom, hogy biztosítsam a paritást, és kezeljem az ipad Pros vagy Windows felületeket (amely megváltoztathatja a mutató típusát attól függően, hogy a borító le van-e helyezve vagy sem)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Ezután összeveszem a CSS-elrendezési lekérdezéseimet és a JavaScript-lekérdezéseimet, így a beviteli eszközt tekintem elsődleges tényezőnek támogatott szélesség szerint, nem pedig fordítva.
ScrollTrigger tippek
Ha GSAP-t használ ScrollTrigger beépülő modul, van egy praktikus kis segédprogram, amelybe belekötve könnyen felismerheti az eszköz érintési képességeit: ScrollTrigger.isTouch.
0- nincs érintés (csak mutató/egér)1- csak érintéssel eszköz (például telefon)2– a készülék képes fogadni érintse bemenet és egér mutató (mint a Windows táblagépek)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Egy másik tipp a reszponzív görgetéssel indítható animációhoz…
Az alábbi bemutató egy képgalériát vízszintesen mozgat, de a szélesség a képernyő méretétől függően változik. Ha átméretezi a képernyőt, amikor egy kimosott animáció felénél jár, hibás animációkat és elavult értékeket eredményezhet. Ez egy gyakori gyorsulási hiba, de könnyen megoldható! Állítsa be a képernyő méretétől függő számítást egy funkcionális értékbe, és állítsa be invalidateOnRefresh:true. Így a ScrollTrigger újraszámítja ezt az értéket, amikor a böngésző átméretezi.
Bónusz GSAP majom tipp!
Mobileszközökön a böngésző címsora általában megjelenik és elrejti görgetés közben. Ez átméretezési eseménynek számít, és a ScrollTrigger.refresh(). Lehet, hogy ez nem ideális, mert ugrásokat okozhat az animációban. GSAP 3.10 hozzáadva ignoreMobileResize. Nem befolyásolja a böngészősáv viselkedését, de megakadályozza ScrollTrigger.refresh() a kirúgástól kis függőleges átméretezés csak érintőképernyős eszközökön.
ScrollTrigger.config({
ignoreMobileResize: true
});A mozgás alapelvei
Úgy gondoltam, meghagyok néhány bevált módszert, amelyeket figyelembe kell venni, amikor mozgással dolgozik az interneten.
Távolság és könnyítés
Egy apró, de fontos dolog, amit könnyű elfelejteni a reszponzív animációval, az a sebesség, lendület és távolság kapcsolata! Jó animáció a való világot kell utánoznia hogy hihetőnek érezzük magunkat, és a való világban hosszabb időre van szükség egy nagyobb távolság megtételéhez. Ügyeljen az animáció által megtett távolságra, és győződjön meg arról, hogy a használt időtartam és könnyítés más animációkkal összefüggésben értelmezhető.
Gyakran drámaibb könnyítéseket is alkalmazhat azokon az elemeken, amelyeken tovább kell utazni, hogy megmutassa a megnövekedett lendületet:
Bizonyos használati esetekben hasznos lehet az időtartam dinamikusabb beállítása a képernyő szélessége alapján. Ebben a következő demóban ezt használjuk ki gsap.utils hogy rögzítsük az áramból visszakapott értéket window.innerWidth ésszerű tartományba, akkor ezt a számot egy időtartamhoz rendeljük hozzá.
Térköz és mennyiség
Egy másik dolog, amit szem előtt kell tartani, az elemek távolsága és mennyisége a különböző képernyőméreteknél. Idézve Steven Shaw:
Ha van valamilyen környezeti animációja (parallaxis, felhők, fák, konfetti, dekorációk stb.), amelyek az ablak körül helyezkednek el, ügyeljen arra, hogy a képernyő méretétől függően méretezzék és/vagy állítsák be a mennyiséget. A nagy képernyőknek valószínűleg több elemre van szükségük, míg a kis képernyőknek csak néhány elemre van szükség ugyanahhoz a hatáshoz.
Imádom, hogyan Opher Vishnia az animációt színpadnak tekinti. Az elemek hozzáadásának és eltávolításának nem csak formalitásnak kell lennie, hanem a teljes koreográfia része is lehet.
A reszponzív animációk tervezése során nem az a kihívás, hogyan zsúfoljuk be ugyanazt a tartalmat a nézetablakba, hogy „elférjen”, hanem inkább az, hogyan kell összeállítani a meglévő tartalom halmazát, hogy ugyanazt a szándékot kommunikálja. Ez azt jelenti, hogy tudatosan kell megválasztani, hogy mely elemeket adjuk hozzá, és melyeket távolítsuk el. Általában az animáció világában a dolgok nem csak úgy be- vagy kipattannak a keretből. Célszerű úgy tekinteni az elemekre, mint a „színpadra” belépésre vagy kilépésre, az átmenetet vizuálisan és tematikusan megelevenítve.
És ez a sok. Ha van még reszponzív animációs tippje, jelölje be a megjegyzés rovatban. Ha van valami rendkívül hasznos, hozzáadom ehhez az információs összeállításhoz!
függelék
Még egy megjegyzés tőle Tom Miller miközben ezt a cikket készítettem:
Valószínűleg elkéstem ezzel a tippel a reszponzív animációkról szóló cikkedhez, de erősen ajánlom, hogy „az összes animációt véglegesítse az építés előtt”. Jelenleg néhány webhely-animációt utólag „mobil verziókkal” szerelek fel. Hála istennek
gsap.matchMedia… de azt szeretném, ha tudtuk volna, hogy a kezdetektől fogva külön mobil elrendezések/animációk lesznek.
Azt hiszem, mindannyian értékeljük, hogy ez az „előretervezés” tipp az utolsó pillanatban érkezett. Köszönöm, Tom, és sok sikert az utólagos felszerelésekhez.
