Kuinka käyttää nopeutta animaatioiden lisäämiseen helposti

Liike herättää huomiomme; se on synnynnäinen selviytymismekanismi, joka on palvellut esi-isiämme hyvin tuhansien vuosien ajan. Se antoi heille mahdollisuuden havaita saalistajat, jotka hiipivät heihin. Nykyään se on enimmäkseen jäljellä oleva vaisto, jota me verkkosivujen suunnittelijat ohjaamme käyttäjien huomiota ja kiinnostusta sivustoillamme.

Animaation ja siirtymien, kuten peittämättömyyden, värimuutosten, skaalauksen ja 3D-liikkeen, lisääminen muuttaa muuten tasaisen, staattisen sanojen ja kuvien kollaasin dynaamiseksi ja mielenkiintoiseksi sivustoksi. Sinun tulisi ehdottomasti lisätä animaatioita verkkosivustosi malleihin - kun niitä käytetään säästeliäästi ja tarkoituksella, se tekee niistä parempia.

Mutta miten voit tehdä tämän tarkalleen? Animaatioita voidaan lisätä sivustoon kahdella tavalla CSS: n ja JavaScriptin avulla.



CSS on täydellinen pienille sivustoille, jotka eivät vaadi paljon mukautettua koodausta, ja yksinkertaisille käyttäjien vuorovaikutuksille, kuten pienille tyylimuutoksille elementtien lepotiloissa. (Tai jos sinulla ei yksinkertaisesti ole halua tehdä mitään ohjelmointia!)

Paras tapa lisätä animaatiota sivustolle on JavaScriptiä, ja paras moderni animaatiokirjasto tähän tarkoitukseen on Velocity.js .

Tämä artikkeli on ainutlaatuinen siinä mielessä, että siinä otetaan käyttöön pohjaan perustuva lähestymistapa verkkoanimaation oppimiseen. Jos olet verkkosivujen suunnittelija, joka ei ole paljoakaan ottanut JavaScriptiä, mutta halusi aina edistyneen animaation voiman, jatka lukemista.

Mikä on Velocity.js?

Napsauta kuvaa nähdäksesi Velocity.js-esityksen

Napsauta kuvaa nähdäksesi Velocity.js-esityksen

Velocity on ilmainen, kevyt kirjasto, jonka avulla voit lisätä animaatioita helposti sivustoihisi yksinkertaisimmista animaatioista monimutkaisimpiin. Velocity ylittää kaikki muut animaatiokirjastot, on helppokäyttöinen ja jäljittelee suosituimman JavaScript-kirjaston, jQueryn, syntaksia. Kaikki selaimet ja laitteet tukevat sitä myös hyvin, ja suuret yritykset, kuten Uber ja Whatsapp .

Nopeutta käytetään parhaiten jQueryn kanssa, mutta sen ei tarvitse olla. Mikä on jQuery? jQuery on JavaScript-kirjasto, joka on suunniteltu yksinkertaistamaan HTML-elementtien valintaa ja käsittelyä. Käytännössä on oletettu, että jQueryä käytetään useimmissa verkkoprojekteissa - se on niin suosittua.

jQueryllä on omat animaatiotyökalut, jotka ovat alttiina 'animoi' -toiminnolle, mutta monoliittisen jQueryn vuoksi se tuottaa epämääräisiä animaatioita. Se ei myöskään ole läheskään yhtä monipuolinen kuin Velocity. Nopeuden avulla voit hyödyntää jQueryn elementtien valinnan voimaa ja ohittaa jQueryn animaatiopuutteet. Ero, erityisesti helpon animaation työnkulun luomisessa, on yö ja päivä.

Velocity tarjoaa upeita etuja sekä CSS- että jQuery-pohjaisiin animaatioihin, jotka käsittelen, kun olemme käyneet läpi sen käytön perusteet. Näiden etujen tarjoamiseksi tulevista ominaisuuksista ovat vieritysanimaatiot, animaatioiden peruutukset, fysiikkaan perustuvat liikkeet ja animaatioiden ketjutus. Melko hienoja juttuja.

Aloitetaan nyt, miten sitä käytetään.

Kuinka voin käyttää Velocityä?

Ensimmäinen vaihe on ladata koodi Velocity-verkkosivusto (kopioi-liitä koodi tekstieditoriin ja tallenna se nimellä 'velocity.min.js'). Vaihtoehtoisesti voit vetää sen suoraan HTML-koodiin (kuten alla olevassa koodiesimerkissä näkyy).

Kummassakin tapauksessa sisällytä Velocity-tiedosto käyttämällä a -tunniste ennen asiakirjan viimeistä runkotagia ja ennen JavaScript-tiedostoa, jota koodaat ('script.js'):

… …

Huomautus : Jos käytät jQueryä, varmista, että sisällytät jQueryn ennen Velocityä. Nopeus sopeutuu jQueryn läsnäolon vuoksi.

Kun koodi on sisällytetty komentotunnisteeseen, voit alkaa käyttää nopeus() toiminto koko 'script.js' -tiedostossasi.

Kuinka suoritan tämän toiminnon?

Käytät nopeusfunktiota jQuery-elementissä (olettaen, että käytät jQueryä). Oletetaan esimerkiksi, että sinulla on seuraava kappale, jonka haluat animoida:

This is an example element you can select and animate.

Voimme valita sen jQueryn kanssa kappaleen tunnuksella ('esimerkki') ja tallentaa sen muuttujaan:

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

Tämä luo jQuery-elementtiobjektin nimeltä $ element, joka edustaa tätä kappaletta. Voimme nyt suorittaa nopeusfunktiokutsut tälle elementille käyttämällä tätä $ element -muuttujaa:

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

Okei, niin mitkä ovat sen hyväksymät argumentit?

Väitteet

Nopeus hyväksyy yhden tai useamman argumentin. Ensimmäinen väite on pakollinen. Se voi olla joko jonkin ennalta määritetyt komennot (seuraavat esimerkit), tai kohde, jolla on erilaisia ​​CSS-ominaisuuksia, jotka tulisi animoida.

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

Huomaa: Ominaisuusjärjestyksellä dataobjektissa ei ole merkitystä. Kaikki animaatiossa tapahtuu täsmälleen samaan aikaan.

Toinen valinnainen argumentti on myös objekti. Se sisältää animaatiovaihtoehtoja, kuten kesto, keventäminen ja viive, ja täydellinen (toiminto, joka suoritetaan animaation valmistuttua):

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

Toisin kuin CSS: ssä, jossa voit siirtää useita numeerisia arvoja CSS-ominaisuuteen, kuten marginaali ( marginaali: '10px 5px 8px 12px' ), Velocityn kanssa on käytettävä yhtä arvoa CSS-ominaisuutta kohti. Siksi sinun on määritettävä kukin komponentti erikseen: {marginRight: '10px', marginTop: '5px' ...} .

Tämä saattaa tuntua haitalta, mutta se on itse asiassa etu. Sen lisäksi, että tämä on luettavampaa ja selkeämpää, sen avulla voit myös määrittää kullekin aliomaisuudelle yksittäiset kevennystyypit sen sijaan, että pakotettaisiin käyttämään yhtä kevennystyyppiä kaikille. Tämä antaa sinulle suoran hallinnan animaatioosi!

Huomaa: CSS-ominaisuudet, jotka sisältävät useita sanoja ( marginaali vasemmalle ja taustaväri ) ei voi tavuttaa, mutta se on kirjoitettava kamelikammella ( marginaali Vasen ja taustaväri ).

Ominaisuusarvot

Jos et anna yksikötyyppiä, Velocity olettaa yhden sinulle (yleensä ms, px ja deg). Suosittelen kuitenkin olemaan yksiselitteinen, jotta voit nähdä yksikötyypit yhdellä silmäyksellä aina kun sinä tai työtoverisi katsotte koodisi läpi. Jos arvo sisältää muuta kuin numeerista arvoa (% tai kirjaimia), sinun on käytettävä lainausmerkkejä.

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

Mikä tämä 'helpottava' liiketoiminta on?

Olen toistaiseksi käyttänyt sanaa helpottamalla muutaman kerran, ja ehkä olet hämmentynyt siitä, mitä se tarkoittaa. Easings määrittää animaation nopeuden eri vaiheissa koko sen keston ajan. Esimerkiksi helpottamisen helpotus kiihtyy vähitellen animaation alussa ja pysyy sitten vakiona loppuun asti. 'Helppokäyttöinen' kevennys alkaa lineaarisella nopeudella ja hidastuu vähitellen lähellä animaation loppua. 'Lineaarisella' kevennyksellä on vakio nopeus koko keston ajan, ja se näyttää erittäin pirteältä ja robotilta.

Määrität helpottamisen kätevästi helpottamalla -vaihtoehtoa:

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

Helpotukset muuttuvat paljon monimutkaisemmiksi, mutta lyhyyden vuoksi lopetan tähän. Lue Velocity's dokumentointi Lisätietoja.

Ketjutus

Sarjaan perustuvien peräkkäisten animaatioiden luominen CSS: ään edellyttää ajastuksen ja viiveiden manuaalisen laskemisen kullekin yksittäiselle animaatiolle. Ja jos jokin näistä vaiheista on muutettava, kaikki tässä vaiheessa jatkuvat animaatiot on myös laskettava uudelleen ja muutettava.

Nopeus mahdollistaa animaatioiden yksinkertaisen ketjutuksen peräkkäin, vain kutsumalla nopeustoiminto peräkkäin:

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

Tässä on Codepen-esimerkki ketjutuksesta.

Huomaa: Huomaat, että vain viimeisellä nopeuspyynnöllä on ';' rivin lopussa. Tämä on erittäin tärkeää. Animaatioiden ketjutamiseksi kaikki 'nopeus' -kutsut on suoritettava yhdessä samalle elementille, etkä voi lopettaa komentoriviä puolipisteellä. JavaScript jättää välilyönnin huomiotta, joten nämä puhelut näyttävät tältä: $ element.velocity (...). nopeus (...). nopeus (...) .

Takaisin ominaisuuksiin

Sen pitäisi antaa sinulle kurkistaa Velocityyn ja miten sitä käytetään. Nyt kun et ole hukkua, palataan takaisin kuvaamaan niitä hienoja etuja, joita se tarjoaa CSS: n ja jQueryn kautta.

Sivun vieritys

Yksisivusivustot ovat nyt trendikkäitä verkkosuunnittelussa, jossa sivusto on jaettu osiin eikä erillisiin sivuihin. Tämän seurauksena navigointilinkin napsauttaminen yksinkertaisesti saa sivun vierittämään alaspäin haluamaasi sivuosioon. Ilman animaatiota se on välitön ja haastava hyppy, joka tarjoaa käyttäjälle mitään kontekstia sisällön sijainnista suhteessa muuhun sivuun.

CSS ei voi suorittaa vieritystä, joten tämä on yksi JS-animaatioiden suosituimmista käyttötavoista.

Suorita vieritys nopeudella suorittamalla 'nopeus' -toiminto 'vieritä' -komennolla elementissä, johon haluat vierittää:

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

Tämä kutsu saa selaimen vierittämään alaspäin valitun elementin yläreunaan yli 1200 ms. Pelkästään jQueryn kanssa tämä olisi paljon monimutkaisempi, monirivinen toiminto. Säästän sinua sekaannuksen aiheuttamasta päänsärystä jättämättä sitä tänne.

Tässä on Codepen-esimerkki vierityksestä.

Animaation kääntäminen

Jos haluat palata elementin alkuperäiseen tilaan ennen animaation aloittamista, jQueryssä sinun on animoitava sen ominaisuudet manuaalisesti alkuperäisiin arvoihinsa. Esimerkiksi:

JQueryn kanssa:

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

Velocityn kanssa sinun on kuitenkin suoritettava käänteinen komento:

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

Tämä edellinen kutsu palauttaa animaation valitun elementin alkuperäiseen tilaan ennen animaatiota - arvoja ei tarvitse määrittää manuaalisesti.

Tässä on Codepen-esimerkki animaation kääntämisestä.

Fysiikkaan perustuva liike

Todellinen maailma ei ole täydellinen tai sujuva - eikä reaalimaailma. Siinä on nopeita osia, hitaita osia, painoa, liikemäärää ja kitkaa. Toisin kuin CSS: ssä, voit matkia reaalimaailman fysiikkaa JS-pohjaisissa animaatioissasi, jolloin asiat näyttävät luonnollisemmilta. Lineaarinen liike näyttää robottiselta (elottomalta) ja pirteältä.

Realistisen liikkeen mahdollistamiseksi Velocity hyväksyy kevätfysiikkaan perustuvan kevennyksen. Tämän kevennystyypin parametri on jännitysarvon (oletus: 500) ja kitka-arvon (oletus: 20) taulukko (katso Nopeusasiakirjat Lisätietoja).

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

Suuri jännitysarvo lisää animaation kokonaisnopeutta ja pomppimista. Suuri kitka-arvo saa animaation hidastumaan nopeammin, mikä vähentää sen nopeutta lähellä animaation loppua. Näiden arvojen muokkaaminen tekee jokaisesta animaatiosta ainutlaatuisen, realistisen ja mielenkiintoisen.

Yllä oleva esimerkki-animaatio olisi hidas ja jäykkä (matala jännitys) ja hidastuisi vain hitaasti koko keston ajan (pieni kitka).

Tässä on Codepen-esimerkki kevätfysiikkaa käyttäen.

Iso finaali

Okei, ehkä tarvitset pari esimerkkiä todellisista animaatioista ja Velocity-komennoista. Aloitetaan laatikon leveyden ja korkeuden animoinnilla yhdistämällä sekä ketjutus että animaation kääntäminen, ja käytämme seuraavaa laatikkoelementtiä:

Seuraavalla CSS-tyylillä:

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

Voit animoida sen leveyden, sen jälkeen sen korkeuden ja palauttaa sen sitten takaisin alkuperäisiin mittoihinsa seuraavilla nopeuskutsuilla:

// 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 nyt lisätään yksi hyödyllisimmistä, mutta helposti lisättävistä ominaisuuksista: luomalla navigointilinkkejä, jotka vierittävät alas sopivaan sivuosioon.

Oletetaan, että sinulla on seuraavat siirtymispalkki ja sivuosat:

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

Haluamme lisätä vieritysanimaation jokaisen navigointilinkin (nav-linkin luokka) napsautustapahtumaan, mikä saa sivun vierittämään alas sopivaan sivuosioon, jonka tunnus on linkin hrefissä.

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

On olemassa muutama esimerkki nopeuden käytöstä todellisissa sivuelementeissä, lisää esimerkkejä Velocityn dokumentaatio .

Mene nyt ulos ja tee verkosta dynaaminen

Animaatiot herättävät huomiomme ja hengittävät elämää muuten staattiselle sivulle, ja JavaScript on paras tapa lisätä ne projektiisi - ja Velocity on paras JavaScript-animaatiokirjasto siellä. Siksi kirjoitin tämän artikkelin.

CSS-animaatioiden parantamista ja laajentamista rajoittavat CSS-standardin harvinaiset päivitykset. JavaScriptin avulla avoimen lähdekoodin yhteisö tuottaa kymmeniä uusia kirjastoja, laajennuksia ja päivityksiä joka päivä - laajentaen animaatioidesi näköalaa keksimällä uusia työkaluja.

Nopeudella on paljon enemmän ominaisuuksia kuin tässä esitetyt, ja kehotan teitä tarkistamaan sen dokumentointi . Mene nyt kokeilemaan!

Sanat : Neal O'Grady

Neal O'Grady on irlantilainen ja kanadalainen freelance-verkkokehittäjä, suunnittelija ja kirjailija. Hän on kirjoittanut Webflow-blogi ja satunnaisia ​​ajatuksia hänen henkilökohtainen blogi .

Kuten tämä? Lue nämä!