Share
Animation kan, när det tillämpas eftertänksamt, förbättra webbplatsens gränssnitt och i slutändan användarupplevelsen av en webbplats. I denna handledning kommer vi att undersöka VelocityJS, en JavaScript-animeringsmotor för snabba prestandaanimationer. VelocityJS har blivit en av mina preferenser när det handlar om animering på webben, orsakerna är enligt min mening:
Accentsconagua
RunSequence är en metod i VelocityJS som vi kan använda för att utföra staplar av animation i följd. Det är en mer elegant inställning än kedjande animationsfunktioner, som i jQuery. Att göra detta enbart med CSS är opraktiskt.I denna handledning går vi igenom nödvändigheten för att genomföra animationer med VelocityJS. Vi kommer också att markera några funktioner som kan förbättra vår UI-design. Så, låt oss börja!
Med jQuery, förutsatt att vi skulle vilja glida a div till höger skulle vi skriva något som:
$ ("div"). animera (vänster: "500px",, varaktighet: 3000, lättnad: "linjär"); På nästan exakt samma sätt skulle vi skriva det så här med VelocityJS:
$ ("div"). hastighet (vänster: "500px",, varaktighet: 3000, lättnad: "linjär"); Båda exemplen kommer att flytta div av 500px till höger i tre sekunder genom att observera elementet vänster fast egendom. Den synliga skillnaden i syntaxen är metoden för att animera elementet, som VelocityJS använder .hastighet() istället för jQuery's .animera().
Du kan också märka prestandaskillnaden. jQuery-animering känns ibland skakig, medan VelocityJS körs som smör från början till slut. Ge det ett försök:
VelocityJS accepterar ett antal CSS-egenskaper samt deras långa version för att manipulera elementet. Vi kan använda dessa egenskaper tillsammans i en enda VelocityJS-instans för att utföra sofistikerad animering. Till exempel:
$ ("div"). hastighet (borderRadius: "25px", bredd: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", färg: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, easing: "easeInQuad"); I det andra exemplet har vi behandlat div med flera CSS egenskaper, inklusive bredd för att göra det mindre, bakgrundsfärg, stoppning, box-shadow, och border-radius att förvandla den till en cirkel.
Observera att egenskaperna som innehåller två eller flera ord är formaterade i Camelcase format, följt av JavaScript namngivning konventionen, följaktligen border-radius blir borderRadius och så vidare. Vi påskyndar också varaktigheten till bara 350 millisekunder och den här gången väljer vi easeInQuad som VelocityJS har jQuery UI: s lättnad inbyggda.
jQuery tillhandahåller några metoder för att utföra vanliga animationer, t.ex. .glid upp() och .tona ut(), vilket gör att element försvinna gradvis. Så det kommer inte som någon överraskning att VelocityJS gör också. VelocityJS ger några genvägar för att passera in i a .VelocityJS () exempel.
Vi skulle skriva följande för att glida upp ett element för att dölja innehållet:
$ ("div"). hastighet ("slideUp", duration: 350); För att blekna det, skulle vi skriva:
$ ("div"). hastighet ("fadeOut", duration: 350); VelocityJS ger också en genväg som heter skrolla vilket kan vara till nytta för att skapa länkar som leder till en viss sektion på sidan. Följande kod förutsätter att vi vill ha länken, #gå upp, att rulla tillbaka till toppen av sidan när den klickas.
var $ up = $ ("# go-up"); $ up.on ("click", function () $ ("body"). hastighet ("scroll", duration: 2000, easing: "easeInBack");); Här är det som kan se ut:
En annan praktisk genväg ingår i form av omvänd. Med denna genväg kan vi återställa elementet till dess ursprungliga tillstånd när animationen är klar. Med det föregående rullningsexemplet kan vi ansöka omvänd för att förbättra pilikonen. För att göra det kedjar vi en ny VelocityJS-instans med omvänd läggs till och ställer in slinga alternativ till Sann.
$ (".ikon"). hastighet (translateY: "10px", loop: true). hastighet ("omvänd"); Detta flyttar ikonen ner av 10px sedan omedelbart tillbaka till sin ursprungliga position. Som vi också har ställt in slinga alternativ till Sann animationen kommer att utföra obestämd tid.
Fler animationseffekter finns tillgängliga i UI Pack. UI-paketet är tillgängligt som ett plugin, separat från VelocityJS-kärnan. När du har tagit med det, får du tillgång till en rad effekter utöver glid upp, tona ut, och skrolla öppnar ännu större potential för att bygga livliga gränssnitt.
UI Pack ger också två nya alternativ: sprida och drag. De sprida tillåter oss att utföra en enda effekt, applicerad på en rad element sekventiellt istället för samtidigt. De drag alternativet, när det är satt till sant, ger en känsla av dra för det sista elementet i matrisen.
Som exempel har jag skapat en navigeringsfält med några menyer, varav en har en undermeny. För att göra undermenyn mer engagerande har jag tillämpat två effekter från UI Pack med sprida alternativ uppsättning.
Vid något tillfälle kan vi behöva göra animeringar på olika element i följd. För att göra det måste vi nesta varje VelocityJS-instans i ordning, till exempel:
hastighet (translateX: 0, duration: 300,, function () $ ("widgets"). VelocityJS (translateX: 0, opacity: 0, duration: 300,, funktion () $ ("# nära"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););); Ovanstående funktion kommer först att utföra animationen av $ kropp, sedan $ nav när den är färdig och slutligen $ meny. Tyvärr är detta inte ett elegant tillvägagångssätt, eller idealiskt. Om du har ett dussin animeringar, skulle koden vara opraktisk att hantera.
Men förutom animeringseffekter kommer UI-paketet med en metod som heter RunSequence. Detta är utformat exakt för att lösa våra sekvenseringsproblem. att stacka animeringar snyggt och utföra dem i sin relevanta ordning. Med ovanstående kod kan vi skriva om det som ett JavaScript-objekt med det valda elementet definierat inom en e egenskap, CSS egenskaper som anges i a p egenskap, medan animeringsalternativen är inställda i o fast egendom.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: duration: 300, e: $ ("widget"), p: translateX: 0, opacity: 0, o: varaktighet: 300, e: $ ("# nära"), p: translateY: 0, rotateZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); Jag har utökat ovanstående kod till en fungerande off-canvas layout. Ge det sedan och kolla på JavaScript-fliken för att se hela källkoden .fffffff
Jag tycker att VelocityJS är ett föredraget alternativ till jQuery och CSS-animering, särskilt när det gäller att bygga interaktiva gränssnitt som involverar flera animeringar. VelocityJS är lätt att använda, förpackad med förbyggda animationer, och framför allt är det snabb. Använd det på ett ansvarsfullt sätt. Som det ofta sägs: med stora funktioner kommer ett stort ansvar.
