Share
Den første og andre opplæringen i denne serien dekket hvordan å animere forskjellige HTML-elementer og SVG-former ved hjelp av mojs. I denne opplæringen lærer vi om to moduler som kan gjøre våre animasjoner mer interessante. De ShapeSwirl modulen lar deg legge til en hvirvlende bevegelse til enhver form du oppretter. De vakle modulen, på den annen side, lar deg lage og animere flere former samtidig.
De ShapeSwirl Modulen i mojs har en konstruktør som aksepterer alle egenskapene til Form modul. Den aksepterer også noen ekstra egenskaper som tillater det å skape en virvlende bevegelse.
Du kan angi amplitude eller størrelse på virvelen ved hjelp av swirlSize eiendom. Oscillasjonsfrekvensen under svingningsbevegelsen bestemmes av verdien av swirlFrequency eiendom. Du kan også nedskalere den totale banen lengden på den hvirvlende formen ved hjelp av pathScale eiendom. Gyldige verdier for denne egenskapen varierer mellom 0 og 1. Bevegelsesretningen kan spesifiseres ved hjelp av retning eiendom. Husk at retning har bare to gyldige verdier: -1 og 1. Formen i svirlende bevegelse vil som standard følge en sinusformet bane. Du kan imidlertid animere dem langs rette linjer ved å sette verdien av isSwirl eiendom til falsk.
I tillegg til disse ekstra egenskapene, ShapeSwirl Modulen endrer også standardverdien til noen egenskaper fra Form modul. De radius av hvilken som helst hvirvlende form er satt til 5 som standard. På samme måte, skala Eiendommen er satt til å bli animert fra 1 til 0 i ShapeSwirl modul.
I følgende kodestykke har jeg brukt alle disse egenskapene til å animere to sirkler i en virvlende bevegelse.
var circleSwirlA = new mojs.ShapeSwirl (foreldre: ".container", form: "sirkel", fyll: "rød", slag: "svart", radius: 20, y: 0: 200, vinkel: 0 : 720, varighet: 2000, gjenta: 10); var sirkelSwirlB = ny mojs.ShapeSwirl (foreldre: ".container", form: "sirkel", fyll: "grønn", slag: "svart", radius: 20, y: 0: 200, vinkel: 0 : 720, varighet: 2000, swirlSize: 20, swirlFrequency: 10, isSwirl: true, pathScale: 0.5, repeat: 10);
I den følgende demoen kan du klikke på Spille knapp for å animere to sirkler, en trekant og et kryss i en virvlende bevegelse.
I motsetning til alle andre moduler som vi har diskutert hittil, vakle er ikke en konstruktør. Denne modulen er faktisk en funksjon som kan pakkes rundt en hvilken som helst annen modul for å animere flere former eller elementer samtidig. Dette kan være svært nyttig når du vil bruke den samme animasjonssekvensen på forskjellige former, men endrer selv sin størrelse uavhengig.
Når du har pakket inn Form modul inne i vakle() funksjon, vil du kunne spesifisere antall elementer som skal animeres ved hjelp av kvantifikator eiendom. Deretter kan du angi verdien av alle andre Form relaterte egenskaper. Nå vil det bli mulig for hver eiendom å akseptere en rekke verdier som skal brukes på enkelte former i rekkefølge. Hvis du vil at alle former skal ha samme verdi for en bestemt egenskap, kan du bare sette egenskapen til å være lik den aktuelle verdien i stedet for en rekke verdier.
Følgende eksempel skal forklare hvordan verdiene er tilordnet til forskjellige former:
var staggerShapes = mojs.stagger (mojs.Shape); var triangler = nye staggerShapes (kvantifier: 5, form: 'polygon', fyll: 'gul', strekk: 'svart', strekkbredde: 5, radius: [20, 30, 40, 50, 60], venstre: 100 , topp: 200, x: [0: 100, 0: 150, 0: 200, 0: 250, 0: 300], varighet: 2000, gjenta: 10, lettelse: quad.in ', isYoyo: true, isShowStart: true);
Vi begynner med å pakke inn Form modul inne i vakle() funksjon. Dette gjør at vi kan lage flere former samtidig. Vi har satt verdien av kvantifikator eiendom til 5. Dette skaper fem forskjellige former, som i vårt tilfelle er polygoner. Hvert polygon er en trekant fordi standardverdien til punkter Eiendommen er 3. Vi har allerede dekket alle disse egenskapene i den andre opplæringen av serien.
Det er bare en verdi på fylle, hjerneslag, og strokeWidth. Dette betyr at alle trianglene blir fylt med gul og vil ha et svart slag. Bredden på slag i hvert tilfelle ville være 5px. Verdien av radius eiendom, derimot, er en rekke med fem heltall. Hvert heltall bestemmer radiusen til en trekant i gruppen. Verdien 20 er tilordnet den første trekant, og verdien 60 er tilordnet den siste trekant.
Alle egenskapene har hittil hatt de samme innledende og endelige verdier for de enkelte trekanter. Dette betyr at ingen av egenskapene vil bli animert. Men verdien av x Egenskapen er en rekke objekter som inneholder den første og endelige verdien av den horisontale posisjonen til hver trekant. Den første triangelen vil oversette fra x: 0 til x: 100, og den siste triangelen vil oversette fra x: 0 til x: 300. Animasjonsvarigheten i hvert tilfelle vil være 2000 millisekunder.
Hvis det er et fast trinn mellom forskjellige verdier av en egenskap, kan du også bruke stagger-strenger for å angi startverdien og trinnene. Stagger strenger godtar to parametere. Den første er start verdi, som tilordnes det første elementet i gruppen. Den andre verdien er skritt, som bestemmer økningen eller reduksjonen i verdien for hver suksessiv form. Når bare en verdi overføres til staggerstrengen, anses den for å være skritt, og start verdien i dette tilfellet antas å være null.
Triangeleksempelet ovenfor kan omskrives som:
var staggerShapes = mojs.stagger (mojs.Shape); var triangles = nye staggerShapes (quantifier: 5, form: 'polygon', fyll: 'yellow', stroke: 'black', strokeWidth: 5, radius: 'stagger (20, 10)', venstre: 100, topp: 200, x: 0: 'stagger (100, 50)', varighet: 2000, gjenta: 10, lette: 'quad.in', isYoyo: true, isShowStart: true);
Du kan også tildele tilfeldige verdier til forskjellige former i en gruppe ved hjelp av randstrenger. Du må bare levere en minimums- og maksimumsverdi til en randstreng, og mojs vil automatisk tildele en verdi mellom disse grensene til individuelle former i gruppen.
I det følgende eksemplet bruker vi randstrengene til tilfeldig å sette antall poeng for hvert polygon. Du har kanskje lagt merke til at totalt antall polygoner vi gjør er 25, men fylle array har bare fire farger. Når array lengden er mindre enn verdien av kvantifikator, Verdiene for forskjellige former bestemmes ved kontinuerlig å sykle gjennom arrayet til alle figurene har blitt tildelt en verdi. For eksempel, etter å ha tildelt fargen til de fire første polygonene, ville fargen på det femte polygon være oransje, fargen på den sjette polygonen ville være gul og så videre.
Staggerstrengen setter radiusen til den første polygonen lik 10 og fortsetter deretter å øke radiusen for etterfølgende polygoner med 1. Den horisontale posisjonen til hvert polygon økes tilsvarende med 20, og den vertikale posisjonen bestemmes tilfeldig. Finalen vinkel Verdien for hvert polygon er tilfeldig satt mellom -120 og 120. På denne måten roterer noen polygoner i retning med urviseren mens andre roterer mot urviseren. Vinkel animasjonen er også gitt sin egen lettelse funksjon, som er forskjellig fra den vanlige animasjonen av andre egenskaper.
var staggerShapes = mojs.stagger (mojs.Shape); var polygoner = nye staggerShapes (quantifier: 25, shape: 'polygon', poeng: 'rand (3, 6)', fyll: ['orange', 'gul', 'cyan', 'lysegrønn'] 'svart', radius: 'stagger (10, 1)', venstre: 100, topp: 100, x: 'stagger (0, 20)', y: 'rand (40, 400)', skala: 1: 'rand (0,1, 3)', vinkel: 0: 'rand (-120, 120)', lette: 'elastisk.in', varighet: 1000, gjenta: 10, lette: 'cubic.in' isYoyo: true, isShowStart: true);
Vi dekket to flere mojs-moduler i denne opplæringen. De ShapeSwirl modulen lar oss animere forskjellige former i svirlende bevegelse. De vakle modulen lar oss animere flere formelementer samtidig.
Hver form i a vakle gruppen kan animeres uavhengig uten forstyrrelser fra andre former. Dette gjør vakle modulen er utrolig nyttig. Vi lærte også å bruke stagger strenger for å tildele verdier med faste trinn til egenskaper av forskjellige former.
Hvis du har noen spørsmål knyttet til denne opplæringen, vennligst gi beskjed i kommentarene. Vi vil lære om Burst modul i neste opplæring i denne serien.
For ytterligere ressurser å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Accentsconagua