Kaip naudoti greitį, kad lengvai pridėtumėte animacijas

Judesys pritraukia mūsų dėmesį; tai įgimtas išgyvenimo mechanizmas, tūkstančius metų gerai tarnavęs mūsų protėviams. Tai leido jiems aptikti prie jų sėlinančius plėšrūnus. Šiais laikais tai dažniausiai yra likęs instinktas, kurį mes, interneto dizaineriai, naudojame norėdami atkreipti savo svetainių vartotojų dėmesį ir susidomėjimą.

Pridėjus animaciją ir perėjimus, tokius kaip neskaidrumas išnyksta, spalvos pokyčiai, mastelis ir 3D judėjimas, kitaip plokščią, statišką žodžių ir vaizdų koliažą paverčia dinamišku ir įdomiu puslapiu. Jūs visiškai turėtumėte pridėti animacijas prie savo svetainės dizaino - taupiai ir tikslingai jas pritaikius, jie tampa geresni.

Bet kaip tai padaryti tiksliai? Yra du būdai, kaip pridėti animaciją svetainėje, naudojant CSS ir „JavaScript“.



CSS puikiai tinka mažoms svetainėms, kurioms nereikia didelio pasirinktinio kodavimo, ir paprastoms naudotojų sąveikoms, pvz., Mažiems elementų užvedimo būsenos stilistiniams pakeitimams. (Arba, jei jūs tiesiog nenorite nieko programuoti!)

Geriausias būdas pridėti animaciją svetainėje yra „JavaScript“, o tai yra geriausia šiuolaikinė animacijos biblioteka, jei tai nėra paprasta. Greitis.js .

Šis straipsnis yra unikalus tuo, kad jis mokysis žiniatinklio animacijos pagrindais. Jei esate interneto dizaineris, kuris nelabai įsisąmonino „JavaScript“, bet visada norėjo pažangios animacijos galios, toliau skaitykite.

Kas yra Velocity.js?

Spustelėkite vaizdą, kad pamatytumėte „Velocity.js“ demonstracinę versiją

„Velocity“ yra nemokama, lengva biblioteka, leidžianti lengvai pridėti animacijas prie savo svetainių, pradedant paprasčiausia animacija ir baigiant sudėtingiausia. „Velocity“ lenkia visas kitas animacijos bibliotekas, yra paprastas naudoti ir imituoja populiariausios „JavaScript“ bibliotekos „jQuery“ sintaksę. Tai taip pat gerai palaiko visos naršyklės ir įrenginiai, ją priėmė pagrindinės kompanijos, tokios kaip „Uber“ ir Whatsapp .

Greitį geriausia naudoti su „jQuery“, tačiau jis neturi būti. Kas yra „jQuery“? „jQuery“ yra „JavaScript“ biblioteka, skirta supaprastinti HTML elementų pasirinkimą ir valdymą. Praktiškai manoma, kad „jQuery“ yra naudojamas daugumoje interneto projektų - jis yra toks populiarus.

„jQuery“ turi savo animacijos įrankius, veikiamus naudojant „animacinę“ funkciją, tačiau dėl to, koks monolitinis yra „jQuery“, jis gamina neramią animaciją. Jis taip pat nėra toks turtingas kaip „Greitis“. Greitis leidžia panaudoti „jQuery“ elementų pasirinkimo galią ir praleisti „jQuery“ animacijos trūkumus. Skirtumas, ypač lengvos animacijos darbo eigos nustatymas, yra naktis ir diena.

parduodamas vieno takto drakono paveikslas

„Velocity“ siūlo keletą puikių pranašumų, palyginti su CSS ir „jQuery“ pagrįstomis animacijomis, kurias apžvelgsiu, kai jau pereisime jos naudojimo pagrindus. Kad galėtumėte peržiūrėti būsimus dalykus, šie pranašumai yra slinktinės animacijos, animacijos pakeitimas, fizika paremtas judėjimas ir animacijos grandinės. Gana šaunūs dalykai.

Kol kas pradėkime, kaip jį naudoti.

Kaip naudoti greitį?

Pirmasis žingsnis yra atsisiųsti kodą iš „Velocity“ svetainė (nukopijuokite ir įklijuokite kodą į teksto rengyklę ir išsaugokite ją kaip „velocity.min.js“). Arba galite jį tiesiogiai įsitraukti į savo HTML (kaip parodyta toliau pateiktame kodo pavyzdyje).

Bet kuriuo atveju įtraukite „Velocity“ failą naudodami a žymą prieš baigiamąją dokumento turinio žymą ir prieš „JavaScript“ failą, kurį turėsite koduoti ('script.js'):

… …

Pastaba : Jei naudojate „jQuery“, prieš „Velocity“ įsitikinkite, kad įtraukėte „jQuery“. Greitis prisitaiko, atsižvelgiant į jQuery buvimą.

Kai kodas bus įtrauktas į scenarijaus žymą, galėsite pradėti naudoti greitis () „script.js“ faile.

Kaip paleisti šią funkciją?

Funkciją „Greitis“ naudojate „jQuery“ elementui (darant prielaidą, kad naudojate „jQuery“). Pavyzdžiui, tarkime, kad turite šią pastraipą, kurią norite animuoti:

This is an example element you can select and animate.

Mes galime jį pasirinkti naudodami „jQuery“ su pastraipos ID („pavyzdys“) ir išsaugoti jį kintamajame:

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

Tai sukuria „jQuery“ elemento objektą, pavadintą „$ element“, kuris žymi šią pastraipą. Dabar galime paleisti greičio funkcijos iškvietimus šiam elementui naudodami šį $ elemento kintamąjį:

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

Gerai, tad kokius argumentus ji priima?

Argumentai

Greitis priima vieną ar daugiau argumentų. Pirmasis argumentas yra privalomas. Tai gali būti vieno iš pavadinimų pavadinimas iš anksto nustatytos komandos (pavyzdžiai, kuriuos reikia sekti), arba skirtingų CSS savybių objektas, kuris turėtų būti animuotas.

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

Pastaba: duomenų objektų ypatybių tvarka nėra svarbi. Viskas animacijoje vyksta tuo pačiu metu.

Antrasis argumentas, kuris yra neprivalomas, taip pat yra objektas. Jame yra animacijos parinktys, tokios kaip trukmė, palengvinimas ir atidėjimas, ir baigta (funkcija, vykdoma baigus animaciją):

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

Skirtingai nei CSS, kur galite perkelti kelias skaitines vertes į CSS ypatybę, pvz., Paraštę ( paraštė: „10px 5px 8px 12px“ ), naudodami greitį turite naudoti vieną CSS nuosavybės vertę. Todėl kiekvieną komponentą turite nustatyti atskirai: {marginRight: '10px', marginTop: '5px' ...} .

Tai gali atrodyti kaip kliūtis, bet iš tikrųjų tai yra nauda. Tai ne tik įskaitomesnė ir aiškesnė, bet ir leidžia jums nustatyti atskirus kiekvienos sub-nuosavybės palengvinimo tipus, o ne priversti turėti vieną visų tipų lengvinimo tipą. Tai leidžia tiesiogiai valdyti daugiau animacijos elementų!

Pastaba: CSS ypatybės, turinčios kelis žodžius ( paraštė kairė ir fono spalva ) negali būti brūkšnelis, bet jis turi būti parašytas naudojant kupranugarį ( paraštėKairė ir fono spalva ).

Nuosavybės vertės

Jei nepateiksite vieneto tipo, „Velocity“ jums prisiims tokį tipą (paprastai ms, px ir laipsniai). Nepaisant to, aš rekomenduočiau būti aiškus, kad galėtumėte iš pirmo žvilgsnio atskirti įrenginių tipus, kai tik jūs ar bendradarbis peržiūrėsite savo kodą. Jei vertėje yra kas kita nei skaitinė reikšmė (% arba raidės), turite naudoti kabutes.

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

Kas yra šis „palengvinantis“ verslas?

Aš iki šiol kelis kartus vartojau žodį „palengvinti“ ir galbūt jūs esate sutrikęs, ką tai reiškia. Molbertais nustatomas animacijos greitis įvairiais etapais per visą jos trukmę. Pavyzdžiui, „palengvėjimo“ palengvėjimas palaipsniui įsibėgėja animacijos pradžioje ir išlieka pastovus, kol baigiasi. „Lengvumo palengvinimas“ prasideda linijiniu greičiu ir palaipsniui lėtėja artėjant animacijos pabaigai. „Linijinis“ palengvinimas visą laiką yra pastovus ir atrodo labai drąsus ir robotas.

Patogiai nurodote palengvinimą naudodami parinktį „palengvinimas“:

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

Lengviai tampa daug sudėtingesni, bet dėl ​​trumpumo aš čia sustosiu. Perskaitykite greitį dokumentacija Daugiau informacijos.

Grandinės

Norint sukurti nuoseklių animacijų seriją CSS, reikia rankiniu būdu apskaičiuoti kiekvienos atskiros animacijos laiko vėlavimą ir trukmę. Ir jei reikia pakeisti kurį nors iš šių žingsnių, visos animacijos, atliekančios šį veiksmą, taip pat turi būti perskaičiuotos ir pakeistos.

„Greitis“ leidžia lengvai susieti animacijas vieną po kitos, tiesiog paskambinant greičio funkcijai viena po kitos:

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

Štai „Codepen“ grandinės pavyzdys.

Pastaba: pastebėsite, kad tik paskutiniame greičio kvietime yra „;“ eilutės pabaigoje. Tai nepaprastai svarbu. Norėdami susieti animacijas, visi „greičio“ iškvietimai turi būti atliekami kartu su tuo pačiu elementu, ir jūs negalite nutraukti komandinės eilutės naudodami kabliataškį. „JavaScript“ nepaiso tarpų, todėl šie skambučiai atrodys taip: $ element.velocity (...). greitis (...). greitis (...) .

nešiojamojo kompiuterio rankovė 15 colių „MacBook Pro“

Grįžti į funkcijas

Tai turėtų suteikti jums žvilgsnį į greitį ir kaip jį naudoti. Dabar, kai jūsų neapsunkins, grįžkime prie tų šaunių pranašumų, kuriuos teikia CSS ir „jQuery“, aprašymo.

Puslapio slinkimas

Vieno puslapio svetainės dabar kuriamos kuriant svetaines, kur svetainė yra suskirstyta į skyrius, o ne į atskirus puslapius. Todėl spustelėjus naršymo nuorodą puslapis paprasčiausiai slenka žemyn iki atitinkamos puslapio dalies. Be animacijos tai yra momentinis ir neramus šuolis, suteikiantis vartotojui jokio konteksto, kur šis turinys yra, palyginti su likusiu puslapiu.

CSS negali atlikti slinkimo, todėl tai yra vienas iš populiariausių JS animacijų panaudojimo būdų.

Norėdami atlikti slinkimą naudodami greitį, tiesiog paleiskite funkciją „greitis“ naudodami komandą „slinkti“ elemente, į kurį norite pereiti:

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

Dėl šių skambučių naršyklė slenka žemyn iki viršutinio pasirinkto elemento krašto per 1200 ms. Vien tik „jQuery“ tai būtų daug sudėtingesnė, kelių eilučių funkcija. Aš nepagailėsiu jums sumišimo sukelto galvos skausmo jo neįtraukdamas.

Štai „Codepen“ slinkimo pavyzdys.

Animacijos pakeitimas

„JQuery“, norėdami grįžti į pradinę elemento būseną prieš pradedant animaciją, turite rankiniu būdu animuoti jo savybes iki jų pradinių reikšmių. Pavyzdžiui:

Su „jQuery“:

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

Tačiau naudodami „Velocity“ turite tiesiog paleisti atvirkštinę komandą:

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

Šis ankstesnis iškvietimas pakeičia animaciją į pradinę pasirinkto elemento būseną prieš animaciją - nereikia vertybių nurodyti rankiniu būdu.

Štai „Codepen“ animacijos pakeitimo pavyzdys.

Fizika pagrįstas judesys

Realus pasaulis nėra tobulas ar sklandus - taip pat ir realaus pasaulio judesys. Jis turi greitas dalis, lėtas dalis, svorį, impulsą ir trintį. Skirtingai nei naudojant CSS, JS pagrįstose animacijose galite imituoti realaus pasaulio fiziką, kad viskas atrodytų natūraliau. Linijinis judesys atrodo robotas (negyvas) ir neramus.

Kad būtų galima realistiškai judėti, „Velocity“ sutinka su pavasario fizika pagrįstą palengvėjimą. Šis palengvinimo tipas kaip parametras naudoja įtempimo vertės (numatytasis: 500) ir trinties vertės (numatytasis: 20) masyvą (žr. Greičio dokumentacija Daugiau informacijos).

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

Didelė įtempimo vertė padidina bendrą animacijos greitį ir greitį. Dėl didelės trinties vertės animacija greičiau sulėtėja, sumažėja jos greitis artėjant prie animacijos pabaigos. Pakoregavus šias vertybes, kiekviena animacija bus unikali, reali ir įdomi.

Aukščiau pateiktas animacijos pavyzdys būtų lėtas ir standus (maža įtampa) ir tik lėtai lėtėtų per visą trukmę (maža trintis).

Štai „Codepen“ pavyzdys, naudojant pavasario fiziką.

Didelis finalas

Gerai, galbūt jums reikia kelių realių animacijų ir „Velocity“ komandų pavyzdžių. Pradėkime nuo langelio pločio ir aukščio animavimo, derindami tiek grandinę, tiek animacijos pakeitimą, ir naudokime šį langelio elementą:

Su tokiu CSS stiliumi:

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

Galite animuoti jo plotį, po jo aukštį, tada sugrąžinti atgal į pradinius matmenis šiais greičio skambučiais:

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

Dabar pridėkime vieną iš naudingiausių, tačiau lengvai pridėtinų funkcijų: sukurkite navigacijos nuorodas, kurios slenka žemyn į atitinkamą puslapio skiltį.

Tarkime, kad turite šias naršymo juostos ir puslapio skiltis:

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

Mes norime pridėti slinkties animaciją prie kiekvienos naršymo nuorodos („nav-link“ klasės) paspaudimo įvykio, dėl kurio puslapis slinks žemyn iki atitinkamos puslapio dalies, kurios ID yra nuorodos href.

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

Yra keli pavyzdžiai, kaip naudoti greitį realiuose puslapio elementuose, daugiau pavyzdžių rasite „Velocity“ dokumentai .

Dabar eikite ir padarykite internetą dinamišką

Animacijos pritraukia mūsų dėmesį ir įkvepia gyvybės šiaip statiškam puslapiui, o „JavaScript“ yra geriausias būdas jas pridėti prie savo projektų - o „Velocity“ yra geriausia „JavaScript“ animacijos biblioteka. Todėl ir parašiau šį straipsnį.

CSS animacijų tobulinimą ir išplėtimą riboja nedažni CSS standarto atnaujinimai. Naudodama „JavaScript“, atvirojo kodo bendruomenė kiekvieną dieną sukuria dešimtis naujų bibliotekų, papildinių ir atnaujinimų - praplečia jūsų animacijos akiratį išradus naujus įrankius.

Greitis turi daug daugiau funkcijų nei čia demonstruojamas, ir aš raginu jus tai patikrinti dokumentacija . Dabar eik eksperimentuoti!

Žodžiai : Neal O'Grady

Nealas O'Grady yra airių ir kanadiečių laisvai samdomas internetinių svetainių kūrėjas, dizaineris ir rašytojas. Jis yra parašytas dizaino temomis „Webflow“ tinklaraštis ir apie atsitiktines mintis apie jį asmeninis tinklaraštis .

Kaip šitas? Perskaitykite tai!