Kuidas kasutada kiirust animatsioonide hõlpsaks lisamiseks

Liikumine meelitab meie tähelepanu; see on kaasasündinud ellujäämismehhanism, mis teenis meie esivanemaid hästi aastatuhandeid. See võimaldas neil avastada neile hiilivaid kiskjaid. Tänapäeval on see enamasti järelejäänud instinkt, mida meie veebidisainerid kasutavad oma saitide kasutajate tähelepanu ja huvi juhtimiseks.

Animatsiooni ja üleminekute, nagu hägususe tuhmumine, värvimuutused, suuruse muutmine ja 3D-liikumine, lisamine muudab muidu tasase, staatilise sõnade ja piltide kollaaži dünaamiliseks ja huvitavaks saidiks. Peaksite oma veebisaidi kujundusse kindlasti lisama animatsioone - säästlikult ja eesmärgipäraselt rakendatuna muudab see neid paremaks.

Aga kuidas saate seda täpselt teha? Saidile saab animatsiooni lisada CSS-i ja JavaScripti abil kahel viisil.

CSS sobib suurepäraselt väikestele saitidele, mis ei vaja palju kohandatud kodeerimist, ja lihtsate kasutajate interaktsioonide jaoks, näiteks elementide hõljumisolekute väikeste stiilimuudatuste jaoks. (Või kui teil pole lihtsalt soovi programmeerimist teha!)

Kõigi nende lihtsate interaktsioonide kõrval on parim viis saidile animatsiooni lisamine JavaScripti abil ja parim kaasaegne animatsioonide kogu selleks Velocity.js .

See artikkel on ainulaadne selle poolest, et see võtab veebianimatsiooni õppimiseks põhjaliku lähenemise. Kui olete veebidisainer, kes pole JavaScripti palju sisse põiminud, kuid on alati soovinud täiustatud animatsiooni jõudu, siis lugege edasi.

Mis on Velocity.js?

Velocity.js demo vaatamiseks klõpsake pilti

Velocity.js demo vaatamiseks klõpsake pilti

Velocity on tasuta ja kerge raamatukogu, mis võimaldab teil oma saitidele hõlpsasti animatsioone lisada, alates lihtsamatest animatsioonidest kuni kõige keerukamani. Kiirus edestab kõiki teisi animatsiooniraamatukogusid, seda on lihtne kasutada ja see jäljendab populaarseima JavaScripti teegi jQuery süntaksit. Seda toetavad hästi ka kõik brauserid ja seadmed ning selle on kasutusele võtnud suuremad ettevõtted nagu Uber ja Whatsapp .

Kiirust saab kõige paremini kasutada koos jQueryga, kuid see ei pea olema. Mis on jQuery? jQuery on JavaScripti teek, mis on loodud HTML-elementide valimise ja manipuleerimise lihtsustamiseks. Praktiliselt on eeldatud, et jQuery't kasutatakse enamikus veebiprojektides - see on nii populaarne.

jQuery'l on oma animeerimisvahendid, mis on selle 'animeerimise' funktsiooni kaudu eksponeeritud, kuid monoliitse jQuery tõttu toodab see räpaseid animatsioone. Samuti pole see kaugeltki nii funktsioonirikas kui Velocity. Kiirus võimaldab teil kasutada jQuery elementide valiku jõudu ja vahele jätta jQuery animatsioonipuudused. Erinevus, eriti lihtsa animatsiooni töövoo loomisel, on öö ja päev.

Kiirus pakub nii CSS-i kui ka jQuery-põhiste animatsioonide ees mõningaid suuri eeliseid, mida käsitlen siis, kui oleme selle kasutamise põhitõed läbi teinud. Eelseisva eelvaate andmiseks hõlmavad need eelised keritavaid animatsioone, animatsioonide ümberpööramist, füüsikal põhinevat liikumist ja animatsiooni aheldamist. Päris vahva värk.

Praegu alustame selle kasutamist.

Kuidas kasutada kiirust?

Esimene samm on koodi allalaadimine Velocity veebisait (kopeerige-kleepige kood tekstiredaktorisse ja salvestage see kui 'velocity.min.js'). Teise võimalusena võite selle tõmmata otse oma HTML-i (nagu on näidatud allpool toodud koodinäites).

Mõlemal juhul lisage kiiruse fail, kasutades a silt enne dokumendi sulgevat tekstimärgendit ja enne JavaScripti faili, mida kodeerite ('script.js'):

… …

Märge : Kui kasutate jQuery-d, veenduge, et oleksite enne kiirust lisanud ka jQuery. Kiirus kohandub ise, arvestades jQuery olemasolu.

Kui kood on skripti märgendisse lisatud, võite hakata seda kasutama kiirus () toimib kogu failis 'script.js'.

Kuidas seda funktsiooni käivitada?

Funktsiooni Kiirus kasutate jQuery elemendil (eeldades, et kasutate jQuery). Oletame näiteks, et teil on järgmine lõik, mida soovite animeerida:

This is an example element you can select and animate.

Saame selle valida jQuery abil lõike ID-ga ('näide') ja salvestada selle muutujasse:

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

See loob jQuery elemendi objekti nimega $ element, mis tähistab seda lõiku. Nüüd saame selle elemendi muutuja $ elementi abil käivitada kiirusfunktsiooni väljakutsed:

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

Okei, mis on argumendid, mida ta aktsepteerib?

Argumendid

Kiirus aktsepteerib ühte või mitut argumenti. Esimene argument on kohustuslik. See võib olla kas ühe nime nimi etteantud käsud (järgitavad näited) või CSS-i erinevate omadustega objekt, mida tuleks animeerida.

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

Märkus. Atribuutide järjestus andmeobjektil on ebaoluline. Kõik animatsioonis toimub täpselt samal ajal.

Teine argument, mis on valikuline, on samuti objekt. See sisaldab animatsiooni valikuid, nagu kestus, leevendamine ja viivitus ning täielik (funktsioon, mis käivitatakse pärast animatsiooni valmimist):

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

Erinevalt CSS-ist, kus saate CSS-i atribuudi nagu margin ( veeris: '10px 5px 8px 12px' ), koos kiirusega peate CSS-i atribuudi kohta kasutama ühte väärtust. Seetõttu peate iga komponendi eraldi määrama: {marginRight: '10px', marginTop: '5px' ...} .

See võib tunduda ebasoodsana, kuid tegelikult on sellest kasu. See pole mitte ainult loetavam ja selgesõnalisem, vaid võimaldab teil iga alamvara jaoks määrata ka individuaalsed leevendustüübid, selle asemel, et teil oleks sunnitud olema kõigi nende jaoks üks leevendustüüp. See annab teile otsese kontrolli rohkemate animatsioonide üle!

Märkus: CSS atribuudid, mis sisaldavad mitut sõna ( veerist vasakul ja taustavärv ) ei saa sidekriipsutada, kuid see tuleb kirjutada kaameras ( marginaalVasak ja taustavärv ).

Atribuudi väärtused

Kui te ei esita ühikutüüpi, eeldab Velocity seda teie jaoks (tavaliselt ms, px ja deg). Sellegipoolest soovitaksin olla selgesõnaline, et saaksite ühikutüübid silmapilkselt eristada alati, kui teie ise või mõni kaastöötaja oma koodi tagasi vaatab. Kui väärtus sisaldab midagi muud kui arvväärtus (% või tähed), peate kasutama jutumärke.

// 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 })

Mis on see „kergendav“ äri?

Olen siiani paar korda kasutanud sõna leevendamine ja võib-olla olete segaduses, mida see tähendab. Easings määrab animatsiooni kiiruse erinevates etappides kogu selle kestuse vältel. Näiteks animatsiooni alguses kiireneb kergendatav järk-järgult järk-järgult ja jääb seejärel konstantseks, kuni see lõpeb. „Kergendamise” leevendamine algab lineaarsel kiirusel ja aeglustub animatsiooni lõpu lähedal järk-järgult. „Lineaarsel” leevendusel on kogu kestuse vältel ühtlane kiirus ning see näeb välja väga karm ja robotlik.

Mugavalt määrate kergendamise valiku „leevendamine” abil:

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

Lihtsustamine läheb palju keerulisemaks, kuid lühiduse huvides peatun siin. Loe kiirust dokumentatsioon rohkem informatsiooni.

Aheldamine

Järjestikuste animatsioonide seeria loomine CSS-is nõuab iga animatsiooni ajastamise viivituste ja kestuste käsitsi arvutamist. Ja kui mõnda neist toimingutest tuleb muuta, tuleb ka kõik selles etapis käivad animatsioonid ümber arvutada ja muuta.

Kiirus võimaldab animatsioone üksteise järel lihtsalt aheldada, kutsudes üksteise järel kiirusfunktsiooni:

$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 });

Siin on Codepeni näide aheldamisest.

Märkus: märkate, et ainult viimasel kiiruskutsel on ';' rea lõpus. See on äärmiselt oluline. Animatsioonide aheldamiseks tuleb kõik 'kiiruse' kõned teha ühele ja samale elemendile ning käsurida ei saa semikooloniga lõpetada. JavaScript eirab tühikut, nii et need kõned näeksid välja järgmised: $ element.velocity (...). kiirus (...). kiirus (...) .

Tagasi funktsioonide juurde

See peaks teile piiluma kiiruse ja selle kasutamise kohta. Nüüd, kui te ei hämmingut, pöördume tagasi nende suurepäraste eeliste kirjeldamise juurde, mida see CSS-i ja jQuery kaudu pakub.

Lehe kerimine

Üheleheküljelised saidid on praegu veebidisainis trendis, kus sait on jaotatud osadeks, mitte eraldi lehtedeks. Seetõttu põhjustab navigeerimislingil klõpsamine lehe lihtsalt vastava lehe sektsiooni alla kerimise. Ilma animatsioonita on see hetkeline ja tülikas hüpe, pakkudes kasutajale ilma kontekstita, kus see sisu ülejäänud lehe suhtes asub.

CSS ei saa kerimist teostada, seega on see JS-i animatsioonide üks populaarsemaid kasutusviise.

Kiirusega kerimise sooritamiseks käivitage lihtsalt elemendi, mille juurde soovite kerida, käsu 'kerimine' funktsioon 'kiirus':

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

See kõne põhjustab brauseri kerimise valitud elemendi ülemisse serva alla 1200 ms. Ainuüksi jQuery abil oleks see palju keerulisem, mitmerealine funktsioon. Säästan teile segadusest põhjustatud peavalu, jättes selle siia lisamata.

Siin on kerimise näide Codepen.

Animatsiooni ümberpööramine

Programmis jQuery peate elemendi algsesse olekusse ennistamiseks enne animatsiooni algust animeerima selle omadused käsitsi nende algväärtustele. Näiteks:

JQueryga:

// 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 });

Kiiruse korral peate aga lihtsalt käsku vastupidine käsk:

// 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');

See eelmine kutsumine muudab animatsiooni valitud elemendi algsesse olekusse enne animatsiooni - pole vaja väärtusi käsitsi määrata.

Siin on Codepeni näide animatsiooni ümberpööramisest.

Füüsikal põhinev liikumine

Pärismaailm pole täiuslik ega sujuv - ka reaalse maailma liikumine. Sellel on kiired osad, aeglased osad, kaal, hoog ja hõõrdumine. Erinevalt CSS-ist saate oma JS-põhistes animatsioonides jäljendada reaalse maailma füüsikat, muutes asjad loomulikumaks. Lineaarne liikumine näeb välja robotlik (elutu) ja karm.

Realistliku liikumise võimaldamiseks aktsepteerib Velocity kevadfüüsikal põhinevat leevendust. See leevendustüüp võtab oma parameetriks pingeväärtuse (vaikimisi: 500) ja hõõrdeväärtuse (vaikimisi: 20) massiivi (vt. Kiirusdokumentatsioon rohkem informatsiooni).

// 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 ] });

Kõrge pingeväärtus suurendab animatsiooni kogukiirust ja põrkumist. Kõrge hõõrdeväärtus põhjustab animatsiooni kiiremat kiirust, vähendades selle kiirust animatsiooni lõpus. Nende väärtuste muutmine muudab iga animatsiooni ainulaadseks, realistlikuks ja huvitavaks.

Ülaltoodud animatsiooni näide oleks aeglane ja jäik (madal pinge) ning aeglustuks kogu kestuse jooksul aeglaselt (madal hõõrdumine).

Siin on kevadfüüsikat kasutav näide Codepenist.

Suur finaal

Olgu, võib-olla vajate paar näidet tõelistest animatsioonidest ja käskudest Velocity. Alustame kasti laiuse ja kõrguse animeerimisega, ühendades nii aheldamise kui ka animatsiooni tagasipööramise ning kasutame järgmist kasti elementi:

Järgmise CSS-i stiiliga:

#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 }

Saate animeerida selle laiuse, millele järgneb selle kõrgus, ja seejärel viia see tagasi oma algsetele mõõtmetele järgmiste kiirusekõnedega:

// 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');

Ja lisame nüüd ühe kõige kasulikuma, kuid samas hõlpsasti lisatava funktsiooni: navigatsioonilinkide loomine, mis kerivad alla vastava lehe jaotiseni.

Oletame, et teil on järgmised navigeerimisriba ja lehe jaotised:

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

Soovime lisada kerimisanimatsiooni iga navigeerimislingi ('nav-lingi' klassi) klõpsusündmusele, mis viib lehe kerimiseni vastava lehe sektsioonini, mille ID on lingi hrefis.

// 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 }); });

Siin on paar näidet selle kohta, kuidas kiirust lehe tegelike elementide jaoks kasutada. Vaadake veel näiteid Velocity dokumentatsioon .

Nüüd minge välja ja muutke veeb dünaamiliseks

Animatsioonid tõmbavad meie tähelepanu ja puhuvad muidu staatilisele lehele elu ning JavaScript on parim viis nende lisamiseks oma projektidesse - ja Velocity on parim JavaScripti animatsioonide kogu seal. Sellepärast kirjutasin selle artikli.

CSS-i animatsioonide täiustamist ja laiendamist piiravad CSS-i standardi harvad värskendused. JavaScripti abil toodab avatud lähtekoodiga kogukond iga päev kümneid uusi teeke, pistikprogramme ja värskendusi, mis avardavad uute tööriistade leiutamise kaudu teie animatsioonide silmaringi.

Kiirusel on palju rohkem funktsioone kui siin demonstreeritud, ja ma soovitan teil seda kontrollida dokumentatsioon . Nüüd minge katsetama!

Sõnad : Neal O'Grady

Neal O'Grady on Iiri-Kanada vabakutseline veebiarendaja, disainer ja kirjanik. Ta on kirjutatud projekti kujundamise teemadel Veebivoo ajaveeb ja juhuslike mõtete kohta tema kohta isiklik ajaveeb .

Nagu nii? Loe neid!