Share
Vi startade den här serien genom att lära sig att animera HTML-element med mojs. I den andra handledningen gick vi vidare till animering av inbyggda SVG-former med hjälp av Form modul. Den tredje handledningen omfattade fler sätt att animera SVG-former med hjälp av ShapeSwirl och sprida moduler.
Nu lär vi oss att animera olika SVG-former i en sprängbildning med hjälp av Brista modul. Denna handledning kommer att bero på koncept som vi täckte i de föregående tre handledningarna. Om du inte redan har läst dem, föreslår jag att du går igenom dem först.
Det första som vi behöver göra innan vi kan skapa några bristande animeringar är att instansera a Brista objekt. Därefter kan vi bara ange värdena för olika egenskaper för att kontrollera hur animationen spelar ut. Namnen på många fastigheter i Brista modulen är densamma som egenskaperna i Form modul. Dessa egenskaper utför dock väldigt olika uppgifter i detta fall.
De vänster och höger egenskaper bestämmer bristens ursprungliga läge i stället för partiklar inuti den. På samma sätt, x och y egenskaper bestämmer skiftet av hela bursten i stället för enskilda partiklar.
Cirkelns radie som bildas av alla bristpartiklarna styrs av radie fast egendom. Detta skiljer sig mycket från radie egenskap av enskilda former, som bestämmer storleken på dessa former. I händelse av en brast bestämmer radie hur mycket längre än varandra de enskilda formerna i det kommer att vara.
Antalet former eller partiklar i en enda burst kan specificeras med hjälp av räkna fast egendom. Som standard kommer det att finnas fem partiklar i varje brist som du skapar. Alla dessa partiklar är jämnt fördelade över omkretsens omkrets. Till exempel, om det finns fyra partiklar, kommer de att placeras 90 grader mot varandra. Om det finns tre partiklar placeras de vid 120 grader.
Om du inte vill att de bursta partiklarna täcker hela 360 grader, kan du ange den del som ska täckas med grad fast egendom. Valfritt värde över 0 gäller för denna fastighet. Det angivna antalet grader fördelas jämnt mellan alla partiklar. Om graden är över 360 kan formerna överlappa varandra.
Den vinkel som anges med hjälp av vinkel egenskapen bestämmer vinkeln på hela bursten. I det här fallet roteras enskilda partiklar inte kring sin egen mittpunkt men kring mitten av brottet. Detta liknar hur jorden roterar runt solen, vilket skiljer sig från jordens rotation på sin egen axel.
De skala egenskapen skalar värdet av alla fysikaliska egenskaper hos bursten och i sin tur enskilda former. Precis som andra brastegenskaper, skulle alla former i den vara skalade på en gång. Ställer in bristningen skala till 3 kommer att öka radien för hela sprickan såväl som storleken på individuella former med 3.
I följande kodbunt skapar vi fem olika brister med de egenskaper vi just diskuterat.
var burstA = ny mojs.Burst (count: 20); var burstB = ny mojs.Burst (vinkel: 0: 360, skala: 1: 2, radie: 10); var burstC = ny mojs.Burst (vinkel: 0: 360, skala: 1: 2, radie: 10: 100); var burstD = ny mojs.Burst (grad: 180, radiusX: 10, vinkel: -90, skala: 1: 2, radie: 10: 100); var burstE = ny mojs.Burst (antal: 20, grad: 3600);
Du kan se det burstA och Bürste Skillnaden varierar endast i antal grader som de måste täcka. Eftersom partiklarna i burstA måste täcka 360 grader (standardvärdet), de är placerade 360/20 = 18 grader från varandra. Å andra sidan partiklarna i Bürste är placerad 3600/20 = 180 grader från varandra. Från noll placeras den första partikeln vid 0 grader, och nästa placeras vid 180 grader.
Den tredje partikeln placeras sedan vid 360 grader, vilket i grunden är lika med 0 grader. Den fjärde partikeln placeras sedan vid 540 grader, men det är i princip lika med 180 grader. Med andra ord placeras alla udda nummererade partiklar på 0 grader, och alla jämntalpartiklar placeras vid 180 grader. I slutet ser du bara två partiklar eftersom alla andra överlappar varandra med de två första.
Det är viktigt att komma ihåg att du inte direkt kan styra varaktigheten, fördröjningen eller lätta funktionen av spränganimationerna. Modulen bestämmer alla dessa värden automatiskt baserat på värdena för olika barn som animeras.
Hittills i denna handledning hade alla partiklar i en spräng samma animering tillämpad på dem. Deras vinkel, skala, radie och position alla ändras med samma värde. Dessutom kunde vi inte kontrollera varaktigheten och fördröjningen för de enskilda partiklarna eller bristen som helhet. Mojs Brista modulen har inte en uppsättning egenskaper som direkt kan ändra alla dessa värden. Vi kan emellertid ange animationsvärdet för enskilda partiklar, vilket i sin tur påverkar burstanimationen.
Alla partiklar i en spränganimation anses vara barn av originalet Brista objekt. Därför tillåter mojs oss att kontrollera animeringen av enskilda sprängpartiklar med hjälp av a barn egendom som accepterar ett objekt som sitt värde. Du kan använda alla ShapeSwirl fastigheter utom x och y inuti barnobjektet. Det här är vettigt eftersom de enskilda partiklarna i en spränganimation måste visas vid vissa positioner och tillåter oss att slumpmässigt ändra positionen för enskilda partiklar kommer att ändra konfigurationen.
Eventuella egenskapsvärden för barn som du inte anger kommer att ställas till standard som tillhandahålls av ShapeSwirl modul. I det följande exemplet animerar vi 20 olika rader av vår bristande animation. Den här gången, den vinkel egendom har ställts in på enskilda partiklar istället för Brista objekt så att endast linjerna roterar runt sitt centrum istället för hela objektet. Som vi lärde oss i föregående handledning, alla ShapeSwirl Objekten går som standard från 1 till 0. Därför ändras linjens längd från 40 till 0 i animationen.
var burstA = ny mojs.Burst (antal: 20, barn: form: 'linje', stroke: 'svart', radie: 20, vinkel: 0: 180);
Som jag nämnde tidigare kan vi animera alla ShapeSwirl egenskaper inne i burst animationer. Varje barn i animationen kan ha sin egen uppsättning egenskaper. Om endast ett värde anges kommer det att appliceras på alla barnpartiklar. Om värdena tillhandahålls som en matris, kommer de att appliceras sekventiellt, en partikel åt gången.
Här är JavaScript-koden för att skapa fem olika spränganimationer med alla de begrepp vi hittills har lärt oss.
var: burstA = ny mojs.Burst (antal: 20, vinkel: 0: 180, radie: 0: 100, barn: form: "polygon", stroke: "svart", radie: 20, vinkel: 0: 360, varaktighet: 4000); var burstB = ny mojs.Burst (antal: 20, vinkel: 0: 180, radie: 0: 100, barn: form: "polygon" orange "], stroke:" svart ", radie: 20, skala: 1: 2, duration: 2000, isShowEnd: false); var burstC = ny mojs.Burst (antal: 20, vinkel: 0: -180, radie: 0: 100, barn: form: "cirkel", fyll: ["röd", "svart" "blå"], radie: 10: "stagger (5, 1)"); var burstD = ny mojs.Burst (antal: 6, radie: 0: 100, barn: form: "cirkel", fyll: ["röd", "gul", "blå"], skala: 1 : "rand (1, 10)", isShowEnd: false); var burstE = ny mojs.Burst (antal: 6, radie: 0: 100, barn: form: "cirkel", fyll: ["röd", "gul", "blå"], stroke: "svart ", skala: 1:" rand (1, 10) ". Då (vinkel: 0: 360, radien: 100: 0, skalan: 1: 0);
I den första burstanimationen, den vinkel appliceras direkt på Brista objektet roterar hela gruppen runt mitten av burstobjektet. Men vinkel appliceras inuti barnegenskapen roterar alla trianglarna runt sina egna centra. Vi saktade också ner burstanimationen genom att ändra animationsvaraktigheten för alla barnen till 4000ms.
I den andra burstanimationen tas färgen på alla trianglarna från den matris som passerat till fylla fast egendom. Vi har bara specificerat tre fyllfärger, men det totala antalet trianglar är 20. I sådana fall fortsätter mojs att cykla genom matriselementen och fyller trianglarna med samma tre färger igen och igen.
I den fjärde animationen använder vi rand strängar, som vi lärde oss om i föregående handledning, att slumpmässigt välja ett skalvärde för alla barnpartiklar. Vi ställer också värdet på isShowEnd egendom till falsk för att dölja partiklarna i slutet av animationen.
I den femte animationen använder vi sedan() Metod från Form-modulens handledning för att spela en annan animationssekvens efter det att den första har slutförts.
Syftet med denna serie var att lära känna grunderna i mojs animationsbiblioteket. Varje handledning fokuserade på en enda modul och hur du kan använda egenskaperna i den modulen för att skapa grundläggande animeringar.
Den här sista handledningen använde koncepten från de tidigare handledningarna för att skapa lite mer komplicerade animeringar. Mojs är ett mycket kraftfullt animationsbibliotek, och de slutliga resultaten du får beror på hur kreativ du kan få med alla egenskaper, så fortsätt experimentera.
Om det finns något som du vill att jag ska klargöra i den här handledningen, var god och låt mig veta i kommentarerna.
Accentsconagua