Sådan bruges Velocity til nemt at tilføje animationer

Bevægelse tiltrækker vores opmærksomhed; det er en medfødt overlevelsesmekanisme, der tjente vores forfædre godt i tusinder af år. Det tillod dem at opdage rovdyr, der sneg sig ind på dem. I dag er det for det meste et restinstinkt, som os webdesignere bruger til at styre brugernes opmærksomhed og interesse på vores websteder.

Tilføjelse af animation og overgange som opacitet falmer, farveændringer, skalering og 3D-bevægelse forvandler en ellers flad, statisk collage af ord og billeder til et dynamisk og interessant sted. Du skal absolut tilføje animationer til dit webstedsdesign - når det anvendes sparsomt og med formål, gør det dem bedre.



Men hvordan kan du gøre dette nøjagtigt? Der er to måder at tilføje animation til et websted med CSS og med JavaScript.



CSS er perfekt til små websteder, der ikke kræver meget brugerdefineret kodning, og til enkle brugerinteraktioner, som små stilistiske ændringer for elementernes svævende tilstande. (Eller hvis du simpelthen ikke har noget ønske om at foretage nogen programmering!)

For alt andet end disse enkle interaktioner er den bedste måde at tilføje animation til et websted på med JavaScript, og det bedste moderne animationsbibliotek til at gøre dette er Velocity.js .



Denne artikel er unik, fordi den vil tage en grundlæggende tilgang til læring af webanimation. Hvis du er en webdesigner, der ikke har brugt meget på JavaScript, men altid har ønsket kraften i avanceret animation, skal du fortsætte med at læse.

Hvad er Velocity.js?

Klik på billedet for at se demo af Velocity.js

Klik på billedet for at se demo af Velocity.js

Velocity er et gratis letvægtsbibliotek, der giver dig mulighed for nemt at tilføje animationer til dine websteder, lige fra de enkleste animationer til de mest komplekse. Velocity overgår alle andre animationsbiblioteker, er enkel at bruge og efterligner syntaksen for det mest populære JavaScript-bibliotek, jQuery. Det understøttes også godt af alle browsere og enheder og er blevet vedtaget af store virksomheder som Uber og Whatsapp .



Velocity bruges bedst med jQuery, men det behøver ikke at være det. Hvad er jQuery? jQuery er et JavaScript-bibliotek designet til at forenkle valg og manipulation af HTML-elementer. Det er praktisk taget antaget, at jQuery bruges på de fleste webprojekter - det er så populært.

jQuery har sine egne animationsværktøjer eksponeret via sin 'animerede' funktion, men på grund af hvor monolitisk jQuery er, producerer den hakkete animationer. Det er heller ikke nær så funktionsrige som Velocity. Velocity giver dig mulighed for at udnytte elementets valg af styrke i jQuery og springe forbi jQuerys animationsmangler. Forskellen, især for at etablere en nem animationsworkflow, er nat og dag.

Velocity tilbyder nogle store fordele i forhold til både CSS- og jQuery-baserede animationer, som jeg vil dække, når vi har gennemgået det grundlæggende i at bruge det. For at give dig en forhåndsvisning af, hvad der kommer, inkluderer disse fordele rulleanimationer, tilbageførsler af animationer, fysikbaseret bevægelse og animationskædning. Nogle ret seje ting.

Lad os lige nu komme i gang med, hvordan du bruger det.

Hvordan bruger jeg Velocity?

Det første trin er at downloade koden fra Velocity-websted (kopi-indsæt koden i en teksteditor, og gem den som 'velocity.min.js'). Alternativt kan du trække det direkte ind i din HTML (som vist i kodeeksemplet nedenfor).

Uanset hvad skal du medtage Velocity-filen ved hjælp af en tag inden det afsluttende body tag i dit dokument, og før JavaScript-filen kodes du i ('script.js'):

… …

Bemærk : Hvis du bruger jQuery, skal du sørge for at medtage jQuery før Velocity. Velocity tilpasser sig i betragtning af tilstedeværelsen af ​​jQuery.

Når koden er inkluderet i et script-tag, kan du begynde at bruge hastighed () funktion i hele din 'script.js' fil.

Hvordan kører jeg denne funktion?

Du bruger Velocity-funktionen på et jQuery-element (forudsat at du bruger jQuery). Sig f.eks. At du har følgende afsnit, du vil animere:

This is an example element you can select and animate.

Vi kan vælge det med jQuery med afsnitets ID ('eksempel') og gemme det i en variabel:

hvordan man farve en traditionel tegning digitalt
var $element = $('#example');

Dette opretter et jQuery-elementobjekt med navnet $ element, der repræsenterer dette afsnit. Vi kan nu køre hastighedsfunktionskald på dette element ved hjælp af denne $ elementvariabel:

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

Okay, så hvad er de argumenter, den accepterer?

Argumenter

Velocity accepterer et eller flere argumenter. Det første argument er obligatorisk. Det kan enten være navnet på en af foruddefinerede kommandoer (eksempler, der skal følges) eller et objekt med forskellige CSS-egenskaber, der skal animeres.

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

Bemærk: Rækkefølgen af ​​egenskaber i et dataobjekt er irrelevant. Alt i animationen sker på nøjagtig samme tid.

Det andet argument, som er valgfrit, er også et objekt. Den indeholder animationsindstillinger som varighed, lempelse og forsinkelse og fuldført (en funktion, der udføres, når animationen er afsluttet):

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

I modsætning til i CSS, hvor du kan overføre flere numeriske værdier til en CSS-egenskab som margin ( margen: '10px 5px 8px 12px' ), med Velocity skal du bruge en enkelt værdi pr. CSS-ejendom. Derfor skal du indstille hver komponent separat: {marginRight: '10px', marginTop: '5px' ...} .

hvordan man laver din egen manga

Dette kan virke som et handicap, men det er faktisk en fordel. Dette er ikke kun mere læseligt og eksplicit, det giver dig også mulighed for at indstille individuelle lempelsestyper for hver underejendom i stedet for at blive tvunget til at have en lempetype for dem alle. Dette giver dig direkte kontrol over flere stykker af din animation!

Bemærk: CSS-egenskaber, der indeholder flere ord ( margen-venstre og baggrundsfarve ) kan ikke bindestreg, men skal skrives ved hjælp af camelcase ( margin Venstre og baggrundsfarve ).

Ejendomsværdier

Hvis du ikke angiver en enhedstype, antager Velocity en for dig (normalt ms, px og deg). Ikke desto mindre vil jeg anbefale at være eksplicit, så du hurtigt kan skelne enhedstyperne, når du eller en kollega ser tilbage gennem din kode. Hvis værdien indeholder andet end en numerisk værdi (% eller bogstaver), skal du bruge anførselstegn.

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

Hvad er denne 'lettende' forretning?

Jeg har brugt ordet lettelse et par gange indtil videre, og måske er du forvirret som det, hvad det betyder. Nedsættelser bestemmer hastigheden på en animation på forskellige stadier i hele dens varighed. For eksempel accelererer en lettelse i lempelse gradvist i begyndelsen af ​​animationen og forbliver derefter konstant, indtil den slutter. En 'lempelse' lempelse starter ved en lineær hastighed og aftager gradvist nær slutningen af ​​animationen. En 'lineær' lempelse har en konstant hastighed gennem hele varigheden og ser meget skurrende og robot ud.

Bekvemt angiver du lempelse med indstillingen 'lempelse':

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

Lettelser bliver meget mere komplicerede, men for kortfattethedens skyld vil jeg stoppe her. Læs Velocity's dokumentation for mere information.

Lænkning

Oprettelse af en række sekventielle animationer i CSS kræver manuel beregning af tidsforsinkelser og varigheder for hver enkelt animation. Og hvis et af disse trin skal ændres, skal alle animationer, der fortsætter dette trin, også genberegnes og ændres.

Hastighed giver mulighed for enkel kæde af animationer efter hinanden, bare ved at kalde hastighedsfunktionen den ene efter den anden:

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

Her er et Codepen-eksempel på kæde.

Bemærk: Du vil bemærke, at kun det sidste hastighedsopkald har et ';' i slutningen af ​​linjen. Dette er ekstremt vigtigt. For at sammenkæde animationer skal alle 'hastighed' -opkald udføres sammen på det samme element, og du kan ikke afslutte kommandolinjen ved hjælp af et semikolon. JavaScript ignorerer mellemrum, så disse opkald vil se sådan ud: $ element.velocity (...). velocity (...). velocity (...) .

Tilbage til funktionerne

Det skulle give dig et kig ind i Velocity, og hvordan du bruger det. Nu hvor du ikke bliver overvældet, lad os gå tilbage til at beskrive de seje fordele, det giver i forhold til CSS og jQuery.

Rulning af sider

Enkeltsides websteder udvikler sig nu inden for webdesign, hvor et websted er opdelt i sektioner snarere end i separate sider. Som et resultat får et klik på et navigationslink blot en side til at rulle ned til det relevante sidesektion. Uden en animation er det et øjeblikkeligt og skurrende spring, der giver brugeren ingen sammenhæng med, hvor dette indhold er placeret i forhold til resten af ​​siden.

CSS kan ikke udføre rulle, så dette er en af ​​de mest populære anvendelser til JS-animationer.

For at udføre rulle med hastighed skal du blot køre 'hastighed' -funktionen med kommandoen 'rulle' på det element, du vil rulle til:

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

Dette opkald får browseren til at rulle ned til den øverste kant af det valgte element over 1200 ms. Med jQuery alene ville dette være en meget mere kompliceret flerlinjefunktion. Jeg sparer dig forvirring induceret hovedpine ved ikke at medtage den her.

Her er et Codepen-eksempel på rulning.

Vending af animation

I jQuery skal du manuelt animere dets egenskaber tilbage til deres oprindelige værdier for at vende tilbage til elementets oprindelige tilstand, før animationen startede. For eksempel:

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

Med Velocity skal du dog bare køre den omvendte kommando:

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

Disse tidligere opkald vender animationen tilbage til det valgte elements oprindelige tilstand før animationen - der er ikke behov for at specificere værdierne manuelt.

Her er et Codepen-eksempel på vending af animation.

Fysikbaseret bevægelse

Den virkelige verden er ikke perfekt eller glat - heller ikke den virkelige bevægelse. Det har hurtige dele, langsomme dele, vægt, momentum og friktion. I modsætning til med CSS kan du efterligne den virkelige verdens fysik i dine JS-baserede animationer, hvilket får tingene til at se mere naturlige ud. Lineær bevægelse ser robot ud (livløs) og skurrende.

For at give mulighed for realistisk bevægelse accepterer Velocity en lempelse baseret på forårets fysik. Denne lettelsestype tager en matrix af en spændingsværdi (standard: 500) og en friktionsværdi (standard: 20) som parameter (se Hastighedsdokumentation for mere information).

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

En høj spændingsværdi øger animationens samlede hastighed og bounciness. En høj friktionsværdi får animationen til at aftage hurtigere, hvilket reducerer hastigheden nær slutningen af ​​animationen. Tilpasning af disse værdier gør hver animation unik, realistisk og interessant.

Eksemplet på animationen ovenfor ville være langsom og stiv (lav spænding) og kun langsomt aftage i løbet af varigheden (lav friktion).

Her er et Codepen-eksempel ved hjælp af forårets fysik.

Stor finale

Okay, måske har du brug for et par eksempler på ægte animationer og Velocity-kommandoer. Lad os starte med at animere en boks bredde og højde ved at kombinere både kæde og animation vending, og lad os bruge følgende feltelement:

Med følgende CSS-styling:

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

Du kan animere bredden efterfulgt af højden og derefter vende den tilbage til dens oprindelige dimensioner med følgende hastighedsopkald:

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

Og lad os nu tilføje en af ​​de mest nyttige, men alligevel lette at tilføje, funktioner: Oprettelse af navigationslinks, der ruller ned til det relevante sidesektion.

Sig, at du har følgende navigationslinje og sidesektioner:

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

Vi vil tilføje rulleanimationen til hvert navigationslink (klasse af 'nav-link') klikhændelse, hvilket får siden til at rulle ned til det relevante sidesektion, hvis id er indeholdt i linkets href.

hvordan man laver 3d tekst i Photoshop CC
// 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 }); });

Der er et par eksempler på, hvordan du bruger hastighed på faktiske sideelementer, for flere eksempler, tjek ud Velocity's dokumentation .

Gå nu ud og gør internettet dynamisk

Animationer tiltrækker vores opmærksomhed og puster liv på en ellers statisk side, og JavaScript er den bedste måde at føje dem til dine projekter - og Velocity er det bedste JavaScript-animationsbibliotek derude. Derfor skrev jeg denne artikel.

Forbedringen og udvidelsen af ​​CSS-animationer er begrænset af de sjældne opdateringer af CSS-standarden. Med JavaScript producerer open source-samfundet snesevis af nye biblioteker, plugins og opdateringer hver eneste dag - hvilket udvider horisonten for dine animationer gennem opfindelsen af ​​nye værktøjer.

Velocity har mange flere funktioner end dem, der er demonstreret her, og jeg opfordrer dig til at tjekke dens dokumentation . Gå nu eksperiment!

Ord : Neal O'Grady

Neal O'Grady er en irsk-canadisk freelance webudvikler, designer og forfatter. Han har skrevet om designemner til Webflow-blog og tilfældige tanker om hans personlig blog .

Sådan her? Læs disse!