Hogyan használható a Velocity az animációk egyszerű hozzáadásához

A mozgás vonzza a figyelmünket; ez egy veleszületett túlélési mechanizmus, amely évezredeken át jól szolgálta őseinket. Ez lehetővé tette számukra a rájuk lopakodó ragadozók észlelését. Manapság leginkább egy megmaradt ösztön, amelyet mi, webdesignerek használunk, hogy felhívjuk a felhasználók figyelmét és érdeklődését a webhelyeinken.

Az animáció és az átmenetek, például az átlátszatlanság, a színváltozások, a méretarány és a 3D-s mozgás hozzáadása a szavak és képek egyébként lapos, statikus kollázsát dinamikus és érdekes hellyé varázsolja. Önnek feltétlenül hozzá kell adnia animációkat webhelye tervéhez - ha takarékosan és célzottan alkalmazzák, ez jobbá teszi őket.

De hogyan tudja ezt pontosan megtenni? Kétféle módon adhatunk animációt egy webhelyhez CSS-sel és JavaScript-szel.

A CSS tökéletes olyan kis helyszínekhez, amelyek nem igényelnek sok egyedi kódolást, és egyszerű felhasználói interakciókhoz, például az elemek lebegési állapotának apró stílusbeli változtatásaihoz. (Vagy ha egyszerűen nem akar programozni!)

Az egyszerű interakciókon kívül bármi máshoz a legjobb mód az animáció hozzáadása a webhelyhez a JavaScript használatával, és a legjobb modern animációs könyvtár ehhez: Velocity.js .

Ez a cikk egyedülálló abban az értelemben, hogy alapos megközelítést alkalmaz a webanimáció elsajátításához. Ha olyan webdesigner vagy, aki nem sokat fecsegett a JavaScript-ben, de mindig a fejlett animáció erejére vágyott, akkor olvassa tovább.

Mi az a Velocity.js?

Kattintson a képre a Velocity.js bemutató megtekintéséhez

Kattintson a képre a Velocity.js bemutató megtekintéséhez

A Velocity egy ingyenes, könnyű könyvtár, amelynek segítségével könnyedén hozzáadhat animációkat webhelyeihez, a legegyszerűbb animációtól a legösszetettebbig. A Velocity felülmúlja az összes többi animációs könyvtárat, egyszerűen használható, és utánozza a legnépszerűbb JavaScript könyvtár, a jQuery szintaxisát. Minden böngésző és eszköz jól támogatja, és olyan nagyvállalatok is átvették, mint az Uber és Whatsapp .

A sebességet a jQuery-val lehet a legjobban használni, de ennek nem kell lennie. Mi a jQuery? A jQuery egy JavaScript könyvtár, amelyet a HTML elemek kiválasztásának és kezelésének egyszerűsítésére terveztek. Gyakorlatilag feltételezhető, hogy a jQuery-t a legtöbb webes projektben használják - ez annyira népszerű.

A jQuery saját animációs eszközeivel rendelkezik az „animációs” funkción keresztül, de a monolitikus jQuery miatt hullámzó animációkat készít. Ez sem közel olyan jellemzőkben gazdag, mint a Velocity. A sebesség lehetővé teszi, hogy kihasználja a jQuery elemválasztási erejét, és kihagyja a jQuery animációs hiányosságait. A különbség, különösen az egyszerű animációs munkafolyamat kialakításában, éjjel és nappal.

A Velocity nagy előnyöket kínál mind a CSS, mind a jQuery alapú animációkkal szemben, amelyekről kitérek, miután áttekintettük a használat alapjait. A jövőbeni áttekintés érdekében ezek az előnyök magukban foglalják a gördülő animációkat, az animációk visszafordítását, a fizikán alapuló mozgást és az animáció láncolását. Nagyon klassz dolgok.

Most kezdjük el a használatát.

Hogyan használhatom a Velocity-t?

Az első lépés a kód letöltése a Velocity weboldal (másolja be a kódot egy szövegszerkesztőbe, és mentse el 'velocity.min.js' néven). Alternatív megoldásként behúzhatja közvetlenül a HTML-be (az alábbi kód példában látható módon).

Akárhogy is, vegye be a Velocity fájlt az a használatával címke a dokumentum záró törzscímkéje és a JavaScript fájl előtt, amelyet kódolni kell ('script.js'):

… …

jegyzet : Ha jQuery-t használ, győződjön meg róla, hogy a jQuery-t is felvette a Velocity előtt. A sebesség a jQuery jelenlétéhez igazodik.

Miután a kód szerepel egy szkriptcímkében, elkezdheti használni a sebesség() funkció a 'script.js' fájlban.

Hogyan futtatom ezt a funkciót?

A Velocity függvényt egy jQuery elemre használja (feltételezve, hogy a jQuery-t használja). Tegyük fel például, hogy a következő bekezdést szeretné animálni:

This is an example element you can select and animate.

A jQuery segítségével kiválaszthatjuk a bekezdés azonosítójával ('példa'), és eltárolhatjuk egy változóba:

var $element = $('#example');

Ez létrehoz egy $ elem nevű jQuery elem objektumot, amely ezt a bekezdést képviseli. Most már futtathatjuk a sebességfüggvény-hívásokat erre az elemre a $ element változó használatával:

$element.velocity( … some command here … );

Oké, akkor milyen érveket fogad el?

Érvek

A sebesség elfogad egy vagy több érvet. Az első érv kötelező. Vagy lehet az egyik neve előre definiált parancsok (követendő példák), vagy egy különféle CSS tulajdonságú objektum, amelyet animálni kell.

// Object defining the animation's final values of width (50%), and left (500px) $element.velocity({ width: '500px', left: '500px' });

Megjegyzés: Az adatobjektumok tulajdonságainak sorrendje lényegtelen. Az animációban minden pontosan ugyanabban az időben történik.

A második argumentum, amely opcionális, szintén objektum. Olyan animációs opciókat tartalmaz, mint az időtartam, az enyhítés és a késleltetés, valamint a teljes (egy olyan funkció, amely az animáció befejezése után fut le):

// Animates an element to a width of 300px over 500ms after a 1000ms delay. $element.velocity({ width: '300px' }, { duration 500, delay: 1000 });

A CSS-től eltérően, ahol több numerikus értéket adhat át egy CSS tulajdonsághoz, például a margóhoz ( margó: „10px 5px 8px 12px” ), a Velocity esetén CSS tulajdonságonként egyetlen értéket kell használnia. Ezért minden összetevőt külön kell beállítania: {marginRight: '10px', marginTop: '5px' ...} .

Ez hátránynak tűnhet, de valójában előny. Ez nemcsak olvashatóbb és egyértelműbb, hanem lehetővé teszi, hogy minden egyes ingatlanhoz egyedi enyhítési típusokat állítson be, ahelyett, hogy rájuk kényszerítenék, hogy mindegyikükhöz egy könnyítési típust alkalmazzanak. Ez közvetlen irányítást biztosít az animáció további darabjaihoz!

Megjegyzés: Több szót tartalmazó CSS ​​tulajdonságok ( margó-bal és háttérszín ) nem lehet elválasztva, de teve tokkal ( marginBal és háttérszín ).

Tulajdonságértékek

Ha nem ad meg egységtípust, akkor a Velocity feltételez egyet (általában ms, px és deg). Mindazonáltal azt javasolnám, hogy legyen egyértelmű, hogy egy pillantással felismerhesse az egységtípusokat, amikor Ön vagy munkatársa visszanéz a kódjára. Ha az érték numerikus értéktől (% vagy betűk) kívül mást tartalmaz, akkor idézőjeleket kell használnia.

// Okay, only numerical value $element.velocity('scroll', { duration: 500 }) // Okay, uses quotes $element.velocity('scroll', { duration: '500ms' }) // Not okay, contains 'ms' without quotes $element.velocity('scroll', { duration: 500ms })

Mi ez a „könnyítő” üzlet?

Eddig néhányszor használtam az enyhítés szót, és talán összezavarodik, mit jelent ez. A könnyítések meghatározzák az animáció sebességét különböző szakaszokban annak teljes időtartama alatt. Például egy „könnyedén beilleszthető” könnyítés az animáció elején fokozatosan felgyorsul, majd a végéig állandó marad. A „könnyebbé tehető” könnyítés lineáris sebességgel kezdődik, és az animáció vége felé fokozatosan lassul. A „lineáris” lazításnak állandó sebessége van az egész időtartam alatt, és nagyon tépőnek és robotinak tűnik.

Könnyen megadhatja az enyhítést a „könnyítés” opcióval:

// Animate an element to a width of 500px with an easing of 'ease-in-out' $element.velocity({ width: 500 }, { easing: 'ease-in-out' });

A könnyítések sokkal bonyolultabbá válnak, de a rövidség kedvéért itt megállok. Olvassa el a Velocity-t dokumentáció további információért.

Láncolás

Szekvenciális animációk sorozatának létrehozása CSS-ben megköveteli az egyes animációk időzítési késleltetésének és időtartamának manuális kiszámítását. És ha ezen lépések bármelyikét meg kell változtatni, akkor az ebben a lépésben haladó összes animációt is újraszámolni és megváltoztatni kell.

A sebesség lehetővé teszi az animációk egyszerű láncolását egymás után, csak a sebességfüggvény egymás utáni meghívásával:

$element // Animates the element to a height of 300px over 1000ms .velocity({ height: 300 }, { duration: 1000 }) // Animates the element to a left position of 200px over 600ms after the width is finished animating .velocity({ top: 200 }, { duration: 600 }) // Fades the element over 200ms out after it is done moving .velocity({ opacity: 0 }, { duration: 200 });

Itt van egy Codepen példa a láncolásra.

Megjegyzés: Észre fogja venni, hogy csak az utolsó sebességhívásnak van ';' a sor végén. Ez rendkívül fontos. Az animációk összekapcsolásához az összes „sebesség” hívást együtt kell végrehajtani ugyanazon az elemen, és a parancssort pontosvesszővel nem lehet befejezni. A JavaScript figyelmen kívül hagyja a szóközt, így ezek a hívások a következőképpen néznének ki: $ element.velocity (...). sebesség (...). sebesség (...) .

Vissza a funkciókhoz

Ezzel bepillanthat a Velocity-be és annak használatába. Most, hogy nem fog elborulni, térjünk vissza azoknak a jó előnyöknek a leírására, amelyeket a CSS és a jQuery nyújt.

Oldal görgetése

Az egyoldalas webhelyek a webes tervezésben mostanában trendnek számítanak, ahol a webhelyeket szakaszokra osztják, nem pedig külön oldalakra. Ennek eredményeként a navigációs linkre kattintva az oldal egyszerűen lefelé görget a megfelelő oldalrészig. Animáció nélkül ez egy pillanatnyi és harsány ugrás, amely a felhasználó számára nem nyújt összefüggést azzal kapcsolatban, hogy ez a tartalom hol helyezkedik el az oldal többi részéhez képest.

A CSS nem tud görgetni, ezért ez az egyik legnépszerűbb felhasználás a JS animációkhoz.

A görgetés végrehajtásához a Velocity segítségével egyszerűen futtassa a 'sebesség' funkciót a görgetés paranccsal a görgetni kívánt elemen:

$element.velocity('scroll', { duration: 1200 });

Ez a hívás arra készteti a böngészőt, hogy 1200 ms-on belül lefelé görgessen a kiválasztott elem felső széléig. Csak a jQuery segítségével ez sokkal bonyolultabb, többsoros funkció lenne. Megkímélem a zavartság okozta fejfájástól, ha nem veszem fel ide.

Itt van egy Codepen példa a görgetésre.

Animáció megfordítása

A jQuery alkalmazásban az elem eredeti állapotához való visszatéréshez az animáció megkezdése előtt kézzel kell animálnia annak tulajdonságait az eredeti értékükre. Például:

JQuery-vel:

// Animate a 100px tall element to a height of 200px over 500ms $element.animate({ height: '200px' }, { duration: 500 }); // Animate the element back to its original height value of 100px over 500ms $element.animate({ height: '100px' }, { duration: 500 });

A Velocity használatával azonban csak a fordított parancsot kell futtatnia:

// Animate a 100px tall element to a height of 200px over 500ms $element.velocity({ height: '200px' }, { duration: 500 }); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity('reverse');

Ez az előző hívás visszavonja az animációt a kijelölt elem eredeti állapotába az animáció előtt - nem szükséges manuálisan megadni az értékeket.

Itt van egy Codepen példa az animáció megfordítására.

Fizikán alapuló mozgás

A való világ nem tökéletes vagy sima - a valós mozgás sem. Gyors alkatrészei, lassú részei, súlya, lendülete és súrlódása van. A CSS-sel ellentétben JS-alapú animációiban utánozhatja a valós fizikát, így a dolgok természetesebbnek tűnnek. A lineáris mozgás robotikusnak (élettelennek) és csípősnek tűnik.

A reális mozgás lehetővé tétele érdekében a Velocity elfogadja a tavaszi fizikán alapuló enyhítést. Ez az enyhítési típus egy feszültség (tömb: 500) és egy súrlódási érték (alapértelmezett: 20) tömböt veszi paraméterül (lásd: Sebességdokumentáció további információért).

// Animate the selected element to a height of 200px over the default 400ms using a spring physics easing. Spring tension is set to 250, and friction is set to 10. $element.velocity({ height: '200px', { easing: [ 250, 10 ] });

A magas feszültségérték növeli az animáció teljes sebességét és visszapattanását. A nagy súrlódási érték miatt az animáció gyorsabban lassul, és az animáció vége felé csökken a sebessége. Ezen értékek módosítása minden animációt egyedivé, valósághűvé és érdekessé tesz.

A fenti animáció lassú és merev (alacsony feszültségű), és csak lassan lassul le az időtartam alatt (alacsony súrlódás).

Itt egy Codepen példa a tavaszi fizika segítségével.

Nagy finálé

Oké, talán szükséged van néhány példára a valódi animációkra és a Velocity parancsokra. Kezdjük egy doboz szélességének és magasságának animálásával, kombinálva mind a láncolást, mind az animáció megfordítását, és használjuk a következő doboz elemet:

A következő CSS-stílussal:

#box { width: 100px; // Set box width to 100px height: 100px; // Set box height to 100px border: solid 1px #000; // Give the box a 1px solid black border to make it visible }

Animálhatja szélességét, majd magasságát, majd visszaállíthatja eredeti méreteire a következő sebességhívásokkal:

// Select the box element by ID $('#box') // Animate to a width of 200px over 500ms .velocity({ width: 200px }, { duration: 500 }) // Animate to a height of 50px over 300ms directly after width stops animating .velocity({ height: 50px }, { duration: 300 }) // Animate back to original width and height after height stops animating .velocity('reverse');

És most tegyük hozzá az egyik leghasznosabb, mégis könnyen hozzáadható funkciót: navigációs hivatkozások létrehozása, amelyek lefelé görgetnek a megfelelő oldalrészig.

Tegyük fel, hogy a következő navigációs sáv és oldalrészek vannak:

Product ... About … ... ...

Hozzá akarjuk adni a görgetési animációt minden navigációs hivatkozás (a „nav-link” osztálya) kattintási eseményéhez, amelynek hatására az oldal lefelé görget a megfelelő oldalrészig, amelynek azonosítóját a hivatkozás href-je tartalmazza.

// Attach a click event to the 'nav-link' class $('.nav-link').on('click', function() { // Grab the target page section's ID from the link's (contained within 'this') href attribute var scrollTargetID = $(this).attr('href'); // Select this element by ID using jQuery var $scrollTarget = $(scrollTargetID); // Add the scroll animation to the element $scrollTarget.velocity('scroll', { duration: 1000 }); });

Van néhány példa arra, hogyan lehet használni a sebességet a tényleges oldalelemeken, további példákért nézze meg A Velocity dokumentációja .

Most menjen ki és tegye dinamikussá az internetet

Az animációk vonzzák a figyelmünket, és életet lehelnek egy egyébként statikus oldalba, és a JavaScript a legjobb módja annak, hogy hozzáadják őket a projektekhez - és a Velocity a legjobb JavaScript animációs könyvtár odakinn. Ezért írtam ezt a cikket.

A CSS-animációk fejlesztését és bővítését korlátozza a CSS-szabvány ritka frissítése. A JavaScript segítségével a nyílt forráskódú közösség több tucat új könyvtárat, bővítményt és frissítést állít elő minden nap - új eszközök feltalálásával tágítja animációinak látókörét.

A sebesség sokkal több funkcióval rendelkezik, mint az itt bemutatottak, és arra kérem Önt, hogy nézze meg dokumentáció . Most pedig kísérletezzen!

Szavak : Neal O'Grady

Neal O'Grady ír-kanadai szabadúszó webfejlesztő, tervező és író. Tervezési témákról írt a Webflow blog és véletlenszerű gondolatokra személyes blog .

Mint ez? Olvassa el ezeket!