Share
Am inceput aceasta serie invatand cum sa animati elemente HTML folosind mojs. În cel de-al doilea tutorial, ne-am mutat la animația formelor SVG încorporate folosind Formă modul. Al treilea tutorial a acoperit mai multe moduri de animare a formelor SVG folosind ShapeSwirl și clătina module.
Acum, vom învăța cum să animați diferite forme SVG într-o formare de explozie folosind Izbucni modul. Acest tutorial va depinde de conceptele pe care le-am abordat în cele trei tutoriale anterioare. Dacă nu le-ați citit deja, aș sugera să le treceți mai întâi prin ele.
Primul lucru pe care trebuie să-l facem înainte de a putea crea animații de spargere este instanțializarea a Izbucni obiect. După aceea, putem specifica valorile diferitelor proprietăți pentru a controla modul în care animația se derulează. Numele unei mulțimi de proprietăți în Izbucni modulul sunt aceleași cu proprietățile din Formă modul. Totuși, aceste proprietăți îndeplinesc sarcini foarte diferite în acest caz.
stânga și dreapta proprietățile determină poziția inițială a izbucnirii în loc de particulele din interiorul acesteia. În mod similar, X și y proprietățile determina schimbarea întregului spargere în loc de particule individuale.
Raza cercului formată de toate particulele de spargere este controlată de către rază proprietate. Acest lucru este foarte diferit de rază proprietatea unor forme individuale, care determină dimensiunea acestor forme. În cazul unei izbucniri, raza determină cât de mult se vor separa în continuare formele individuale din ea.
Numărul de forme sau particule într - o singură explozie poate fi specificat folosind numara proprietate. În mod implicit, vor exista cinci particule în fiecare explozie pe care o creați. Toate aceste particule sunt distanțate uniform pe circumferința spargerii. De exemplu, dacă există patru particule, acestea vor fi plasate la 90 de grade unul față de celălalt. Dacă există trei particule, ele vor fi plasate la 120 de grade.
Dacă nu doriți ca particulele de spargere să acopere întregul 360 de grade, puteți specifica porțiunea care ar trebui să fie acoperită utilizând grad proprietate. Orice valoare peste 0 este valabilă pentru această proprietate. Numărul specificat de grade va fi distribuit uniform între toate particulele. Dacă valoarea gradului depășește 360, formele ar putea să se suprapună.
Unghiul specificat cu ajutorul unghi proprietatea determină unghiul întregului izbucnire. În acest caz, particulele individuale nu se rotesc în jurul propriului centru, ci în jurul centrului izbucnirii. Acest lucru este similar cu modul în care pământul se învârt în jurul soarelui, care este diferit de rotația pământului pe axa sa proprie.
scară proprietatea măsoară valoarea tuturor proprietăților fizice ale izbucnirii și, la rândul ei, formele individuale. La fel ca alte proprietăți de spargere, toate formele din acesta ar fi scalate imediat. Setarea spargerii scară la 3 va crește raza întregului spargere, precum și dimensiunea formelor individuale cu 3.
În următorul fragment de cod, creăm cinci explozii diferite folosind proprietățile pe care tocmai le-am discutat.
var burstA = noi mojs.Burst (count: 20); var burstB = noi mojs.Burst (unghi: 0: 360, scară: 1: 2, rază: 10); var burstC = noi mojs.Burst (unghi: 0: 360, scară: 1: 2, rază: 10: 100); var burstD = noi mojs.Burst (grad: 180, radiusX: 10, unghi: -90, scală: 1: 2, rază: 10: 100); var burstE = noi mojs.Burst (count: 20, degree: 3600);
Puteți vedea asta burstA și burstE diferă doar în ceea ce privește numărul de grade pe care trebuie să le acopere. Deoarece particulele din burstA trebuie să acopere 360 de grade (valoarea implicită), acestea sunt plasate 360/20 = 18 grade în afară. Pe de altă parte, particulele din burstE sunt puse 3600/20 = 180 grade în afară. Pornind de la zero, prima particulă este plasată la 0 grade, iar următoarea este plasată la 180 de grade.
A treia particulă este apoi plasată la 360 de grade, care este în esență egală cu 0 grade. A patra particulă este apoi plasată la 540 de grade, dar în principiu este egală cu 180 de grade. Cu alte cuvinte, toate particulele numerotate impare sunt plasate la 0 grade, iar toate particulele parțiale sunt plasate la 180 de grade. În cele din urmă, vedeți numai două particule, deoarece toate celelalte se suprapun cu primele două.
Este important să rețineți că nu puteți controla direct durata, întârzierea sau relaxarea funcției animațiilor de spargere. Modulul determină automat toate aceste valori pe baza valorilor diferiților copii animați.
Până acum, în acest tutorial, toate particulele dintr-o explozie au avut aceeași animație aplicată pentru ei. Unghiul, scala, raza și poziția lor s-au schimbat cu aceeași valoare. Mai mult, nu am reușit să controlam durata și întârzierea fie a particulelor individuale, fie a izbucnirii ca un întreg. Mojs Izbucni modulul nu are un set de proprietăți care pot modifica direct toate aceste valori. Cu toate acestea, putem specifica valoarea de animație pentru particule individuale, care la rândul lor afectează animația de spargere.
Toate particulele dintr-o animație de spargere sunt considerate a fi copii ai originalului Izbucni obiect. Prin urmare, mojs ne permite să controlam animația particulelor de spargere individuale utilizând a copii proprietate, care acceptă un obiect ca valoare. Puteți folosi toate ShapeSwirl proprietăți excepționale X și y în interiorul obiectului pentru copii. Acest lucru are sens deoarece particulele individuale dintr-o animație de spargere trebuie să apară în anumite poziții și ne permit să schimbăm aleatoriu poziția particulelor individuale va schimba configurația.
Orice valori pentru proprietățile copiilor pe care nu le specificați va fi setată la valorile implicite furnizate de ShapeSwirl modul. În următorul exemplu, animăm 20 de linii diferite ale animației noastre de spargere. De data aceasta, unghi proprietatea a fost stabilită pe particule individuale în loc de Izbucni astfel încât numai liniile să se rotească în jurul centrului lor în locul întregului obiect. Așa cum am învățat în tutorialul anterior, toate ShapeSwirl obiectele scad în jos de la 1 la 0 în mod implicit. De aceea lungimile liniilor se schimbă de la 40 la 0 în animație.
var burstA = nou mojs.Burst (count: 20, copii: shape: 'line', cursă: 'negru', rază: 20, unghi: 0: 180);
După cum am menționat mai devreme, putem anima toate ShapeSwirl proprietăți în interiorul animațiilor de spargere. Fiecare copil din animație poate avea un set propriu de proprietăți. Dacă este furnizată o singură valoare, aceasta va fi aplicată tuturor particulelor copilului. Dacă valorile sunt furnizate ca o matrice, ele vor fi aplicate secvențial, câte o particulă la un moment dat.
Iată codul JavaScript pentru a crea cinci animații diferite de explozie folosind toate conceptele pe care le-am învățat până acum.
var burstA = noi mojs.Burst (count: 20, angle: 0: 180, rază: 0: 100, copii: shape: "polygon" 0: 360, durata: 4000); var burstB = noi mojs.Burst (count: 20, angle: 0: 180, raza: 0: 100, copii: shape: "polygon" portocaliu], accident vascular cerebral: "negru", rază: 20, scală: 1: 2, durata: 2000, isShowEnd: false); var burstC = noi mojs.Burst (count: 20, angle: 0: -180, rază: 0: 100, copii: shape: "circle" "albastru"], raza: 10: "stagger (5, 1)"); var burstD = noi mojs.Burst (count: 6, radius: 0: 100, copii: shape: "circle", fill: ["roșu", "galben", "albastru" : "rand (1, 10)", isShowEnd: false); var burstE = noi mojs.Burst (count: 6, radius: 0: 100, copii: shape: "circle", fill: ["red", "yellow", "blue" ", scală: 1:" rand (1, 10) ").
În prima animație de spargere, unghi aplicată direct pe Izbucni obiect roteste întregul grup în jurul centrului obiectului de spargere. Însă unghi aplicată în interiorul proprietății copiilor, rotește toate triunghiurile din jurul propriilor centre. De asemenea, am încetinit animația de explozie prin modificarea duratei de animație pentru toți copiii la 4000ms.
În cea de-a doua animație de spargere, culoarea tuturor triunghiurilor este luată din matricea trecută completati proprietate. Am specificat doar trei culori de umplere, dar numărul total de triunghiuri este 20. În astfel de cazuri, mojs continuă să circule prin elementele matricei și umple din nou și din nou triunghiurile cu aceleași trei culori.
În a patra animație, folosim Rand siruri de caractere, despre care am invatat in tutorialul anterior, pentru a alege aleator o valoare a scarii pentru toate particulele copilului. De asemenea, stabilim valoarea isShowEnd proprietate la fals pentru a ascunde particulele la sfârșitul animației.
În cea de-a cincea animație, folosim atunci() din modulul Shape tutorial pentru a reda o altă secvență de animație după terminarea primei secvențe de animație.
Scopul acestei serii a fost să vă familiarizați cu elementele de bază ale bibliotecii de animații ale mojilor. Fiecare tutorial sa concentrat pe un singur modul și cum puteți utiliza proprietățile din modulul respectiv pentru a crea animații de bază.
Acest ultim tutorial a folosit conceptele de la tutorialele anterioare pentru a crea animații puțin mai complicate. Mojs este o bibliotecă de animație foarte puternică, iar rezultatele finale pe care le obțineți depind de cât de creativă puteți obține cu toate proprietățile, astfel încât să continuați să experimentați.
Dacă există ceva pe care doriți să-l clarificați în acest tutorial, vă rog să-mi spuneți în comentarii.
Accentsconagua