Share
I den tidligere opplæringen brukte vi mojs til å animere forskjellige HTML-elementer på en nettside. Vi brukte biblioteket til å hovedsakelig animere div elementer som så ut som firkanter eller sirkler. Du kan imidlertid bruke html modul for å animere alle slags elementer som bilder eller overskrifter. Hvis du faktisk har til hensikt å animere grunnleggende former ved hjelp av mojs, bør du sannsynligvis bruke Form-modulen fra biblioteket.
De Form modulen lar deg lage grunnleggende former i DOM ved hjelp av SVG. Alt du trenger å gjøre er å angi hvilken type form du vil opprette, og mojs vil ta vare på resten. Denne modulen lar deg også animere forskjellige former du lager.
I denne opplæringen vil vi dekke grunnleggende om Form modul og hvordan du kan bruke den til å lage forskjellige former og animere dem.
Du må instantiere en mojs Form objekt for å skape forskjellige former. Dette objektet aksepterer forskjellige parametere som kan brukes til å kontrollere farge, størrelse, vinkel, etc. av figurene du lager.
Som standard vil enhver form som du oppretter bruke dokumentlegemet som forelder. Du kan angi hvilket som helst annet element som foreldre ved hjelp av forelder eiendom. Du kan også tildele en klasse til enhver form du oppretter ved hjelp av klassenavn eiendom. Biblioteket vil ikke tildele noen standardklasse hvis du hopper over denne egenskapen.
Mojs har åtte forskjellige former innebygd slik at du kan opprette dem direkte ved å sette en verdi for form eiendom. Du kan sette verdien til sirkel å lage sirkler, rect å skape rektangler, og polygon å lage polygoner. Du kan også tegne rette linjer ved å sette verdien av form å være linjer. Biblioteket trekker to vinkelrette linjer hvis form verdien er kryss og en rekke parallelle linjer hvis form er lik. På samme måte kan zigzag-linjer opprettes ved å sette eiendomsverdien til sikksakk.
Formen objektet har også en punkter eiendom som har forskjellige betydninger for forskjellige former. Det bestemmer totalt antall sider i a polygon og totalt antall parallelle linjer i en lik form. De punkter Egenskapen kan også brukes til å angi antall bøyninger i a sikksakk linje.
Som nevnt tidligere lager mojs alle disse figurene ved hjelp av SVG. Dette betyr at Form objektet vil også ha noen SVG-spesifikke egenskaper for å kontrollere utseendet på disse figurene. Du kan angi fyllfarge på en mojsform ved hjelp av fylle eiendom. Når ingen farge er spesifisert, vil biblioteket bruke deeppink farge for å fylle formen. På samme måte kan du angi strekfargen for en form ved hjelp av hjerneslag eiendom. Når ingen strekkfarge er spesifisert, holder mojs streiken gjennomsiktig. Du kan kontrollere fylle og strekk ugjennomsiktighet for en form ved hjelp av fillOpacity og strokeOpacity eiendommer. De kan ha en verdi mellom 0 og 1.
Med Mojs kan du også kontrollere andre slagrelaterte egenskaper av en form. For eksempel kan du angi mønsteret av bindestreker og hull i en strekkbane ved hjelp av strokeDasharray eiendom. Denne egenskapen aksepterer både strenger og tall som gyldige verdier. Standardverdien er null, noe som betyr at streken vil være en solid linje. Bredden på et slag kan spesifiseres ved hjelp av strokeWidth eiendom. Alle strekkene blir som standard 2px brede. Formen på forskjellige linjer ved sluttpunktene kan spesifiseres ved hjelp av strokeLinecap eiendom. Gyldige verdier for strokeLinecap er rumpe, rund, og torget.
En hvilken som helst form du lager, plasseres i midten av det overordnede elementet som standard. Dette skyldes at venstre og Ikke sant Egenskaper for en form er satt til 50% hver. Du kan endre verdiene av disse egenskapene for å plassere elementene på forskjellige steder. En annen måte å kontrollere posisjonen til en form på er med hjelp av x og y eiendommer. De bestemmer hvor mye en form skal forskyves i henholdsvis horisontal og vertikal retning.
Du kan angi radius av en form ved hjelp av radius eiendom. Denne verdien brukes til å bestemme størrelsen på en bestemt form. Du kan også bruke radiusX og radiusY å spesifisere størrelsen på en form i en bestemt retning. En annen måte å kontrollere størrelsen på en form på er ved hjelp av skala eiendom. Standardverdien for skala er 1, men du kan sette den til noe annet nummer du liker. Du kan også skalere en form i en bestemt retning ved hjelp av scaleX og Scaley eiendommer.
Opprinnelsen til alle disse forandringene av en form er senteret som standard. For eksempel, hvis du roterer noen form ved å angi en verdi for vinkel eiendom, formen vil rotere rundt sentrum. Hvis du vil rotere en form rundt et annet punkt, kan du spesifisere det ved å bruke opprinnelse eiendom. Denne egenskapen aksepterer en streng som sin verdi. Setter den til '0% 0%' vil rotere, skala eller oversette formen rundt sitt øverste venstre hjørne. På samme måte setter du det på '50% 0% ' vil rotere, skala eller oversette formen rundt midten av toppkanten.
Du kan bruke alle disse egenskapene vi nettopp diskuterte for å lage et stort utvalg av former. Her er noen eksempler:
var circleA = new mojs.Shape (foreldre: ".container", form: "sirkel", venstre: 0, fyll: "oransje", strekk: "svart", strekkbredde: 5, isShowStart: true); varcirkelB = ny mojs.Skape (foreldre: ".container", form: "sirkel", venstre: 175, fyll: "oransje", strekk: "rødt", radiusX: 80, strekkbredde: 25, slagDasharray: 2, isShowStart: true); var rectA = new mojs.Shape (foreldre: ".container", form: "rect", left: 350, fyll: "rød", strekk: "svart", strekkbredde: 5, isShowStart: true); var rectB = ny mojs.Shape (foreldre: ".container", form: "rekt", venstre: 500, fyll: "blå", strekk: "blå", radiusX: 40, radius: 100, strekkbredde: 25, strokeDasharray: 20, isShowStart: true); var polyA = ny mojs.Shape (foreldre: ".container", form: "polygon", topp: 300, venstre: 0, fyll: "gul", strekk: "svart", strekkbredde: 10, poeng: 8, isShowStart: true); var polyB = ny mojs.Shape (foreldre: ".container", form: "polygon", topp: 350, venstre: 175, radiusX: 100, radiusY: 100, fyll: "fiolett", slag: "svart" strokeBredde: 6, strokeDasharray: "15, 10, 5, 10", strokeLinecap: "round", poeng: 3, isShowStart: true); var lineA = new mojs.Shape (foreldre: ".container", form: "cross", topp: 350, venstre: 375, strekk: "rød", strekkbredde: 40, isShowStart: true); var zigzagA = ny mojs.Shape (foreldre: ".container", form: "zigzag", topp: 500, venstre: 50, fyll: "gjennomsiktig", strekk: "svart", strekkbredde: 4, radiusX: 100, poeng: 10, isShowStart: true); var zigzagB = ny mojs.Shape (foreldre: ".container", form: "zigzag", topp: 500, venstre: 350, fyll: "blå", strekk: "gjennomsiktig", radiusX: 100, poeng: 50, isShowStart: true);
Formene som er opprettet av den ovennevnte koden, vises i CodePen-demoen nedenfor:
Du kan animere nesten alle egenskapene til en form som vi diskuterte i forrige avsnitt. For eksempel kan du animere antall poeng i et polygon ved å angi forskjellige innledende og endelige verdier. Du kan også animere opprinnelsen til en form fra '50% 50% ' til enhver annen verdi som '75% 75% '. Andre egenskaper som vinkel og skala oppfører seg akkurat som de gjorde i html modul.
Varigheten, forsinkelsen og hastigheten til forskjellige animasjoner kan styres ved hjelp av varighet, utsette og hastighet egenskaper henholdsvis. Gjenta eiendommen fungerer også som det gjorde i html modul. Du kan stille den til 0 hvis du bare vil spille animasjonen en gang. På samme måte kan du sette det til 3 for å spille animasjonen 4 ganger. Alle lettelseverdiene som var gyldige for html modulen gjelder også for Form modul.
Den eneste forskjellen mellom animasjonsegenskapene til disse to modulene er at du ikke kan angi animasjonsparametrene individuelt for egenskapene i Form modul. Alle egenskapene du animerer vil ha samme varighet, forsinkelse, repetisjoner osv.
Her er et eksempel hvor vi animerer x-posisjonen, skalaen og vinkelen til en sirkel:
var circleA = new mojs.Shape (foreldre: ".container", form: "sirkel", venstre: 175, fyll: "rødt", slag: "svart", strekkbredde: 100, strekkDasharray: 18, isShowStart: true, x: 0: 300, vinkel: 0: 360, skala: 0.5: 1.5, varighet: 1000, gjenta: 10, erYoyo: sann, lettelse: "quad.in");
En måte å styre avspillingen av forskjellige animasjoner på er å bruke .deretter() Metode for å angi et nytt sett med egenskaper som skal animeres etter at den første animasjonssekvensen er fullført. Du kan gi alle animasjonsegenskapene nye innledende og endelige verdier inni .deretter(). Her er et eksempel:
var polyA = ny mojs.Shape (foreldre: ".container", form: "polygon", fyll: "rød", strekk: "svart", isShowStart: true, poeng: 4, venstre: 100, x: 0 : 500, strekkbredde: 5: 2, varighet: 2000, lettelse: 'elastic.in'), deretter (strokeWidth: 5, poeng: 4: 3, vinkel: 0: 720 : 1: 2, fyll: 'rødt': 'gul', varighet: 1000, forsinkelse: 200, lettelse: 'elastic.out');
I denne opplæringen lærte vi hvordan å lage forskjellige former ved hjelp av mojs og hvordan å animere egenskapene til disse figurene.
De Form Modulen har alle animasjonsegenskapene til html modul. Den eneste forskjellen er at egenskapene ikke kan animeres individuelt. De kan bare animeres som en gruppe. Du kan også kontrollere animasjonsavspillingen ved å bruke forskjellige metoder for å spille, pause, stoppe og gjenoppta animasjonene når som helst. Jeg dekket disse metodene i detalj i den første opplæringen av serien.
Hvis du har noen spørsmål relatert til denne opplæringen, er du velkommen til å legge inn en kommentar. I neste veiledning vil du lære om ShapeSwirl og vakle moduler i mojs.
Accentsconagua