Share
I denne opplæringen lærer vi hvordan du kontrollerer animasjoner, på forespørsel, ved hjelp av en metode som kalles addPause (). Klar? Sett? ... liten pause ... La oss gå!
De addPause () Metode er en kontrollmetode som tillater utviklere å plassere en pause hvor som helst på deres tidslinje. Det er langt mer presis enn å bruke en tilbakeringingsfunksjon som pause en annen funksjon (noe som var nødvendig før addPause () eksisterende).
Denne kontrollmetoden kan også sette inn et spesielt tilbakering som pause avspillingen av tidslinjen ved en bestemt tidsstempel eller etikett. Dette gjør at hvis det virtuelle spillhodet beveger seg litt utover pauseposisjonen, blir det flyttet tilbake til det nøyaktige stedet.
Syntaxen for addPause er rett fram. Akkurat som vi skriver andre metoder som .til(), de .addPause () Metoden er skrevet på samme måte og aksepterer argumenter som kan sendes inn i parentesene. Hvis du ikke er kjent med metoder, så gå videre til min andre GreenSock-fokuserte artikkel som utforsker mekanismen til GSAP, og jeg venter her for retur.
timeline.addPause (2);
Hvis du legger til koden ovenfor, stopper du animasjonen nøyaktig ved 2 sekunders mark på tidslinjen. Hvis du er usikker på hva en tidslinje er, og hvordan du instantierer en, bør du lese en tidligere artikkel jeg skrev på begynnelsen med TimelineMax.
Du kan også sette inn en pause i forhold til etiketter. Hvis du har lest sammen, kan du huske at vi snakket om etiketter tilbake i mekanikkartikkelen.
timeline.addPause ( "yourLabel");
Nå når din tidslinje møter etiketten "yourLabel", vil en pause bli satt inn på "yourLabel."
Dette eksempelet vil sette inn en pause 3 sekunder etter "yourLabel", og når den pausen oppstår, skal du ringe til yourFunction vil finne sted.
Accentsconagua
timeline.addPause ("yourLabel + = 3", dinFunksjon);Hvis du vil sette inn en pause på nøyaktig 4 sekunder, ring deretter yourFunction, pass det to parametere, param1 og param2 og til slutt binde gjeldende omfang til tilbakekallingen, kan du gjøre det slik:
timeline.addPause (4, yourFunction, ["param1", "param2"], dette);
Her er noen morsomme eksempler for å få føttene våte å sette pauser for en tidslinje. Utfordringen for deg er å ta hver tilnærming jeg tidligere har nevnt og forsøke å implementere dem selv.
For å starte her er et godt eksempel, basert på en demo fra Carl Schoof, som forklarer en lineær tilnærming og en perfekt representasjon av typisk bruk med addPause () kontrollmetode.
En typisk bruk av addPause () er å bryte opp en lineær opplevelse i flere seksjoner:
Hver gang du treffer neste knapp tidslinjen vil spille() til den treffer neste addPause () punkt.
Her er en demo jeg ringte "Bubble Emitter" for å eksperimentere mer med pauseinnsatser når du er på ferie. Trykk på det!
På linje 90 av JavaScript-panelet, se etter denne kommentaren:
createBubbles (kar) .addPause (0,25);
Uncomment dette og samhandle med demoen for å se addPause Metoden foregår under animasjonens avspilling. Hint: animasjonen vil pause 0,25 sekunder i animasjonssekvensen.
Jeg har også lagt igjen noen kommentarer i denne demoen (takket være Jack Doyles hjelp) forklarer hvordan denne effekten kan bli enda mer effektiv!
Denne SVG-demoen av Chris Gannon er et fantastisk eksempel som viser DrawSVG-pluginet og er flott for å utforske addPause. Du kan også bruke addPause for å oppdage hvert av de forslagene Chris bruker for å få effekten til liv.
Prøv å legge til denne koden til linje 26 i demoets JavaScript-panel.
.addPause ()
Som jeg tidligere nevnte, bruker Chris 'demo DrawSVG-pluginet som vi så på i en tidligere artikkel. For de som ikke er kjent, er DrawSVG et spesielt nyttig plugin for å bidra til å animere slag av en SVG, og jeg oppfordrer deg til å utforske det videre når du har tid.
Bare fordi Chris 'ting er så bra, hva med å legge til noen pauser til en annen av hans demoer? Denne er perfekt:
Hvis du gaffel denne demonstrasjonen, sletter du all JavaScript Chris har skrevet, du vil se hele SVG og hvordan han brukte DrawSVG-pluginet for å lage denne sekvensen.
Dette er SVG-grafikkenFor å starte eksperimentet legger du til følgende utdrag til linje 60 i JavaScript-panelet i CodePen-demoen:
tl.addPause (1,15);
Har du merket at animasjonen pause på 1,15 sekunder inn i bevegelsen? Ganske kul hei?
Nå for neste triks. Erstatt linjer 44-47 med følgende, for å legge til en etikett på tidslinjen:
.til (buer, 2, drawSVG: '0% -5%', brukervennlighet: Linear.easeNone). add ('archesLabel')Med koden ovenfor på plass, legg til følgende utdrag rundt linje 60 for å fullføre eksperimentet. Se animasjonspause nøyaktig på "archesLabel" som vi definerte tidligere.
tl.addPause ( 'archesLabel')
Etter å ha dekket addPause () -metoden og spilt med det på en rekke demoer, er det på tide å se om du kan bruke det. Lære å lage en enkel avspillingsknapp for å kontrollere en GSAP-animasjon (tweens eller tidslinjer) kan være ganske nyttig, spesielt når du prøver å lære en bestemt / tilnærming og / eller teknikk.
I videoen nedenfor går Carl Schoff gjennom det grunnleggende og forklarer hvordan man lager tasten i demoen.
I vårt neste GreenSock-eventyr lærer vi hva som er bedre å snakke om! Vi vil undersøke hva en finere bane er, og se gjennom et eksempel på demo som viser hvordan du kan animere langs en mer behagelig bane. Inntil neste gang lykkelig animerer!
