Share
Animasjon, når det gjennomtenkt brukes, kan forbedre nettsider grensesnitt og i siste instans brukeropplevelsen av et nettsted. I denne opplæringen skal vi se på VelocityJS, en JavaScript-animasjonsmotor for raske ytelses animasjoner. VelocityJS har blitt en av mine preferanser når jeg jobber med animasjon på nettet, årsakene er, etter min mening:
Accentsconagua
RunSequence er en metode i VelocityJS som vi kan bruke til å utføre staver av animasjon etter hvert. Det er en mer elegant tilnærming enn å knytte animasjonsfunksjoner, som i jQuery. Å gjøre dette utelukkende med CSS er upraktisk.I denne opplæringen vil vi gå gjennom det viktigste for å gjennomføre animasjoner med VelocityJS. Vi vil også markere noen få funksjoner som kan forbedre brukergrensesnittet. Så, la oss starte!
Med jQuery, forutsatt at vi ønsker å glide a div til høyre, ville vi skrive noe som:
$ ("div"). animate (left: "500px",, varighet: 3000, lettelse: "lineær"); På nesten nøyaktig samme måte, ville vi skrive det slik med VelocityJS:
$ ("div"). hastighet (venstre: "500px",, varighet: 3000, lettelse: "lineær"); Begge eksemplene vil flytte div av 500px til høyre i tre sekunder ved å observere elementet venstre eiendom. Den synlige forskjellen i syntaksen er metoden som brukes til å animere elementet, VelocityJS bruker .hastighet() i stedet for jQuery's .animere ().
Du kan også legge merke til ytelsesavviket. jQuery-animasjon føles noen ganger rar, mens VelocityJS løper som smør fra start til slutt. Gi det et forsøk:
VelocityJS aksepterer en rekke CSS egenskaper samt deres langvarige versjon for å manipulere elementet. Vi kan bruke disse egenskapene sammen i en enkelt VelocityJS-instans for å utføre sofistikert animasjon. For eksempel:
$ ("div"). hastighet (borderRadius: "25px", bredde: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", farge: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", varighet: 350, lettelse: "easeInQuad"); I dette andre eksempelet har vi behandlet div med flere CSS egenskaper, inkludert bredde for å gjøre det mindre, bakgrunnsfarge, padding, box-shadow, og border-radius å forvandle den til en sirkel.
Legg merke til at egenskapene som består av to eller flere ord er formatert i Camelcase format, etter JavaScript navnekonvensjon, dermed border-radius blir borderRadius og så videre. Vi øker også varigheten til bare 350 millisekunder, og denne gangen velger vi easeInQuad som VelocityJS har jQuery UIs lettelse innebygd.
jQuery gir noen metoder for å utføre vanlige animasjoner, for eksempel .skli opp() og .fadeout (), noe som gjør at elementene forsvinner gradvis. Så det kommer ikke som en overraskelse at VelocityJS også gjør. VelocityJS gir noen få snarveier til å passere inn i en .VelocityJS () forekomst.
Vi vil skrive følgende for å skyve opp et element for å skjule innholdet:
$ ("div"). hastighet ("slideUp", varighet: 350); Å fade det ut, ville vi skrive:
$ ("div"). hastighet ("fadeOut", varighet: 350); VelocityJS gir også en snarvei som heter bla som kan komme til nytte for å opprette koblinger som fører til en bestemt seksjon på siden. Følgende kode antar at vi vil ha linken, #gå opp, å bla tilbake til toppen av siden når den klikkes.
var $ up = $ ("# go-up"); $ up.on ("klikk", funksjon () $ ("kropp"). hastighet ("scroll", varighet: 2000, lettelse: "easeInBack");); Her er det som kan se ut:
En annen nyttig snarvei følger med i form av omvendt. Denne snarveien tillater oss å returnere elementet tilbake til sin opprinnelige tilstand når animasjonen er fullført. Ved å bruke det forrige rulleeksemplet kan vi søke omvendt for å forbedre pilikonene. For å gjøre det, kjedene vi en ny VelocityJS-forekomst med omvendt lagt til, sette inn sløyfe alternativ til ekte.
$ (".ikon"). hastighet (translateY: "10px", loop: true). hastighet ("revers"); Dette vil flytte ikonet ned av 10px så straks tilbake til sin opprinnelige posisjon. Som vi også har satt sløyfe alternativ til ekte animasjonen vil utføre ubestemt tid.
Flere animasjonseffekter er tilgjengelig i UI Pack. UI-pakken er tilgjengelig som et plugin, separat fra VelocityJS-kjernen. Når du har tatt med det, får du tilgang til en rekke effekter utover skli opp, fadeout, og bla åpner enda større potensial for å bygge livlige grensesnitt.
UI Pack bringer også to nye alternativer: vakle og dra. De vakle tillater oss å utføre en enkelt effekt, brukt på en rekke elementer sekvensielt i stedet for samtidig. De dra alternativet, når det er satt til ekte, gir en følelse av dra for det siste elementet i matrisen.
Som et eksempel har jeg opprettet en navigeringslinje med noen menyer, hvorav den ene har en undermeny. For å gjøre undermenyen mer engasjerende, har jeg brukt to effekter fra brukergrensesnittpakken med vakle alternativ sett.
På et tidspunkt må vi kanskje utføre animasjoner på forskjellige elementer i rekkefølge. For å gjøre det, må vi neste hver VelocityJS-forekomst i rekkefølge, for eksempel:
$ "offcanvas"). hastighet (translateX: 0, duration: 300,, funksjon () $ ("widgets"). VelocityJS (translateX: 0, opacity: 0, duration: 300,, funksjon () $ ("# lukk"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););; Ovennevnte funksjon vil først utføre animasjonen av $ kroppen, deretter $ nav når den er ferdig, og til slutt den $ menyen. Dessverre er dette ikke en elegant tilnærming, heller ikke ideell. Hvis du har dusin animasjoner, ville koden være upraktisk å administrere.
Men i tillegg til animasjonseffekter kommer brukergrensesnittpakken med en metode som kalles RunSequence. Dette er utformet nettopp for å løse våre sekvenseringsproblemer; å stable animasjoner pent og utføre dem i deres relevante rekkefølge. Med den ovennevnte koden kunne vi omskrive den som et JavaScript-objekt med det valgte elementet definert i en e eiendom, CSS-egenskapene som er oppført i a p eiendom, mens animasjonsalternativene er angitt i o eiendom.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: varighet: 300, e: $ ("widget"), p: translateX: 0, opacity: 0, o: varighet: 300, e: $ ("# lukk"), p: translateY: 0, rotateZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); Jeg har utvidet koden ovenfor til et fungerende off-canvas layout. Gi det siden, og sjekk ut JavaScript-fanen for å se full kildekode.fffffff
Jeg finner VelocityJS å være et foretrukket alternativ til jQuery og CSS animasjon, spesielt når det gjelder å bygge interaktive grensesnitt som involverer flere animasjoner. VelocityJS er lett å bruke, fullpakket med pre-built animasjoner, og fremfor alt er det rask. Bruk det ansvarlig. Som det ofte sies: med flotte funksjoner kommer stort ansvar.
