Share
I den tidigare handledningen av Anime.js-serien lärde du dig om olika typer av parametrar som styr hur olika objektelement ska animeras. Du lärde dig också att använda funktionsparametrar för att gradvis ändra fördröjningen eller varaktigheten av elementen.
I denna handledning kommer vi att gå ett steg längre och lära oss hur du anger egenskapsvärdena själva med hjälp av vanliga nummer, funktionsbaserade värden och nyckelbilder. Du lär dig också att spela animeringar i följd med hjälp av tidslinjer.
Anime.js låter dig ange slutliga eller slutliga värden för animerbara egenskaper för målelement. Det ursprungliga eller startvärdet för animeringen är standardvärdet för den här egenskapen. Valfritt värde som anges i CSS kan också fungera som startvärde. Det finns flera sätt att ange ett slutvärde.
Det kan också vara ett enhälligt nummer. I det här fallet används de ursprungliga eller standardenheterna för egenskapen när man beräknar några egenskapsvärden. Du kan även ange värdet som en sträng, men strängen måste innehålla minst ett numeriskt värde. Exempel på strängvärden skulle vara 10vh, 80%, och 9.125turn.
Istället för att ange ett absolut värde kan du också ange egenskapsvärden i förhållande till deras nuvärde. Till exempel kan du ställa in finalen translateY värde att vara 150px större än det nuvarande värdet med += 150px som ett värde. Tänk på att du bara kan använda addition, multiplicering och subtraktion när du anger relativa värden.
Medan animerande färger kan du inte använda färgnamn som röd, svart och blå för att ange ett slutligt färgvärde för animeringen. I sådana fall kommer inte färganimering att hända alls, och ändringen kommer att vara omedelbar. Det enda sättet att animera färger är att ange värdena antingen som hex-siffror eller i form av RGB- och HSL-värden.
Som du kanske har märkt har vi inte angett ett initialvärde för våra målelement för att animera dem. Anime.js bestämmer automatiskt det ursprungliga värdet baserat på vår CSS och standardvärdena för dessa egenskaper. Du kan dock ange ett annat startvärde än standardvärdet för en egenskap som använder arrays. Det första objektet i matrisen anger initialvärdet, och det andra objektet anger slutvärdet.
I stället för att använda samma slutvärde för alla dina målelement kan du använda funktioner för att ställa in olika värden för olika parametrar. Processen liknar att specificera funktionsbaserade egenskapsparametrar.
var uniqueTranslation = anime (mål: '. square', translateY: funktion (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (mål: '. square', skala: funktion (el, i) return Math.random () * 1,5 + i / 10;, autoplay: false); var randomRotation = anime (mål: '. square', rotera: funktion () returnera anime.random (-180, 180);, autoplay: false); var randomRadius = anime (mål: '. square', borderRadius: funktion (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (mål: '. square', translateY: funktion (el, i) return 50 + 50 * i;, skala: funktion (el, i) return Math.random () * 1.5 + i / 10;, rotera: funktion () return anime.random (-180, 180);, borderRadius: function (el) returnera Math.random () * el.offsetWidth / 2;, varaktighet: funktion ) return anime.random (1500, 2400);, delay: function () returnera anime.random (0, 1000);, autoplay: false);
För translateY egenskap, använder vi elementets index för att ange ett översättningsvärde. Använder sig av 50 * (i + 1) ökar translateY värdet för varje element med 50 pixlar.
Skalningsanimationen använder också elementets index tillsammans med det inbyggda Math.random () funktionen för att returnera ett flytande punkt, pseudo-slumpmässigt tal mindre än 1. På så sätt skiljer elementen in slumpmässigt, men i / 10 En del av fastigheten ökar risken för att element som uppstår i slutändan har en större storlek.
Inom koden för rotationsanimering använder vi anime.random (a, b) hjälparfunktionen för att få slumpmässiga heltal mellan -180 och 180. Denna funktion är till hjälp för att tilldela slumpmässiga integralvärden till egenskaper som translateY och rotera. Genom att använda denna funktion för att tilldela slumpmässiga skalvärden skapas extrema resultat.
Gränsvärdet för olika element bestäms genom att beräkna bredden på målelementen med hjälp av el funktionsparameter. Slutligen tilldelar den sista delen av kod slumpmässiga värden till varaktighet och fördröjning parametrar också.
Du kan se att animationen som uppnåtts av den sista delen är väldigt slumpmässig. Det finns ingen relation mellan värdena för olika egenskaper hos element eller deras fördröjnings- och varaktighetsvärden. I det verkliga livet är det mer förnuftigt att använda värden som kan ge en viss känsla av riktning mot animationen.
Det är också möjligt att animera olika egenskaper hos dina målelement med hjälp av nyckelbilder. Varje keyframe består av en grupp av egenskapsobjektet. Du kan använda objektet för att ange egenskapsvärdet, varaktighet, fördröjning och easing för den delen av animationen. Följande kod skapar en keyframe-baserad översättningsanimation.
var keyframeTranslation = anime (mål: '. square', translateY: [värde: 100, duration: 500, värde: 300, varaktighet: 1000, fördröjning: 1000, värde: 40, varaktighet: 500, fördröjning : 1000], autoplay: false); var keyframeAll = anime (mål: '. square', translateY: [värde: 100, duration: 500, värde: 300, varaktighet: 1000, fördröjning: 1000, värde: 40, varaktighet: 500, fördröjning : 1000, skala: [värde: 1,1, varaktighet: 500, värde: 0,5, varaktighet: 1000, fördröjning: 1000, värde: 1, varaktighet: 500, fördröjning: 1000], rotera: värde: 60, varaktighet: 500, värde: -60, varaktighet: 1000, fördröjning: 1000, värde: 75, varaktighet: 500, fördröjning: 1000], borderRadius: [värde: 10, varaktighet: 500, värde: 50, varaktighet: 1000, fördröjning: 1000, värde: 25, varaktighet: 500, fördröjning: 1000], fördröjning: funktion (el, i) retur 100 * (i + 1) , autoplay: false);
Du kan också animera flera egenskaper samtidigt genom att ange olika eller samma värden för alla parametrar. I det andra fallet är det globala fördröjning parametern tillämpar en initial fördröjning för alla element baserat på deras index. Denna fördröjning är oberoende av förseningen som tillämpas på varje egendom i nyckelramarna.
Hittills i serien har vi använt fördröjning parameter för att spela olika animeringar i en viss sekvens. För att använda fördröjning för detta ändamål måste vi också veta varaktigheten för den tidigare animationen.
Med den ökande komplexiteten i animationssekvensen blir upprätthållandet av rätt fördröjningsvärde väldigt tråkigt. Varje ändring i varaktigheten för en av animationerna tvingar oss att omberäkna alla fördröjningsvärden för att hålla animationerna i den ursprungliga sekvensen.
En bättre lösning på detta problem är att använda tidslinjer för att styra animationssekvensen. Du måste använda anime.timeline () funktion för att skapa en tidslinje i Anime.js. Du kan också skicka olika parametrar till den här funktionen som ett objekt. Dessa parametrar kan ange vilken riktning tidslinjen spelas i, antalet loopar och en autospela parameter för att bestämma om animationen ska spelas automatiskt. Alla dessa parametrar har diskuterats i detalj i parameterns handledning i denna serie.
Du kan lägga till olika animeringar till en tidslinje med hjälp av Lägg till() metod. Alla animeringar som läggs till i tidslinjen spelas i den ordning i vilken de lagts till. Det är möjligt att ange absoluta eller relativa förskjutningsvärden för att styra den ordning i vilken animationerna spelas.
När relativa offsetvärden används, bestäms starttiden för den aktuella animationen i förhållande till tidpunkten för föregående animering. Relativa förskjutningar kan vara av tre typer:
Följande kod visar hur man skapar en grundläggande tidslinje och en tidslinje med relativa förskjutningsvärden.
var basicTimeline = anime.timeline (riktning: "alternativ", loop: 2, autoplay: false); basicTimeline.add (mål: '. square', translateY: 200) lägg till (mål: '.red', translateY: 100). Lägg till (mål: '.blå', translateY: 0); var offsetTimeline = anime.timeline (riktning: "alternerande", loop: 2, autoplay: false); offsetTimeline.add (mål: '. square', translateY: 200) lägg till (mål: 'red', offset: '+ = 1000', translateY: 100). ', offset:' * = 2 ', translateY: 0);
Försök klicka på Offset Tidslinje knappen i ovanstående demo. Du kommer att se att det finns en fördröjning på 2 sekunder mellan slutet av animeringen av röda rutor och början på animeringen av blåa rutor.
Vi har inte specificerat a varaktighet för den röda kvadratanimationen. Därför används ett standardvärde på 1000ms eller 1s som varaktighet. Multiplikatorns förskjutning av den blåa kvadratiska animationen fördubblar det värdet, vilket resulterar i en fördröjning på två sekunder i animeringen.
När absoluta offsetvärden används, används tidslinjens starttid som referenspunkt. Det är möjligt att vända sekvensen i vilken animationerna spelas genom att använda stora offsetvärden för animeringar som inträffar i början av tidslinjen.
Anime.js har en mängd olika alternativ att spela, pausa, starta om eller söka animeringar eller tidslinjer vid en viss punkt.
De spela() funktionen tillåter oss att starta animationen från dess nuvarande framsteg. De paus() funktionen fryser animationen när funktionen heter. De omstart() funktionen startar animationen från början, oberoende av dess nuvarande framsteg. De seek (värde) funktionen kan användas för att avancera animationen med värde antal millisekunder.
Du bör komma ihåg att spela() funktionen återupptar bara animeringen från det att den var pausad. Om animationen redan har avslutat kan du inte spela upp animeringen med spela(). För att spela upp animationen måste du använda omstart() fungera.
Accentsconagua
var slowAnimation = anime (mål: '. square', translateY: 250, borderRadius: 50, duration: 4000, easing: 'linear', autoplay: false); document.querySelector ('play'). onclick = slowAnimation.play; document.querySelector ('pause'). onclick = slowAnimation.pause; document.querySelector ('. starta om'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. sök'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Observera att vi inte använder seekInput.value för att ställa in ett värde för sökfunktionen. Detta beror på att maxvärdet för intervallinmatningen har ställts till 100 i markeringen. Direkt användning av värdet för ingångsintervallet tillåter oss att bara söka upp till 100ms. Att multiplicera intervallinmatningsvärdet med animeringstidens varaktighet gör att vi kan söka animeringen från början till slutet på vårt intervallreglage.
I denna handledning lärde du dig att animera olika egenskapsvärden som nummer, funktioner eller nyckelramar. Du lärde dig också att styra och manipulera tidslinjer i Anime.js för att styra den ordning i vilken en animationssekvens spelas.
Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.
Om du har några frågor relaterade till denna handledning, var god och låt mig veta i kommentarerna.
