Share
Den första och andra handledningen i den här serien omfattade hur man animerar olika HTML-element och SVG-former med mojs. I denna handledning lär vi oss om ytterligare två moduler som kan göra våra animationer mer intressanta. De ShapeSwirl modulen kan du lägga till en virvlande rörelse till vilken form du skapar. De sprida modulen, å andra sidan, kan du skapa och animera flera former på en gång.
De ShapeSwirl Modulen i mojs har en konstruktör som accepterar alla egenskaper hos Form modul. Det accepterar också några ytterligare egenskaper som gör det möjligt att skapa en virvlande rörelse.
Du kan ange amplituden eller storleken på virveln med hjälp av swirlSize fast egendom. Oscillationsfrekvensen under virvlande rörelse bestäms av värdet av swirlFrequency fast egendom. Du kan också skala ned den totala banlängden på den virvlande formen med hjälp av pathScale fast egendom. Giltiga värden för denna egenskap varierar mellan 0 och 1. Rörelsens riktning kan anges med hjälp av riktning fast egendom. Tänk på att riktning har bara två giltiga värden: -1 och 1. Formerna i en virvlande rörelse följer som standard en sinusformad bana. Du kan dock animera dem längs raka linjer genom att ställa in värdet på isSwirl egendom till falsk.
Förutom dessa ytterligare egenskaper, ShapeSwirl Modulen ändrar också standardvärdet för vissa egenskaper från Form modul. De radie av vilken som helst virvlande form är som standard inställd på 5. På samma sätt, skala egenskapen är inställd att animeras från 1 till 0 i ShapeSwirl modul.
I följande kodbit har jag använt alla dessa egenskaper för att animera två cirklar i en virvlande rörelse.
var circleSwirlA = ny mojs.ShapeSwirl (förälder: ".container", form: "cirkel", fyll: "röd", stroke: "svart", radie: 20, y: 0: 200, vinkel: 0 : 720, varaktighet: 2000, upprepa: 10); var circleSwirlB = new mojs.ShapeSwirl (förälder: ".container", form: "cirkel", fyll: "grön", stroke: "svart", radie: 20, y: 0: 200, vinkel: 0 : 720, varaktighet: 2000, swirlSize: 20, swirlFrequency: 10, isSwirl: true, pathScale: 0.5, repeat: 10);
I följande demo kan du klicka på Spela knapp för att animera två cirklar, en triangel och ett kors i en virvlande rörelse.
Till skillnad från alla andra moduler som vi hittills har diskuterat, sprida är inte en konstruktör. Denna modul är faktiskt en funktion som kan lindas runt någon annan modul för att animera flera former eller element samtidigt. Detta kan vara till stor hjälp när du vill tillämpa samma animationssekvens i olika former men ändå ändra sin storlek oberoende.
När du väl har packat in Form modulen inuti sprida() funktion, kommer du att kunna ange antalet element som ska animeras med kvantifierare fast egendom. Därefter kan du ange värdet för alla andra Form relaterade egenskaper. Det blir nu möjligt för varje egendom att acceptera en uppsättning värden som ska tillämpas på individuella former i följd. Om du vill att alla former ska ha samma värde för en viss egenskap, kan du bara ställa in egenskapen lika med det aktuella värdet istället för en mängd värden.
Följande exempel ska klargöra hur värdena tilldelas olika former:
var staggerShapes = mojs.stagger (mojs.Shape); var trianglar = nya staggerShapes (kvantifierare: 5, form: 'polygon', fyll: 'gul', stroke: 'svart', stroke Bredd: 5, radie: [20, 30, 40, 50, 60], vänster: 100 , topp: 200, x: [0: 100, 0: 150, 0: 200, 0: 250, 0: 300], varaktighet: 2000, upprepa: 10, lättnad: quad.in ', isYoyo: true, isShowStart: true);
Vi börjar med att paketera Form modulen inuti sprida() fungera. Detta gör att vi kan skapa flera former samtidigt. Vi har satt värdet av kvantifierare egenskap till 5. Detta skapar fem olika former, vilket i vårt fall är polygoner. Varje polygon är en triangel eftersom standardvärdet för poäng egendom är 3. Vi har redan täckt alla dessa egenskaper i serieens andra handledning.
Det finns bara ett värde av fylla, stroke, och strokeWidth. Det betyder att alla trianglarna kommer att fyllas med gult och kommer att ha en svart slag. Bredden på stroke i varje fall skulle vara 5px. Värdet av radie egendom, å andra sidan, är en uppsättning av fem heltal. Varje heltal bestämmer radien för en triangel i gruppen. Värdet 20 tilldelas den första triangeln och värdet 60 tilldelas den sista triangeln.
Alla egenskaper har hittills haft samma initiala och slutliga värden för de enskilda trianglarna. Det betyder att ingen av egenskaperna skulle animeras. Men värdet av x egenskapen är en rad objekt som innehåller det första och sista värdet av horisontalpositionen för varje triangel. Den första triangeln kommer att översättas från x: 0 till x: 100, och den sista triangeln kommer att översättas från x: 0 till x: 300. Animationstiden i varje fall skulle vara 2000 millisekunder.
Om det finns ett fast steg mellan olika värden för en egenskap kan du också använda stagger-strängar för att ange initialvärdet och inkrementen. Stagger strängar accepterar två parametrar. Den första är Start värde som tilldelas det första elementet i gruppen. Det andra värdet är steg, som bestämmer ökning eller minskning av värdet för varje successiv form. När endast ett värde skickas till staggersträngen anses det vara det steg, och den Start värdet i detta fall antas vara noll.
Triangeln exemplet ovan kan skrivas om som:
var staggerShapes = mojs.stagger (mojs.Shape); var trianglar = nya staggerShapes (kvantifierare: 5, form: 'polygon', fyll: 'gul', stroke: 'svart', stroke Bredd: 5, radie: 'stagger (20, 10)', vänster: 100, topp: 200, x: 0: 'stagger (100, 50)', varaktighet: 2000, upprepa: 10, lättnad: 'quad.in', isYoyo: true, isShowStart: true);
Du kan också tilldela slumpmässiga värden till olika former i en grupp med randsträngar. Du måste bara ge ett minimum och maximalt värde till en randsträng, och mojs kommer automatiskt att tilldela ett värde mellan dessa gränser till enskilda former i gruppen.
I följande exempel använder vi randsträngarna för att slumpmässigt ställa in antal punkter för varje polygon. Du kanske har märkt att det totala antalet polygoner vi gör är 25, men fylla array har bara fyra färger. När arraylängden är mindre än värdet av kvantifierare, Värdena för olika former bestäms genom att kontinuerligt cykla genom matrisen tills alla former har tilldelats ett värde. Efter tilldelningen av färgen på de första fyra polygonerna skulle färgen på den femte polygonen vara orange, färgen på den sjätte polygonen skulle vara gul och så vidare.
Staggersträngen ställer radiusen för den första polygonen lika med 10 och fortsätter sedan att öka radien för efterföljande polygoner med 1. Den horisontella positionen för varje polygon ökar på samma sätt med 20 och det vertikala läget bestäms slumpmässigt. Den slutliga vinkel värdet för varje polygon är slumpmässigt inställt mellan -120 och 120. På så sätt roterar några polygoner iurs medurs medan andra roterar moturs. Vinkelanimationen ges också sin egen lättnadsfunktion, som skiljer sig från den gemensamma animationen av andra egenskaper.
var staggerShapes = mojs.stagger (mojs.Shape); var polygoner = nya staggerShapes (kvantifierare: 25, form: 'polygon', poäng: 'rand (3, 6)', fyll: ['orange', 'gul', 'cyan', 'ljusgrön'] 'svart', radie: 'stagger (10, 1)', vänster: 100, topp: 100, x: 'stagger (0, 20)', y: 'rand (40, 400)', skala: 1: 'rand (0,1, 3)', vinkel: 0: 'rand (-120, 120)', lättnad: 'elastic.in', varaktighet: 1000, upprepa: 10, lättnad: 'cubic.in' isYoyo: true, isShowStart: true);
Vi täckte ytterligare två mojs-moduler i denna handledning. De ShapeSwirl modulen tillåter oss att animera olika former i en virvlande rörelse. De sprida modulen tillåter oss att animera flera formelement samtidigt.
Varje form i a sprida gruppen kan animeras oberoende utan störningar från andra former. Detta gör sprida modulen är otroligt användbar. Vi lärde oss också att använda stagger-strängar för att tilldela värden med fasta steg till egenskaper av olika former.
Om du har några frågor relaterade till denna handledning, var god och låt mig veta i kommentarerna. Vi kommer att lära oss om Brista modul i nästa handledning av denna serie.
För ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.
Accentsconagua