Share
Vi startet denne serien ved å lære å animere HTML-elementer ved hjelp av mojs. I den andre opplæringen flyttet vi videre til animasjon av innebygde SVG-former ved hjelp av Form modul. Den tredje opplæringen dekket flere måter å animere SVG-former ved hjelp av ShapeSwirl og vakle moduler.
Nå lærer vi å animere forskjellige SVG-former i en brastformasjon ved hjelp av Burst modul. Denne opplæringen vil avhenge av begreper vi dekket i de tre foregående øvelsene. Hvis du ikke allerede har lest dem, foreslår jeg at du først går gjennom dem.
Den første tingen vi må gjøre før vi kan lage noen brast-animasjoner, er instantier a Burst gjenstand. Deretter kan vi bare angi verdiene for forskjellige egenskaper for å kontrollere hvordan animasjonen spilles ut. Navnene på mange eiendommer i Burst Modulen er den samme som egenskapene i Form modul. Imidlertid utfører disse egenskapene svært forskjellige oppgaver i dette tilfellet.
De venstre og Ikke sant Egenskaper bestemmer begynnelsesposisjonen av bursten i stedet for partikler inne i den. På samme måte, x og y egenskaper bestemmer skiftet av hele sprengningen i stedet for individuelle partikler.
Radius av sirkelen dannet av alle de briste partiklene styres av radius eiendom. Dette er veldig forskjellig fra radius Egenskap av individuelle former, som bestemmer størrelsen på disse figurene. I tilfelle av en brast, bestemmer radiusen hvor mye lenger fra hverandre de enkelte former i det kommer til å være.
Antallet former eller partikler i en enkelt bris kan spesifiseres ved hjelp av telle eiendom. Som standard vil det være fem partikler i hver brast du lager. Alle disse partiklene er jevnt fordelt over bristens omkrets. For eksempel, hvis det er fire partikler, blir de plassert 90 grader til hverandre. Hvis det er tre partikler, blir de plassert på 120 grader.
Hvis du ikke vil at de briste partiklene skal dekke hele 360 grader, kan du spesifisere delen som skal dekkes ved hjelp av grad eiendom. Enhver verdi over 0 er gyldig for denne eiendommen. Det angitte antall grader vil bli jevnt fordelt mellom alle partiklene. Hvis graden er over 360, kan figurene overlappe.
Vinkelen spesifisert ved hjelp av vinkel Egenskapen bestemmer vinkelen på hele utbruddet. I dette tilfellet roteres ikke enkelte partikler rundt sitt eget senter, men rundt senterets midtpunkt. Dette ligner hvordan jorden dreier seg rundt solen, som er forskjellig fra jordens rotasjon på sin egen akse.
De skala Egenskapen skalerer verdien av alle fysiske egenskaper av brist og i sin tur individuelle former. På samme måte som andre burstegenskaper, vil alle former i den bli skalert samtidig. Innstilling av utbrudd skala til 3 vil øke radiusen til hele utbruddet samt størrelsen på individuelle former med 3.
I følgende kodestykke lager vi fem forskjellige utbrudd ved hjelp av egenskapene vi nettopp har diskutert.
var burstA = ny mojs.Burst (telle: 20); var burstB = ny mojs.Burst (vinkel: 0: 360, skala: 1: 2, radius: 10); var burstC = ny mojs.Burst (vinkel: 0: 360, skala: 1: 2, radius: 10: 100); var burstD = ny mojs.Burst (grad: 180, radiusX: 10, vinkel: -90, skala: 1: 2, radius: 10: 100); var burstE = ny mojs.Burst (telle: 20, grad: 3600);
Du kan se det burstA og Bürste bare forskjellig i antall grader som de må dekke. Siden partiklene i burstA må dekke 360 grader (standardverdien), de er plassert 360/20 = 18 grader fra hverandre. På den annen side, partiklene i Bürste er plassert 3600/20 = 180 grader fra hverandre. Fra 0 begynner den første partikkelen til 0 grader, og den neste er plassert ved 180 grader.
Den tredje partikkelen plasseres deretter 360 grader, som i utgangspunktet er lik 0 grader. Den fjerde partikkelen blir da plassert på 540 grader, men det er i utgangspunktet lik 180 grader. Med andre ord, er alle de ulige nummererte partiklene plassert i 0 grader, og alle jevne tallpartiklene plasseres ved 180 grader. Til slutt ser du bare to partikler fordi alle andre overlapper de to første.
Det er viktig å huske at du ikke direkte kan styre varighet, forsinkelse eller lettelse funksjonen av burst animasjoner. Modulen bestemmer alle disse verdiene automatisk basert på verdiene til ulike barn som blir animert.
Så langt i denne opplæringen hadde alle partiklene i en brast samme animasjon brukt på dem. Deres vinkel, skala, radius og posisjon er endret med samme verdi. Videre var vi ikke i stand til å kontrollere varigheten og forsinkelsen til de enkelte partiklene eller bristen som helhet. The mojs Burst Modulen har ikke et sett med egenskaper som direkte kan endre alle disse verdiene. Imidlertid kan vi angi animasjonsverdien for individuelle partikler, som igjen påvirker burstanimasjonen.
Alle partiklene i en burst-animasjon anses å være barn av originalen Burst gjenstand. Derfor tillater mojs oss å kontrollere animasjonen av individuelle bristpartikler ved hjelp av en barn eiendom, som aksepterer et objekt som dets verdi. Du kan bruke alle ShapeSwirl eiendommer bortsett fra x og y inne i barnobjektet. Dette er fornuftig fordi de enkelte partiklene i en burstanimasjon må vises i visse posisjoner, og slik at vi kan tilfeldigvis endre plasseringen av individuelle partikler, vil endre konfigurasjonen.
Eventuelle barnverdier som du ikke angir, vil bli satt til standard gitt av ShapeSwirl modul. I det følgende eksemplet animerer vi 20 forskjellige linjer av vår utbredt animasjon. Denne gangen, den vinkel Egenskapen er satt på individuelle partikler i stedet for Burst objekt slik at bare linjene roterer rundt senteret i stedet for hele objektet. Som vi lærte i den forrige opplæringen, ble alle ShapeSwirl objekter skal skille fra 1 til 0 som standard. Derfor endrer linjens lengder fra 40 til 0 i animasjonen.
var burstA = ny mojs.Burst (telle: 20, barn: form: 'linje', slag: 'svart', radius: 20, vinkel: 0: 180);
Som jeg nevnte tidligere, kan vi animere alle ShapeSwirl egenskaper inne i burst animasjoner. Hvert barn i animasjonen kan ha sitt eget sett med egenskaper. Hvis bare en verdi er gitt, blir den brukt på alle barnpartiklene. Hvis verdiene er gitt som en matrise, vil de bli anvendt i rekkefølge, en partikkel av gangen.
Her er JavaScript-koden for å lage fem forskjellige brast animasjoner ved hjelp av alle konseptene vi har lært så langt.
var burstA = ny mojs.Burst (telle: 20, vinkel: 0: 180, radius: 0: 100, barn: form: "polygon", slag: "svart", radius: 20, vinkel: 0: 360, varighet: 4000); var burstB = ny mojs.Burst (telle: 20, vinkel: 0: 180, radius: 0: 100, barn: form: "polygon", fyll: ["gul", "cyan" oransje "], slag:" svart ", radius: 20, skala: 1: 2, varighet: 2000, isShowEnd: false); var burstC = ny mojs.Burst (telle: 20, vinkel: 0: -180, radius: 0: 100, barn: form: "sirkel", fyll: ["rød", "svart" "blå"], radius: 10: "stagger (5, 1)"); var burstD = ny mojs.Burst (tall: 6, radius: 0: 100, barn: form: "sirkel", fyll: ["rødt", "gul", "blå"], skala: 1 : "rand (1, 10)", isShowEnd: false); var burstE = ny mojs.Burst (tall: 6, radius: 0: 100, barn: form: "sirkel", fyll: ["rødt", "gul", "blå"] ", skala: 1:" rand (1, 10) ") deretter (vinkel: 0: 360, radius: 100: 0, skala: 1: 0);
I den første burst animasjonen, den vinkel påføres direkte på Burst objekt roterer hele gruppen rundt sentrum av burst-objektet. Imidlertid vinkel Brukes inne i barnegenskapen roterer alle trekanter rundt sine egne sentre. Vi har også bremset brist animasjonen ved å endre animasjonsvarigheten for alle barna til 4000ms.
I den andre burstanimasjonen blir fargen på alle trekanter tatt fra gruppen som er sendt til fylle eiendom. Vi har kun angitt tre fyllfarger, men totalt antall trekanter er 20. I slike tilfeller fortsetter mojs å sykle gjennom arrayelementene og fyller trekantene med de samme tre farger igjen og igjen.
I den fjerde animasjonen bruker vi rand strenger, som vi lærte om i den forrige opplæringen, å tilfeldig velge en skaleringsverdi for alle barnpartiklene. Vi setter også verdien av isShowEnd eiendom til falsk for å skjule partiklene på slutten av animasjonen.
I den femte animasjonen bruker vi deretter() Metode fra veiledningsmodulen for å spille av en annen animasjonssekvens etter at den første er ferdig.
Målet med denne serien var å få deg kjent med grunnleggende om mojs animasjonsbiblioteket. Hver oppgave fokuserer på en enkeltmodul og hvordan du kan bruke egenskapene i den modulen til å lage grunnleggende animasjoner.
Denne siste opplæringen brukte konseptene fra de tidligere opplæringsprogrammene for å lage litt mer kompliserte animasjoner. Mojs er et veldig kraftig animasjonsbibliotek, og de endelige resultatene du får, er avhengige av hvor kreativ du kan få med alle egenskapene, så fortsett å eksperimentere.
Hvis det er noe du vil at jeg skal klargjøre i denne opplæringen, vennligst gi meg beskjed i kommentarene.
Accentsconagua