Share
Ce veți creaGata pentru unele definiții? mecanică este definită ca o zonă care privește comportamentul obiectelor supuse forțelor sau deplasărilor și efectele ulterioare ale acestor obiecte asupra mediului înconjurător. A cronologia este o modalitate de a afișa o listă de evenimente în ordine cronologică, uneori descrisă ca artefact de proiect. Să punem capăt celor două zone pentru a învăța cum să controlați și să configurați animațiile noastre ca și când știm de fapt ce facem.
Mai multe definiții vin: termenul sintaxă se referă direct la regulile și principiile care guvernează structura. După cum am discutat în tutorialul nostru anterior, sintaxa JavaScript pentru crearea unei animații TimelineMax este după cum urmează:
var config = ; var tmax_tl = nou TimelineMax (config);
Aici am definit o nouă cronologie folosind TimelineMax () constructor și a trecut config obiect ca argument. Acest argument, dacă vă amintiți, este ceea ce se numește un "obiect literal" care conține valoare cheie corelarea setărilor de configurare. TimelineMax () constructorul este ceea ce se utilizează pentru a instanțiza o nouă instanță TimelineMax.
Rețineți că, pe măsură ce vă obișnuiți cu sintaxa, următoarele rânduri sunt identice; adică ambele sunt identice (ultima linie este destinată comodității).
tmax_tl.add (TweenLite.to (element, 1, stânga: 100, opacitatea: 0,5)); tmax_tl.to (element, 1, stânga: 100, opacitatea: 0,5);
Dacă sunteți ceva ca mine, este puțin probabil să vă amintiți toți parametrii acceptați pentru opțiunile de configurare TimelineMax. Din fericire, o listă completă a opțiunilor de configurare și a proprietăților poate fi găsită aici pentru referință.
În afară de configurația reală, cronologia noastră are și proprietăți disponibile. De exemplu, dacă am scris următoarele:
var config = repet: -1, întârziere: 1, repeatDelay: 0; var tmax_tl = nou TimelineMax (config); console.log (tmax_tl.vars);
consola ar loga întreaga config variabilă (reprezentată de tmax_tl.vars) ca obiect și permiteți-mi să inspectez fiecare cheie / valoare care a fost stabilită. Există o listă completă de proprietăți disponibile pentru cronologie, pe care le puteți scufunda aici pentru explorare ulterioară.
Doar pentru distracție, faceți acest lucru și apoi examinați ieșirea din consola DevTools:
console.log (tmax_tl.timeline);
Ar trebui să vedeți o ieșire similară la următorul ecran:
Încercați să raportați această proprietate următoare în consola și să vă urmăriți răsturnarea (consola trebuie să raporteze o valoare numerică):
console.log (tl.timeline._timeScale);
Adevărul secret al construirii unor secvențe de animație uimitoare, cu o precizie precisă, este înțelegerea parametrului de poziție. Acest parametru super-flexibil controlează plasarea de tweens, etichete, callbacks, pauze și chiar termene imbricate, astfel încât să puteți plasa orice, oriunde și în orice ordine!
De exemplu, dacă ne uităm la următorul cod, veți vedea că parametrul de poziție este ultimul argument pentru la() metodă.
tmax_tl.to (țintă, durată, vars, poziție)
Iată un exemplu despre cum arată totul. Acordați o atenție deosebită comentariilor care explică modul în care argumentul poziției aliniază secvența. De asemenea, punem metodele unul după altul: ceea ce se numește înlănțuire.
tmax_tl.to (element, 1, x: 200). (element, 1, y: 200, '+ = 1') // 1 secundă după terminarea precedentului () 1, rotation: 360, '- = 0.5') // 0.5 secunde înainte de sfârșitul precedentului () tween .to (element, 1, scale: 4, 6); // Exact 6 secunde de la începutul liniei temporale
Puteți să vă gândiți la argumentul poziției ca pe o modalitate de a controla plasarea unui tween pe linia de timp (în mod implicit, este sfârșitul liniei de timp și este reprezentat ca '+ = 0'). Utilizați un număr pentru a indica un timp absolut în termeni de secunde. Prefixele, cum ar fi '+ =' sau '- =' ajută la compensarea punctului de inserare în raport cu Sfârșit din cronologie. De exemplu, '+ = 2' ar plasa tween-ul la două secunde după terminare, lăsând un decalaj de două secunde.
Când ați terminat, trimiteți link-ul CodePen la @greensock pentru a vă face să vă simțiți deosebit de special.
Vă puteți gândi la etichete ca pe o modalitate de a introduce markere în animația dvs., astfel încât să puteți menționa punctele exacte mai târziu în secvență. Acesta ar putea fi un punct în care #objectX se mută 100 de pixeli deasupra #objectY are o interacțiune care se suprapune cu 0,5 secunde în #objectX secvenţă.
Când folosiți etichetele, asigurați-vă că utilizați o valoare de șir pentru a specifica locul în care trebuie plasat un tween și includeți argumentul de temporizare a poziției pentru a controla punctul de execuție.
Accentsconagua
// tweens sunt introduse la și relativ la poziția unei etichete var tmax_tl = new TimelineMax (); tmax_tl.to ('# verde', 1, x: 750) // Adaugă eticheta blueGreenSpin 1 secundă după terminarea secvenței verde ... add ('blueGreenSpin', '+ = , 2, x: 750, rotație: 360, "blueGreenSpin") // Adăugați adăugați la eticheta blueGreenSpin .to ('# orange', 2, x: 750, rotație: 360; ; // Introduceți două secunde după eticheta albastrăGreenSpin Notă: Majoritatea metodelor au zero ca valoare implicită pentru argumentul poziției ('+ = 0').
Dacă definiți o etichetă care nu există încă, aceasta va fi adăugată automat la sfârșitul liniei de timp înainte de a insera completarea care poate fi destul de convenabilă.
metode sunt ceea ce ajută la realizarea scopului acțiunii dorite, sau, cu alte cuvinte, acțiunea pe care ne-am dori să o luăm pentru fiecare secvență de pe cronologia noastră.
Doar de dragul științei, să scriem o metodă care ia un singur obiect cu un id de #objectA și faceți-o să se mute în partea dreaptă a ecranului. Acesta este modul în care ar arăta folosind metoda to ():
/ * .to (țintă: [Obiect || Array], durata: Număr, vars: Obiect, poziție: *) * / tmax_tl.to ($ (' ; Lucrul important pe care trebuie să-l menționăm în baza codului de mai sus este faptul că vom avea nevoie, de asemenea, de ajutorul CSS (Poziția: absolută) pentru a ne îndeplini cererea (mutarea obiectului). Amintiți-vă că elementele din terenul web au o poziție statică, ceea ce înseamnă că dacă doriți să mutați un obiect folosind abordarea de mai sus, va trebui să vă asigurați că proprietățile CSS corespunzătoare sunt în loc, altfel nimic nu se va întâmpla.
Este timpul ca tu să ai altceva de disecat, nu crezi?
Următoarea demo utilizează la() metoda de a controla fiecare cerc al unui încărcător (ați putea folosi o abordare mai simplă, dar există un punct pentru această nebunie). Încercați să faceți cercurile exterioare și cercul de mijloc să se răcească în mișcarea lor folosind argumentul de poziționare a poziției. Scopul exercițiului este de a înțelege vizual modul în care parametrul de poziție permite suprapunerea tween-urilor dvs. în timpul secvenței. Așa cum puteți vedea în următoarele .gif incendiile fiecărui cerc în același timp. Încercați și dați acestei animații câteva miresme prin suprapunerea secvenței după cum ați văzut în animația GIF folosită pentru introducerea acestui post. Succes, dați-ne să știți cum vă duceți!
// Ultimul argument este poziționarea poziției. // Utilizați acest argument pentru a alinia vizibilitatea cercurilor înconjurătoare tmax_tl.to ($ ('svg> cerc: nth of type (1)'), 1, tween_options_to, 0) .to ($ (' ('(' ng-of-type (3) '), 1, tween_options_to, 0) .to ($ (' Citește mai multe despre: "ng-of-type (5)", 1, tween_options_to, 0) .to ($ ('svg> cerc: nth-of-type (7)'), 1, tween_options_to, 0) 
Vedeți Penul, furculița și mizeria în jurul valorii de momentul Ca întotdeauna, dacă doriți să faceți o plimbare mai departe pe această animație, nu ezitați să mergeți la documentația GreenSock - citiți în mod specific pe TweenLite și TweenMax. Rămâneți reglați pentru următoarea tranșă a acestei serii care acoperă lumea minunată de reluare! Sper să vă revăd curând!
