Share
Primul și al doilea tutoriale din această serie au acoperit modul de animare a diferitelor elemente HTML și a formelor SVG utilizând mojs. În acest tutorial, vom afla despre încă două module care pot face animațiile noastre mai interesante. ShapeSwirl modul vă permite să adăugați o mișcare turbionară la orice formă pe care o creați. clătina modulul, pe de altă parte, vă permite să creați și să animați mai multe forme simultan.
ShapeSwirl modul în mojs are un constructor care acceptă toate proprietățile Formă modul. De asemenea, acceptă câteva proprietăți suplimentare care îi permit să creeze o mișcare de rotire.
Puteți specifica amplitudinea sau mărimea vârtejului folosind swirlSize proprietate. Frecvența de oscilație în timpul mișcării turbionare este determinată de valoarea lui swirlFrequency proprietate. De asemenea, puteți micșora lungimea totală a traseului formei de rotire folosind pathScale proprietate. Valorile valide pentru această gamă de proprietăți se situează între 0 și 1. Direcția mișcării poate fi specificată utilizând direcţie proprietate. Ține minte că direcţie are doar două valori valide: -1 și 1. Formele într-o mișcare turbionară vor urma în mod implicit o cale sinusoidală. Cu toate acestea, le puteți anima de-a lungul liniilor drepte prin setarea valorii isSwirl proprietate la fals.
Pe lângă aceste proprietăți suplimentare, ShapeSwirl modul modifică, de asemenea, valoarea implicită a unor proprietăți din Formă modul. rază de orice formă de rotire este setată la 5 în mod implicit. În mod similar, scară proprietatea este setată să fie animată de la 1 la 0 în ShapeSwirl modul.
În următorul fragment de cod, am folosit toate aceste proprietăți pentru a anima două cercuri într-o mișcare învârtind.
vară cercSwirlA = nou mojs.ShapeSwirl (părinte: ".container", forma: "cerc", umple: "roșu", accident: "negru", rază: 20, y: 0: : 720, durata: 2000, repetați: 10); vară cercSwirlB = nou mojs.ShapeSwirl (parent: ".container", forma: "cerc", umplere: "verde", accident: "negru", rază: 20, y: 0: : 720, durata: 2000, swirlSize: 20, swirlFrequency: 10, isSwirl: true, pathScale: 0.5, repeat: 10);
În următoarea demo, puteți face clic pe Joaca buton pentru a anima două cercuri, un triunghi și o cruce într-o mișcare turbionară.
Spre deosebire de toate celelalte module pe care le-am discutat până acum, clătina nu este un constructor. Acest modul este de fapt o funcție care poate fi înfășurată în jurul oricărui alt modul pentru a anima mai multe forme sau elemente simultan. Acest lucru poate fi foarte util atunci când doriți să aplicați aceeași secvență de animație pe diferite forme, dar să le modificați în mod independent magnitudinea.
Odată ce ați înfășurat Formă modul în interiorul clătina() , veți putea specifica numărul elementelor de animat utilizând cuantificator proprietate. După aceasta, puteți specifica valoarea celorlalte Formă legate de proprietăți. Acum va deveni posibil ca fiecare proprietate să accepte o serie de valori care trebuie aplicate secvențial pe forme individuale. Dacă doriți ca toate formele să aibă aceeași valoare pentru o anumită proprietate, puteți seta proprietatea să fie egală cu valoarea respectivă în locul unei serii de valori.
Exemplul următor ar trebui să clarifice modul în care valorile sunt atribuite diferitelor forme:
var staggerShapes = mojs.stagger (mojs.Shape); triunghiuri var = nouă eșantionare (cuantificator: 5, forma: "poligon", umplere: "galben", accident vascular cerebral: "negru", cursa Lățime: 5, rază: [20, 30, 40, 50,60] , top: 200, x: 0: 100, 0: 150, 0: 200, 0: 250, 0: quad.in ', esteYoyo: true, isShowStart: true);
Începem prin împachetarea Formă modul în interiorul clătina() funcţie. Acest lucru ne permite să creăm simultan mai multe forme. Am stabilit valoarea cuantificator proprietate la 5. Aceasta creează cinci forme diferite, care, în cazul nostru, sunt poligoane. Fiecare poligon este un triunghi, deoarece valoarea implicită a puncte proprietatea este 3. Am acoperit deja toate aceste proprietăți în al doilea tutorial al seriei.
Există o singură valoare completati, accident vascular cerebral, și strokeWidth. Aceasta înseamnă că toate triunghiurile vor fi umplute cu galben și vor avea un accident vascular cerebral neagră. Lățimea accidentului în fiecare caz ar fi de 5 pixeli. Valoarea lui rază proprietatea, pe de altă parte, este o serie de cinci întregi. Fiecare număr determină raza unui triunghi din grup. Valoarea 20 este atribuită primului triunghi, iar valoarea 60 este atribuită ultimului triunghi.
Toate proprietățile au avut aceleași valori inițiale și finale pentru triunghiurile individuale până acum. Aceasta înseamnă că niciuna dintre proprietăți nu ar fi animată. Cu toate acestea, valoarea lui X proprietatea este o serie de obiecte care conțin valoarea inițială și finală a poziției orizontale a fiecărui triunghi. Primul triunghi va traduce din x: 0 la x: 100, iar ultimul triunghi va traduce din x: 0 la x: 300. Durata de animație în fiecare caz ar fi de 2000 milisecunde.
Dacă există un pas fix între diferite valori ale unei proprietăți, puteți utiliza și șiruri de ștergere pentru a specifica valoarea inițială și incrementările. Șirurile de ștergere acceptă doi parametri. Primul este start valoare, care este atribuită primului element din grup. A doua valoare este Etapa, care determină creșterea sau scăderea valorii pentru fiecare formă succesivă. Atunci când o singură valoare este trecută la șirul de eșantionare, se consideră că este Etapa, si start valoarea în acest caz se presupune a fi zero.
Exemplul triunghiului de mai sus poate fi rescris ca:
var staggerShapes = mojs.stagger (mojs.Shape); var = triunghiuri noi (variante de măsurare: 5, forma: "poligon", umplere: "galben", accident vascular cerebral: "negru", strokeWidth: 5, 200, x: 0: 'stagger (100, 50)', durata: 2000, repetare: 10, relaxare: 'quad.in', Yoyo: true, isShowStart: true);
De asemenea, puteți atribui valori aleatoare diferitelor forme într-un grup folosind șirul rand. Trebuie doar să furnizați o valoare minimă și maximă unui șir rand și mojs va atribui automat o valoare între aceste limite unor forme individuale din grup.
În următorul exemplu, folosim șirurile rand pentru a seta aleatoriu numărul de puncte pentru fiecare poligon. S-ar putea să fi observat că numărul total de poligoane pe care le redăm este de 25, dar completati matrice are doar patru culori. Când lungimea matricei este mai mică decât valoarea lui cuantificator, valorile pentru diferite forme sunt determinate de ciclul continuu prin matrice până când toate formele au fost atribuite o valoare. De exemplu, după atribuirea culorii primilor patru poligoane, culoarea celui de-al cincilea poligon ar fi portocaliu, culoarea celui de-al șaselea poligon ar fi galben și așa mai departe.
Șirul de ștergător stabilește raza primului poligon egal cu 10 și apoi menține raza poligoanelor următoare cu 1. Poziția orizontală a fiecărui poligon este mărită în mod similar cu 20, iar poziția verticală este determinată aleatoriu. Finala unghi valoarea pentru fiecare poligon este setată aleator între -120 și 120. Astfel, unele poligoane se rotesc în sensul acelor de ceasornic, în timp ce altele se rotesc în sens invers acelor de ceasornic. Animația unghiulară are de asemenea o funcție proprie de relaxare, care este diferită de animația comună a altor proprietăți.
var staggerShapes = mojs.stagger (mojs.Shape); var polygons = new staggerShapes (cuantificator: 25, forma: 'poligon', puncte: 'rand (3, 6)', umplere: ['orange', 'yellow', 'cyan' (1, 1) ", stânga: 100, partea superioară: 100, x:" eșantion (0, 20) 'rand (0.1, 3)', unghi: 0: 'rand (-120, 120)', relaxare: 'elastic.in', durată: 1000, repeat: 10, relaxare: 'cubic.in'; este Yoyo: true, isShowStart: true);
Am acoperit încă două module de mojs în acest tutorial. ShapeSwirl modulul ne permite să animăm diferite forme într-o mișcare turbionară. clătina modulul ne permite să animăm simultan mai multe elemente de formă.
Fiecare formă într-un clătina grupul poate fi animat independent fără interferențe din alte forme. Acest lucru face ca clătina modul incredibil de util. De asemenea, am învățat cum să folosim șiruri de ștergere pentru a atribui valori cu pași fixi proprietăților de diferite forme.
Dacă aveți întrebări legate de acest tutorial, vă rugăm să anunțați-mă în comentarii. Vom afla despre Izbucni modul în următorul tutorial al acestei serii.
Pentru resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil în piața Envato.
Accentsconagua