Share
În tutorialul anterior, am folosit mojs pentru a anima diferite elemente HTML pe o pagină Web. Am folosit biblioteca pentru a anima în principal div elemente care păreau pătrate sau cercuri. Cu toate acestea, puteți utiliza html modul de animare a tuturor tipurilor de elemente precum imagini sau titluri. Dacă intenționați să animați forme de bază folosind mojs, ar trebui probabil să utilizați modulul Shape din bibliotecă.
Formă modul vă permite să creați forme de bază în DOM folosind SVG. Tot ce trebuie să faceți este să specificați tipul de formă pe care doriți să-l creați, iar mojs-ul va avea grijă de restul. Acest modul vă permite de asemenea să animați diferite forme pe care le creați.
În acest tutorial, vom acoperi elementele de bază ale Formă modul și cum îl puteți folosi pentru a crea diferite forme și a le anima.
Trebuie să instanțiați o mojs Formă obiect pentru a crea diferite forme. Acest obiect va accepta diferiți parametri care pot fi utilizați pentru a controla culoarea, dimensiunea, unghiul etc. a formelor pe care le creați.
Implicit, orice formă pe care o creați va folosi corpul de document ca părinte. Puteți specifica orice alt element ca și părinte folosind mamă proprietate. De asemenea, puteți atribui o clasă oricărei forme pe care o creați cu ajutorul funcției numele clasei proprietate. Biblioteca nu va atribui nici o clasă implicită dacă ignorați această proprietate.
Mojs are opt forme diferite, astfel încât să le puteți crea direct prin stabilirea unei valori pentru formă proprietate. Puteți să-i setați valoarea cerc pentru a crea cercuri, RECT pentru a crea dreptunghiuri și poligon pentru a crea poligoane. De asemenea, puteți desena linii drepte prin setarea valorii formă a fi linii. Biblioteca va desena două linii perpendiculare dacă formă valoarea este traversa și o serie de linii paralele dacă formă este egal. În mod similar, pot fi create linii zig-zag prin setarea valorii proprietății la zigzag.
Obiectul de formă are, de asemenea, a puncte proprietate care are semnificații diferite pentru diferite forme. Acesta determină numărul total de laturi dintr-un a poligon și numărul total de linii paralele într - un egal formă. puncte proprietatea poate fi, de asemenea, folosit pentru a seta numărul de curbe într-o zigzag linia.
După cum am menționat mai devreme, mojs creează toate aceste forme folosind SVG. Aceasta înseamnă că Formă obiect va avea, de asemenea, unele proprietăți SVG specifice pentru a controla aspectul acestor forme. Puteți seta culoarea de umplere a formei mojs folosind completati proprietate. Când nu este specificată nici o culoare, biblioteca va folosi roz închis culoare pentru a umple forma. În mod similar, puteți specifica culoarea cursei pentru o formă utilizând accident vascular cerebral proprietate. Când nu este specificată culoarea accidentală, mojs menține cursa transparentă. Puteți controla opacitatea umplerii și cursei pentru o formă folosind fillOpacity și strokeOpacity proprietăți. Acestea pot avea orice valoare între 0 și 1.
Mojs vă permite să controlați și alte proprietăți legate de accident vascular cerebral ale unei forme. De exemplu, aveți posibilitatea să specificați modelul de liniuțe și goluri într - o cale de cursă folosind strokeDasharray proprietate. Această proprietate acceptă atât șiruri cât și numere ca valori valide. Valoarea sa implicită este zero, ceea ce înseamnă că cursa va fi o linie solidă. Lățimea unui curse poate fi specificată utilizând strokeWidth proprietate. Toate loviturile vor fi lățime 2px în mod implicit. Forma liniilor diferite la punctele lor finale poate fi specificată utilizând strokeLinecap proprietate. Valori valide pentru strokeLinecap sunteți îmbinare, rundă, și pătrat.
Orice formă pe care o creați este plasată în centrul elementului părinte implicit. Acest lucru se datorează faptului că stânga și dreapta proprietățile pentru o formă sunt setate la 50% fiecare. Puteți modifica valorile acestor proprietăți pentru a plasa elementele în locații diferite. O altă modalitate de a controla poziția unei forme este cu ajutorul X și y proprietăți. Ei determină cât de mult ar trebui să se schimbe o formă în direcția orizontală și respectiv verticală.
Puteți specifica raza unei forme utilizând rază proprietate. Această valoare este utilizată pentru a determina dimensiunea unei anumite forme. Puteți utiliza, de asemenea radiusX și radiusY pentru a specifica dimensiunea unei forme într-o anumită direcție. Un alt mod de a controla dimensiunea unei forme este cu ajutorul scară proprietate. Valoarea implicită a scară este 1, dar îl puteți seta la orice alt număr doriți. De asemenea, puteți scala o formă într - o anumită direcție folosind scaleX și scaleY proprietăţi.
Originea tuturor acestor transformări ale unei forme este centrul său implicit. De exemplu, dacă rotiți orice formă specificând o valoare pentru unghi proprietate, forma se va roti în jurul centrului. Dacă doriți să rotiți o formă în jurul altui punct, o puteți specifica folosind origine proprietate. Această proprietate acceptă un șir ca valoare. Setarea la "0% 0%" va roti, scala sau traduce forma în jurul colțului său din stânga sus. În mod similar, setarea la '50% 0% ' va roti, scala sau traduce forma în jurul centrului marginii superioare.
Puteți folosi toate aceste proprietăți pe care tocmai le-am discutat pentru a crea o mare varietate de forme. Iată câteva exemple:
var circleA = mojs.Shape nou (părinte: ".container", forma: "cerc", stânga: 0, umplere: "portocaliu", accident: "negru", strokeWidth: 5, isShowStart: true); var circleB = mojs.Shape nou (părinte: ".container", forma: "cerc", stânga: 175, umplere: "portocaliu", accident vascular cerebral: "roșu", radiusX: isShowStart: true); var rectA = mojs.Shape nou (părinte: ".container", forma: "rect", stânga: 350, umple: "roșu", accident: "negru", strokeWidth: 5, isShowStart: true); var rectB = mojs.Shape nou (părinte: ".container", forma: "rect", stânga: 500, umplere: "albastru", accident "blue", radiusX: 40, strokeDasharray: 20, isShowStart: true); var polyA = noi mojs.Shape (părinte: ".container", forma: "poligon", top: 300, stânga: 0, umplere: "galben", accident vascular cerebral: isShowStart: true); var poliB = mojs.Shape nou (părinte: ".container", forma: "poligon", top: 350, stânga: 175, radiusX: 100, radiusY: 100, umplere: "violet" strokeWidth: 6, strokeDasharray: "15, 10, 5, 10", strokeLinecap: "rotund", puncte: 3, isShowStart: true); var linieA = mojs.Shape nou (părinte: ".container", forma: "cruce", top: 350, stânga: 375, accident vascular cerebral: "roșu", strokeWidth: 40, isShowStart: true); var zigzagA = nou mojs.Shape (părinte: ".container", forma: "zigzag", top: 500, stânga: 50, umplere: "transparent" puncte: 10, isShowStart: true); var zigzagB = noi mojs.Shape (părinte: ".container", forma: "zigzag", top: 500, stânga: 350, umplere: "albastru" isShowStart: true);
Formele create de codul de mai sus sunt afișate în demonstrația CodePen de mai jos:
Puteți anima aproape toate proprietățile unei forme pe care am discutat-o în secțiunea anterioară. De exemplu, puteți anima numărul de puncte într-un poligon prin specificarea diferitelor valori inițiale și finale. De asemenea, puteți anima originea unei forme "50% 50%" la orice altă valoare, cum ar fi '75% 75%'. Alte proprietăți cum ar fi unghi și scară se comportă așa cum au făcut în html modul.
Durata, întârzierea și viteza diferitelor animații pot fi controlate folosind durată, întârziere și viteză proprietăți. Proprietatea repetată funcționează, de asemenea, ca în cazul html modul. Puteți să o setați la 0 dacă doriți să redați animația o singură dată. În mod similar, îl puteți seta la 3 pentru a reda animația de 4 ori. Toate valorile de relaxare valabile pentru html modul sunt, de asemenea, valabile pentru Formă modul.
Singura diferență dintre capabilitățile de animație ale acestor două module este că nu puteți specifica parametrii de animație individual pentru proprietățile din Formă modul. Toate proprietățile pe care le animați vor avea aceeași durată, întârziere, repetiții etc..
Iată un exemplu în care animăm poziția x, scara și unghiul unui cerc:
var cercA = nou mojs.Shape (părinte: ".container", forma: "cerc", stânga: 175, umplere: "roșu", stroke: "negru", strokeWidth: 100, strokeDasharray: x: 0: 300, unghi: 0: 360, scară: 0.5: 1.5, durată: 1000, repetare: 10, isYoyo: adevărat, relaxare: "quad.in");
O modalitate de a controla redarea diferitelor animații este prin utilizarea funcției .atunci() pentru a specifica un set nou de proprietăți care urmează să fie animat după ce prima secvență de animație a fost complet terminată. Puteți da proprietăților de animație noi valori inițiale și finale în interior .atunci(). Iată un exemplu:
var poliA = noi mojs.Shape (părinte: ".container", forma: "poligon", umple: "roșu", cursă: "negru", isShowStart: true, puncte: 4, left: 100, x: 0 : 5: 2, durata: 2000, relaxarea: "elastic.in"), apoi strokeWidth: 5, points: 4: 3, angle: 0: : 1: 2, umpleți: 'roșu': 'galben', durata: 1000, întârziere: 200, relaxare: 'elastic.out');
În acest tutorial, am învățat cum să creăm diferite forme utilizând mojs și cum să animăm proprietățile acestor forme.
Formă module are toate capabilitățile de animație ale html modul. Singura diferență este că proprietățile nu pot fi animate individual. Ele pot fi animate doar ca grup. De asemenea, puteți controla redarea animației utilizând diferite metode pentru redarea, întreruperea, oprirea și reluarea animațiilor în orice moment. Am abordat aceste metode în detaliu în primul tutorial al seriei.
Dacă aveți întrebări legate de acest tutorial, nu ezitați să postați un comentariu. În următorul tutorial, veți afla despre ShapeSwirl și clătina module în mojs.
Accentsconagua