Share
I den första handledningen i Anime.js-serien lärde du dig om olika sätt att specificera de målelement som du vill animera och vilka typer av CSS-egenskaper och DOM-attribut som kan animeras. Animationerna i föregående handledning var mycket grundläggande. Alla målelementen flyttade bara ett visst avstånd eller ändrade gränsenradie med en fast hastighet.
Ibland kan du behöva animera målelementen på ett mer rytmiskt sätt. Till exempel kan du ha tio olika element som du vill flytta från vänster till höger med en fördröjning på 500ms mellan animationsstart för varje element. På samma sätt kan du öka eller minska animationsvaraktigheten för varje element baserat på dess position.
I den här handledningen lär du dig hur du använder Anime.js så att animering av olika element kan ske med hjälp av specifika parametrar. Det här låter dig styra den ordning i vilken en animationssekvens spelas för enskilda element eller alla element.
Med dessa parametrar kan du styra längden, fördröjningen och lättnaden av enskilda egenskaper eller en grupp av egenskaper samtidigt. De varaktighet och fördröjning parametrar anges i millisekunder. Standardvärdet för varaktighet är 1000ms eller 1s.
Detta betyder att om ingen annan anordning anges kommer animering som tillämpas på ett element att spelas i 1 sekund. De fördröjning parameter anger hur lång tid animationen tar för att börja när du redan har utlöst den. Standardvärdet för fördröjning är 0. Det betyder att animeringarna börjar så fort de utlöses.
Du kan använda easing parameter för att styra hastigheten vid vilken en animation spelas under den tid det är aktiv. Vissa animeringar börjar långsamt, plocka upp takt i mitten, och sedan sakta ner igen i slutet. Andra börjar i god takt och sedan sakta ner för resten av tiden.
Men i alla fall slutför animationen alltid inom den angivna tiden med hjälp av varaktighet parameter. Anime.js ger många lättnader som du kan ansöka om dina element direkt genom att bara använda deras namn. För vissa lättnadsfunktioner kan du också ange ett värde för elasticitet parameter för att styra hur mycket ett elements värde springer fram och tillbaka som en fjäder.
Du kommer lära dig mer om olika lättnadsfunktioner i serieens slutliga handledning. Följande kodsekvens visar hur alla parametrar tillämpas på olika animeringar.
var slowAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 4000); var delayAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 1200, easing: 'easeInOutCubic');
Som du kan se kan dessa parametrar användas oberoende av andra parametrar eller i kombination med dem. De cubicAnimation har båda varaktighet och easing parametern appliceras på den. Om varaktigheten inte hade angivits skulle animationen ha kört i 1 sekund. Nu kör den i 1200 millisekunder eller 1,2 sekunder.
En huvudbegränsning av egenskapsparametrar i ovanstående exempel var att alla animeringar av målelementet kommer att ha samma varaktighet, fördröjning och easing värden.
Detta kan eller inte vara det önskade beteendet. Till exempel, i stället för att översätta och ändra gränsenradie för målelementet samtidigt, kanske du först vill översätta målelementet och sedan animera dess gränsenradie. Anime.js kan du ange olika värden för varaktighet, fördröjning, easing och elasticitet parametrar för enskilda egenskaper. Följande kod och demo ska göra det tydligare.
var indiParam = anime (mål: '. square', translateY: värde: 250, rotera: värde: '2.125turn', backgroundColor: värde: 'rgb (255,0,0)', varaktighet: 400, fördröjning: 1500, lättnad: 'linjär', varaktighet: 1500);
I ovanstående kod har alla egenskaper som vi vill animera ha olika värden. Bakgrundsfärganimationen har en längd på 400ms, medan rotations- och översättningsanimationerna använder det globala varaktigheten av 1500ms.
Bakgrundsfärganimationen har också en fördröjning, så en ändring i färgen startar bara efter att 1500 ms har passerat. De rotera och translateY Egenskaper använder standardvärdet för fördröjning och easing parametrar eftersom vi inte har tillhandahållit ett lokalt eller ett globalt värde för dem.
Egenskapsbaserade parametrar är användbara när du vill ändra ordning och varaktighet för animering av enskilda egenskaper. Men detsamma varaktighet och fördröjning kommer fortfarande att tillämpas för enskilda egenskaper på alla målelement. Funktionsbaserade parametrar gör att du kan ange separat varaktighet, fördröjning, elasticitet och easing för olika målelement på ett kompakt sätt.
I det här fallet ställer du in värdena för olika parametrar genom att använda funktioner istället för siffror. Dessa funktioner accepterar tre parametrar: mål, index, och targetCount. De mål Parametern lagrar referensen till det aktuella målelementet. De index parameter lagrar index eller position för det aktuella målelementet. De targetCount parameter lagrar totalt antal målelement.
De mål parametern är användbar när animationsvärdena måste ställas in baserat på vissa attribut av målelementet. Till exempel kan du lagra fördröjning, varaktighet eller easing värden för ett målelement i dataattribut och sedan komma åt dem senare.
På samma sätt kan du komma åt bakgrundsfärgen för ett målelement och sedan manipulera det för att ange ett slutligt unikt färgvärde för enskilda element. På så sätt kan du animera alla element för att ha en bakgrundsfärg som är 20% mörkare än den nuvarande färgen.
De index parameteren ger dig positionen för det aktuella målet i vår lista över målelement. Du kan använda den för att gradvis ändra värdet för parametrar som varaktighet och fördröjning för olika element.
Det här är vanligtvis användbart när du vill ställa in värdena i stigande ordning. Du kan också subtrahera index från targetCount för att ställa in värdena i fallande ordning. Följande kodbit använder båda dessa parametrar för att ange värdena i stigande och nedåtgående ordning.
var delaySequence = anime (mål: '. square', translateY: 250, delay: funktion (mål, index) returindex * 200;); var delaySequenceR = anime (mål: '. square', translateY: 250, delay: funktion (mål, index, targetCount) return (targetCount - index) * 200;);
Följande kod anger en annan easing värde för varje målelement med hjälp av index parameter.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime (mål: '. square', translateY: 250, duration: 2000, easing: funktion (mål, index) return easyInValues [index];, autoplay: false);
Denna sista uppsättning parametrar låter dig ange hur många gånger en animation ska spelas och hur den ska spelas. Du kan ange hur många gånger en animering ska spelas med slinga parameter. Det finns också en autospela parameter som kan ställas in på Sann eller falsk. Standardvärdet är Sann, men du kan stoppa animationerna från att starta för sig själva genom att ställa in den falsk.
De riktning Parametern styr den riktning i vilken animationen spelas. Det kan ha tre värden: vanligt, omvänd, och alternativ. Standardvärdet är vanligt, som håller animationen spelande normalt från startvärden till slutvärdena. När målelementen når slutföringsvärdet, om slinga värdet är större än 1, hoppar målelementen plötsligt tillbaka till startvärdena och börjar sedan animeringen igen.
När riktning är satt till omvänd och den slinga värdet är större än 1, blir animationen omvänd. Med andra ord börjar målelementen animationen från deras slutliga tillstånd och gå bakåt för att nå det ursprungliga tillståndet. När de är i det ursprungliga tillståndet hoppar elementen tillbaka till det slutliga tillståndet och börjar sedan omvänd animering. De alternativ riktningsvärde ändrar animationsriktningen efter varje slinga.
var normalLoop = anime (mål: '. square', translateY: 250, fördröjning: funktion (mål, index) returindex * 200;, loop: 4, lättnad: 'easeInSine', autoplay: false);
I följande demo har jag satt antal slingor till fyra så att du enkelt kan märka skillnaden i animering av elementen i olika lägen.
I denna handledning lärde du dig om olika typer av parametrar som kan användas för att styra animeringen av målelement i Anime.js. Egenskapsparametrarna används för att styra animeringen av enskilda egenskaper.
Du kan använda dem för att styra sekvensen i vilken animationen spelas för enskilda element. Funktionsparametrarna gör att du kan styra timing och animationshastighet för enskilda element i förhållande till hela gruppen. Med animeringsparametrarna kan du styra hur animationen själv spelas för olika element.
Om du har några frågor relaterade till denna handledning, var god och låt mig veta i kommentarerna.
Accentsconagua