Hogyan lehet animációt készíteni az oldalra

Hogyan készítsünk egy animációt, amit mindenki szeret (még a felhasználó is)?

Hello olvasók habra! A nevem Sergey Kuznetsov, vezetem az Agima Frontend Fejlesztési Osztályát, és ma hoztam neked egy cikket … igen, az animációról. Tudom, hogy ez a téma nem írt itt csak lusta. Tudom, mondj valami újat az animációról. És mégis remélem, hogy ez a cikk sok hasznos, és valaki – még érdekes.

Tehát kezdjük.
Napjainkban az animáció minden fejlesztőt használ – a helyre, és nem a helyre. És az animáció, amelyet nem a helyen használtak a helyszínen egy kegyetlen vicc – a felhasználó által tervezett “tervezett” érdeklődés helyett az unalom, félreértés és az elutasítás. Ez csak az animált elemek helyesen használható, beszélünk ebben a cikkben. És azt is, – hogyan lehet, hogy egy animációs kiváló minőségű, elérni a maximális teljesítmény és nem töltenek túl sok időt és erőfeszítést. Egy kicsit az első, egy dióhéjban egy másik és nagyon kevés a harmadik. Megy!

Miért van szükséged egy animációra?

A webhely minden elemének világos kinevezésnek kell lennie. Beleértve az animációt is. A funkciók alapján az animált elemek három nagy csoportját választhatja ki.

1. A várakozás animációja

Nem minden webhelyet azonnal betölti. Annak érdekében, hogy az oldal betöltése során a felhasználó nem vesztette el érdeklődését, és nem gondolta, hogy a webhely reménytelenül “lóg”, és szüksége van egy várakozásra. Az ilyen típus leggyakoribb animációja a preloader

Ez egy olyan elem, amelyet a látogató közvetlenül a webhelyre való áttérés után lát, miközben az oldal tartalma betöltődik. A “Előtöltők” egyszerre több funkciót hajt végre:

• Mutassa meg a felhasználó, hogy az oldal jól működik.

• “Crash” várakozási idő – egy érdekes animáció látni, a felhasználó nem fog figyelmet fordítani arra, hogy a “terhelés” webhely hosszabb, mint szeretne.

A Preladeren hasznos információkat mutathat – tippek vagy tippek.
Ezzel az animációval megmutathatja a cél eléréséhez szükséges lépéseket, vagy megmutathatja a műveletek sorrendjét.

Egy példa egy másik megvalósítási módja szerint az elvárás animáció: szekvenciális töltelék a oldal tartalmát, amikor görgetés helyett halasztani egyidejű töltése valamennyi eleme. Azaz, ha van egy csomó „nehéz” elemeket a képernyőn, akkor jobb, ha be őket viszont, és nem azonnal – itt, és jön súgóanimációt.

2. Animáció megerősítése

Ilyen animációra van szükség, hogy a felhasználó nem kétséges, hogy a webhelyen végzett kereset sikeresen elkötelezett, és megértette, hogy mit lehet tenni. Az oldal interaktív elemei megváltoztathatják az űrlapot, a színt, a tartalmat – például a nyomógombot, miután megnyomhatja a “kereszt” -re, jelezve, hogy a menü újra lezárható.

A visszaigazolás animációját használják annak érdekében, hogy a látogatóhoz forduljon, amellyel az oldalon kölcsönhatásba léphet. Ez releváns a webhelyek mobil verzióihoz – ha a készüléknek nincs egérmutatója, a felhasználónak előzetesen meg kell adnia az interaktív elemeket egyszerű animációval.

3. Díszes animáció

Ezek mini-játékok, nem szabványos görgetési oldal, videó készlet, parallax. Nem, ez az animáció nem “csak a szépség”. Teljesen utilitárius funkcióval rendelkezik – hogy vonzza a felhasználó figyelmét a legfontosabb, érdeklődést a webhely további tanulmányozásában, hívja a nagyon wow hatást. Dekoratív animáció Fontos használat „a hely”, és olyan mennyiségben, hogy ne terhelje túl az oldalt, és elvonják a felhasználó annak tartalmát.

Milyen animáció történik?

Növessük az elavult vagy ritka technológiákat. Csak a leggyakoribbak – és elemezzük előnyüket és hátrányaikat.

1. Videó

Itt valószínűleg a hó királynő keretből származik, ahol a villát választották
A legegyszerűbb és hatékony módja annak, hogy “újjáéledjen” az oldalt

+

• Csak és gyorsan beágyazódik az oldalra.

• A jelenetek nem korlátozott vizuális összetettsége.

• Sok alkalmazás.

–

• Nagy “súly”, és ezért potenciálisan hosszú terhelés.

• Az egyéni jelenet elemek megváltoztatása.

• Az átláthatóság és a szűrők korlátozott támogatása.

• Korlátozott interaktivitás.

2. Sorrend

Majdnem ugyanaz, mint a videó. Tény, hogy rövid időn belül mutatják az egyes képek, amelyek létrehozzák a mozgás illúzióját.

+

• Az egyes kereteket törölheti / módosíthatja.

• Beállíthatja a keretek számát és minőségét.

• Nincs böngésző korlátozása az autorunon.

–
Ugyanaz, mint a videó nagy “súly” és kis interaktivitás
3. CSS

Nagyon népszerű technológia, amely lehetővé teszi, hogy hozzon létre különféle animációt.
+

• Minden modern böngésző támogatja.

• Nem kell előkészíteni az anyagokat előre.

• Egyszerű szintaxis leírás.

• “Lezárja” szinte minden alapvető animációs szükségletet.

–

• Csak az előírt animációs típusok lehetségesek.

• A kifinomult animációk nagy mennyiségű kódot igényelnek.

4. Vászon / webgl

A legösszetettebb, de a leginkább lenyűgöző animációtípusok. Ez a 2D és 3D animáció, illetve. A vászonban 2D-rajz ugyanazon keret elvére csökken. A WebGl lehetővé teszi a 3D-s grafika megvalósítását vászon használatakor. A webl-on lévő kód egy része közvetlenül videokártyákon végezhető el, ami javítja az általános teljesítményt.

+

• Megváltoztathatja a lejátszási sorrendet és az elemeket minden kereten.

• Korlátlan lehetőségek az interaktív elemek létrehozására.

• Animáció importálása speciális alkalmazásokból.

• A kód WebGl részének használatakor közvetlenül a videokártyán végezhető el, ami javítja az általános teljesítményt.

–

• Hosszú animáció létrehozási folyamat

• Hosszú terhelés és “fékezés” különösen összetett jelenetekben

Hogyan készítsünk kiváló minőségű animációt?

Kezdjük, azt javaslom, hogy megismerkedjenek az animációs disney 12 elveivel. Ezt a csodálatos vezetést mindenkinek tudnia kell mindenkinek, aki valahogy kapcsolódik a “mozgó grafika” létrehozásának világához. De természetesen megvan a saját alapelveink, hogy megosztjuk most:

• Ne felejtsd el a reálisat. Figyeljen a perspektívák és az árnyékok helyességére.

• Nagyobban használjuk a sima funkciót (lazítás), válasszunk megfelelő sebességet és gyorsítást minden egyes művelethez.

• Ha a kényelmes érzékeléshez műholdas animációval dolgozik, akkor meg kell adnia a kijelzési frekvenciát. És ha a VIDEO-ban vagy a CSS-átalakítás automatikus, akkor a JS használatakor nem kell elfelejtenie, hogy figyelembe vegye a keret időtartamát. Például, 60Fps esetében körülbelül 16,5 milliszekundum.

• Próbáld meg manuálisan elvégezni az összes munkát – különösen akkor, ha kihívást jelentő animációt dolgozik vászonban vagy WebGl-ben. Használjon speciális alkalmazásokat és animációs könyvtárakat.

• Ne indítsa el több elem animációját ugyanabban az időben – túlterheli az észleléseket. A szekvenciális animáció jobban érzékeli, mint egyidejű.

• Az egyik cél elemeihez használja ugyanazt animációs stílusot, ugyanazokat a hatásokat és a sebességet.

• Az animáció nem lehet túl hosszú vagy lassú, különösen akkor, ha nem indokolt a felhasználó által megkövetelt folyamat befejezésének elvárása

• Megtagadja az animáció folyamatos megjelenítését gyakran használt forgatókönyvekben, különösen, ha díszítő animációról beszélünk. Semmi gumiabroncs, mint az azonos cselekvés monoton ismétlése. Gyakrabban, mint mások, mint egy olyan megoldás, mint a scrolljacking, arra kényszerítve, hogy a felhasználó ismételten látható, “extra” képernyőkön keresztül gördüljön. Ügyeljen arra, hogy elhagyja a felhasználót, hogy azonnal fontos információkat kapjon.

• Ne adjon hozzá egy olyan animációt, ahol a felhasználóra összpontosított – például az űrlapok kitöltésekor vagy az összehasonlítások táblázatok vizsgálatakor.

• És végül. Ügyeljen arra, hogy tesztelje a munkáját az alacsony teljesítményű eszközökön, rossz internetkapcsolattal és különböző böngészőmotorokkal. Mielőtt elindítaná a projektet, és különösen a “súlyozott” rengeteg animációs elemeket, fontos, hogy kizárják az összes kockázatot

A teljesítmény javítása?

Még a leginkább osztályú animáció sem, ha a felhasználó, ha folyamatosan “lassít”. Mondja meg, hogyan kell elkerülni:

• Helyezze az időzítéseket oly módon, hogy az összes animáció elinduljon és működjön egymás után. Egy pár animáció egyidejűleg késedelem nélkül képes dolgozni, de minél többet, és a gyengébb az autó, annál erősebb a “LAGS” a képernyőn. Több mint három egyidejű indítás valószínűleg problémákat okoz, különösen a mobileszközökön.

• Érdemes lesz az oldalak számának csökkentése, egyszerűsíti a Markup és a választók CSS-t, várjon, amíg az animáció kezdete előtt letölti a szükséges erőforrásokat.

• Video vagy szekvenciák, kiválasztja az optimális tömörítési mutatók az egyes keret (bitráta), és számuk az idő egységnyi (FPS). Mint az alacsonyabbak, annál nagyobb eséllyel az animációt reprodukálni az alacsony teljesítményű eszközökön. De ugyanakkor, ha a bitráta és az FPS túl alacsony, a “képek” minősége romlik, és a keretek közötti átmenetek sima.

• Nem ajánlatos a videót örökre lazítani. Lassíthatja az egész oldalt. Ezért ajánlatos egy bizonyos idő után, vagy közben vigyázni animáció köréből láthatóságának ütköző ismételt lejátszás. Szintén egy jó hang elhagyja a felhasználót a lehetőséget, hogy megállítsa a háttér videóját.

• A CSS animációkkal való munkavégzés során próbálja meg, hogy ne változtassa meg az átláthatóság (átirányítás) és az átalakítás (átalakítás). Például: Az objektum méretének csökkentése érdekében használja a méretváltási tulajdonságot a szélesség / magasság megváltoztatása helyett. Ugyanez vonatkozik a képernyő elemének megváltoztatására. Ne változtassa meg az értékeket a francia, hiszen szükség lesz a szerkezetátalakítási az oldal elrendezést az egyes keret. Használja a transzformációt: Translatex vagy Transform: Fordítás transzformáló tulajdonság.

• Annak érdekében, hogy jobban megértsük, hogy milyen dolgok vannak aktiválva az animációkkal, láthatod a HAB-n található listát példaként: Színváltozás. Úgy tűnik, hogy nincs újjáépítés és változás a geometriában, de ez a cselekvés inicializálja a festést, és ez egy nagyon munkaerő-működési művelet. De a CSS Pointer-Events tulajdonság szerepel a listán a biztonságos és kombinálva a nulla Opacity értékét ugyanaz a hatása, mint a display: none, de anélkül, hogy befolyásolná a teljesítmény, ha indít új renderelő ciklus animáció.

• A teljesítmény javítása érdekében nagyon hasznos, hogy animált elemeket készítsen egy külön rétegben (a böngésző előkészíti a képet a kimenetre a réteg linker segítségével), hogy a változások ne befolyásolják mindent körül. Ehhez használhatjuk az akarat-változások tulajdonságait, vagy ahogyan azt korábban, átalakítják: fordítás (0). Hasonlóképpen, a Backface-Láthatósági tulajdonságok és az ingatlanok: Rejtettek. De nem szabad elfelejteni, hogy azáltal túl sok réteg, tudjuk a helyzetet, éppen ellenkezőleg, romlik.

• Többek között ne használja „puff” animációk elemek, amelyek által nyújtott böngésző erők. Példa: Több áttetsző blokk mozgása egymás fölött árnyékokkal vagy egy sor átfedő alsó szűrőkkel jelentősen növeli a fékezést. Ha tényleg átfedést kell használnia (pl. Parallaxis létrehozásakor), próbálja meg helyettesíteni az ilyen dolgokat áttetsző képekkel.

• A további terhelés is az elemekhez való hozzáférést a JS-vel használja. És ez nem feltétlenül változást stílusok, az is lehet fellebbezést néhány tulajdonságok és módszerek elemek, mint a Offset vagy lapozzunk. Tehát próbálja meg minimalizálni az ilyen kérések számát és gyakoriságát. És ha lehetséges, ne változtassa meg a szabványos tulajdonságokat – a görgetés típusát a JS segítségével. Próbálja meg a CSS tulajdonságait, és a JS csak szélsőségesként alkalmazható.

• Próbáld meg a SetInterval és a Settinout funkciók nélkül. Az a tény, hogy nem “csatolva” a böngésző rajzolásának mechanizmusához, és nem szinkronizálódnak az idővel, amikor a “épít” új keret. Tehát fennáll a veszélye a szinkronizálási veszteségnek a felhasználói eszközzel. Ezenkívül ezen animációs funkciók használatának köszönhetően továbbra is lejátszásra kerül még akkor is, ha egy másik lapra vált. Ez az, hogy továbbra is futtatja és fékezi a rendszert, bár a felhasználó nem is látja őket. Az ilyen esetekben SetInterval és Settentimeout helyett jobb, ha a kéréseket alkalmazzuk.

• Másrészt nem szabad használni a kérés -atációs fájlokat, ha túl sok animációs elem van az oldalon – kézzelfogható “Küldés” FPS-hez vezethet. Igen, köszönhetően ennek az eszköznek köszönhetően az animáció sima és gyönyörű lesz, de a lejátszás többször is több időt vesz igénybe, mint a tervezett. Ilyen helyzetben elhanyagolhatja az előző tétel ajánlásait, és alkalmazhatja a SETInTerval és a SettinEutout funkciókat.

• Ha van választása 2D – vászon és WebGL között, válassza ki a második. Ugyanezek a tanácsok adhatók a komplex szűrők és hatások tekintetében. A WebGL adja meg a kezdeti plusz teljesítményt ugyanazon feladatokon. Ami a WebGl optimalizálását illeti, ez a téma egy külön nagy cikkhez.

És egy kis LifeHakov

• Adja meg az animációs időzítéseket a változók segítségével, ez lehetővé teszi, hogy lassítsa vagy felgyorsítsa az egész animációt, ha szüksége van rá.

• Hogy felfedje az összes hibát (vagy pontosan győződjön meg róla), tesztelje az animációt alacsony sebességgel.

• Használja a mutató-események tulajdonságát, hogy megakadályozza a nemkívánatos animációs szünet a felhasználói műveletek miatt.

• Ne feledje, hogy a negatív animációs késleltetési értékek használatának lehetősége lehetővé teszi, hogy azonnal elindítsa a lejátszást a késedelemben megadott időponttól.

• A pszeudo-elemek animáltak lehetnek.

• A nem szabványos oldal görgetés végrehajtásához használja a Scroll Scapping használatát.

• A keyframes diszkrét tulajdonságainak hozzáadása arra a tényre vezethet, hogy különböző böngészőkben az ilyen tulajdonságok különböző időpontokban kerülnek végrehajtásra. Ennek elkerülése érdekében kérje meg a kulcstartót a megfelelő helyen, szükség van a minimális időtartamra a százalékos arányban, és megváltoztathatja az ingatlant.

• Új tulajdonságok támogatják a továbbfejlesztett böngészőket, akkor az animációk létrehozásakor elkezdhetik őket az Arsenalban. Ugyanakkor mindig használhatja a Támogatási szabályt annak meghatározásához, hogy a felhasználó megtekinthesse és állítsa be a kimeneti eredményt.

Ez minden. Bár sokáig beszélhetsz az animációkról. Például tudnánk mesélni a újítások a világ animációs – az új szűrők és média regiszterek vagy a frissen nemrégiben korszerű eszközök és technológiák, mint a Web API animációk. És szeretnél olvasni az animáció trendjeiről? Ha igen, örömmel fogunk fordítani a következő cikket e témában!