Share
În acest tutorial vom învăța cum să controlam animațiile, la cerere, folosind o metodă numită addPause (). Gata? Setați? ... o mică pauză ... Să mergem!
addPause () este o metodă de control care permite dezvoltatorilor să apeleze pauză oriunde pe cronologie. Este mult mai precis decât utilizarea unei funcții de apel invers care întrerupe o altă funcție (ceva necesar înainte de addPause () existent).
Această metodă de control poate introduce, de asemenea, o inversare specială care întrerupe redarea liniei temporale la o anumită marcă de timp sau o etichetă. Acest lucru vă ajută să vă asigurați că dacă capul de joc virtual se va mișca ușor dincolo de poziția de pauză, acesta va fi mutat înapoi la locul exact.
Sintaxa pentru addPause este drept înainte. Așa cum scriem alte metode cum ar fi .la(), .addPause () metoda este scrisă în mod similar și acceptă argumente care pot fi transmise în paranteze. Dacă nu sunteți familiarizați cu metodele, atunci mergeți la celălalt articol din GreenSock concentrat pe explorarea mecanicii GSAP și voi aștepta aici pentru întoarcere.
timeline.addPause (2);
Adăugarea codului de mai sus va întrerupe animația exact la marca de 2 secunde a liniei de timp. Dacă nu sunteți sigur ce este o cronologie și cum să instanțiați unul, atunci ar trebui să citiți un articol anterior pe care l-am scris începând cu TimelineMax.
De asemenea, puteți introduce o pauză în legătură cu etichetele. Dacă ați citit de-a lungul timpului, s-ar putea să vă amintiți că am vorbit despre etichete din articolul mecanic.
timeline.addPause ( "yourLabel");
Acum când cronologia dvs. întâlnește eticheta "dvs.Label", o pauză va fi inserată la "dvs.Label".
Acest exemplu va introduce o pauză de 3 secunde după "dvs.Label" și, atunci când are loc această pauză, un apel către yourFunction va avea loc.
Accentsconagua
timeline.addPause ("yourLabel + = 3", funcția dvs.);Dacă doriți să introduceți o pauză exact la 4 secunde, sunați apoi yourFunction, treceți-i doi parametri, param1 și param2 și în cele din urmă se leagă domeniul de aplicare actual la apel invers, puteți face acest lucru așa:
timeline.addPause (4, funcția dvs., ["param1", "param2"], acest lucru);
Iată câteva exemple amuzante pentru a vă face pauzele de inserare a picioarelor umede pentru o cronologie. Provocarea pentru dvs. este de a lua fiecare abordare pe care am menționat-o anterior și de a încerca să le implementați singuri.
A începe aici un exemplu extraordinar, bazat pe un demo de la Carl Schoof, care explică o abordare liniară și o reprezentare perfectă a utilizării tipice cu addPause () metoda de control.
O utilizare tipică a addPause () este de a rupe o experiență liniară în mai multe secțiuni:
De fiecare dată când atingi Următor → butonul de timp va Joaca() până când va ajunge în următorul addPause () punct.
Iată un demo pe care l-am numit "Bubble Emitter" pentru a experimenta mai mult cu inserții de pauză la dispoziția dumneavoastră. Apasă-l!
Pe linia 90 a panoului JavaScript căutați această linie comentată:
createBubbles (cada) .addPause (0,25);
Dezactivați acest lucru și interacționați cu demo-ul pentru a vedea addPause metoda are loc în timpul redării animației. Aluzie: animația va întrerupe 0.25 secunde în secvența de animație.
Am mai lăsat câteva comentarii în această demonstrație (datorită ajutorului lui Jack Doyle), explicând cum să facă acest efect și mai performant!
Această demonstrație SVG de către Chris Gannon este un exemplu minunat prezentând pluginul DrawSVG și este grozav pentru explorarea addPause. Puteți utiliza, de asemenea addPause pentru a descoperi fiecare dintre mișcările pe care Chris le folosește pentru a face ca acest efect să vină la viață.
Încercați să adăugați acest fragment la linia 26 a panoului JavaScript al demo-ului.
.addPause ()
După cum am menționat anterior, demonstrația lui Chris folosește pluginul drawSVG pe care l-am analizat într-un articol anterior. Pentru cei care nu sunt familiarizați, DrawSVG este un plugin deosebit de util pentru a ajuta la animarea accidentelor grave ale unui SVG și vă încurajez foarte mult să îl explorați mai mult când aveți timp.
Doar pentru ca lucrurile lui Chris sunt atat de bune, ce zici de a adauga cateva pauze la un alt demo? Acest lucru este perfect:
Dacă ștergeți acest demo, ștergeți toate JavaScript pe care Chris le-a scris, veți vedea întregul SVG și modul în care a folosit pluginul DrawSVG pentru a crea această secvență.
Acesta este graficul SVGPentru a începe experimentul, adăugați fragmentul următor la linia 60 a panoului JavaScript din demonstrația CodePen:
tl.addPause (1,15);
Ați observat că animația întrerupe la 1,15 secunde mișcarea? Destul de cool?
Acum, pentru următorul truc. Înlocuiți liniile 44-47 cu următoarele, pentru a adăuga o etichetă pe cronologie:
.la (arcade, 2, drawSVG: '0% -5%', ușurință: Linear.easeNone) add ('archesLabel')Cu codul de mai sus, adăugați fragmentul următor în jurul liniei 60 pentru a finaliza experimentul nostru. Urmăriți pauza de animație exact la "archesLabel" pe care l-am definit anterior.
tl.addPause ( 'archesLabel')
După ce ați acoperit metoda addPause () și ați jucat cu ea pe un număr de demonstrații, este timpul să vedeți dacă o puteți aplica. Învățarea modului de a face un simplu buton de redare / pauză pentru a controla orice animație GSAP (tweens sau timeline) poate fi destul de utilă, mai ales atunci când încercați să învățați o anumită / abordare și / sau tehnică.
În videoclipul de mai jos, Carl Schoff trece prin elementele de bază și explică cum se face butonul de comutare în demo.
În următoarea noastră aventură GreenSock, vom afla ce este mai bun! Vom investiga ce este calea Bezier și căutați prin demonstrații de exemplu cum să animați de-a lungul unei căi Bezier. Până la data viitoare fericită animație!
