Share
I den här handledningen lär vi dig hur du kontrollerar animationer, på begäran, med hjälp av en metod som heter addPause (). Redo? Ange? ... liten paus ... Låt oss gå!
De addPause () Metod är en kontrollmetod som gör det möjligt för utvecklare att placera en paus var som helst på deras tidslinje. Det är mycket mer precist än att använda en återuppringningsfunktion som pausar en annan funktion (något som var nödvändigt före addPause () existerande).
Denna kontrollmetod kan också infoga en särskild återuppringning som pausar uppspelning av tidslinjen vid en viss tidstämpel eller etikett. Om du gör det hjälper du till att om det virtuella spelhuvudet flyttas något bortom pauspositionen, kommer det att flyttas tillbaka till den exakta platsen.
Syntaxen för addPause är rakt framåt. Precis som vi skriver andra metoder som .till(), de .addPause () Metoden skrivs på samma sätt och accepterar argument som kan passeras inuti parenteserna. Om du inte är bekant med metoder går du vidare till min andra GreenSock-fokuserade artikel som utforskar GSAPs mekanik och jag väntar här för din återkomst.
timeline.addPause (2);
Om du lägger till koden ovan pausar din animering exakt vid tidslinjens 2 sekunders markering. Om du är osäker på vad en tidslinje är och hur man instanserar en då bör du läsa en tidigare artikel som jag skrev om från början med TimelineMax.
Du kan också infoga en paus i förhållande till etiketter. Om du har läst tillsammans kan du komma ihåg att vi talade om etiketter tillbaka i mekanikartikeln.
timeline.addPause ( "yourLabel");
Nu när din tidslinje möter etiketten "yourLabel" läggs en paus i "yourLabel."
I det här exemplet lägger du in en paus 3 sekunder efter "yourLabel" och, när den pausen inträffar, ett samtal till yourFunction kommer att äga rum.
Accentsconagua
timeline.addPause ("yourLabel + = 3", yourFunction);Om du vill lägga in en paus på exakt 4 sekunder, ring då yourFunction, ge det två parametrar, param1 och param2 och slutligen binda nuvarande räckvidd till återkallelsen, det kan du göra så här:
tidslinje.addPaus (4, yourFunction, ["param1", "param2"], detta);
Här är några roliga exempel för att få dina fötter våta att införa pauser för en tidslinje. Utmaningen för dig är att ta varje tillvägagångssätt som jag tidigare nämnde och försök att genomföra dem själv.
Att börja här är ett bra exempel, baserat på en demo från Carl Schoof, som förklarar ett linjärt tillvägagångssätt och en perfekt representation av typisk användning med addPause () kontroll metod.
En typisk användning av addPause () är att bryta upp en linjär upplevelse i flera sektioner:
Varje gång du träffar Nästa knacka tidslinjen kommer spela() tills den träffar nästa addPause () punkt.
Här är en demo som jag kallade "Bubble Emitter" för att experimentera mer med pausinsättningar vid din fritid. Klicka på det!
På rad 90 i JavaScript-panelen letar du efter den här kommenterade raden:
createBubbles (kar) .addPause (0,25);
Oöverträffad detta och interagera med demo för att se addPause Metoden sker under animationens uppspelning. Ledtråd: animationen pausar 0,25 sekunder i animationssekvensen.
Jag har också lämnat några kommentarer i denna demo (tack vare Jack Doyle's hjälp) förklarar hur man gör denna effekt ännu mer prestanda!
Denna SVG-demo av Chris Gannon är ett fantastiskt exempel som visar DrawSVG-plugin och är utmärkt för att utforska addPause. Du kan också använda addPause för att upptäcka alla de motioner som Chris sysslar med för att få effekten till liv.
Prova att lägga till det här snippet till rad 26 i demoens JavaScript-panel.
.addPause ()
Som jag tidigare nämnde har Chris demo använt drawSVG-plugin som vi tittade på i en tidigare artikel. För de som inte är bekanta är DrawSVG ett särskilt användbart plugin för att hjälpa till att animera slag av en SVG och jag uppmanar dig starkt att utforska det när du har tid.
Helt enkelt för att Chris 'grejer är så bra, hur är det med att vi lägger till några pauser till en annan av hans demonstrationer? Den här är perfekt:
Om du gafflar denna demo, radera sedan alla JavaScript Chris har skrivit, så får du se hela SVG och hur han använde DrawSVG-plugin för att skapa denna sekvens.
Detta är SVG-grafikenFör att starta vårt experiment lägger du till följande kod i rad 60 i JavaScript-panelen i CodePen-demo:
tl.addPause (1,15);
Visste du att animationen pausade vid 1,15 sekunder i rörelsen? Ganska cool va?
Nu för nästa knep. Byt ut linjerna 44-47 med följande, för att lägga till en etikett på tidslinjen:
.till (bågar, 2, drawSVG: '0% -5%', lätthet: Linear.easeNone). add ('archesLabel')Med koden ovan på plats lägger du till följande utdrag runt rad 60 för att slutföra vårt experiment. Titta på animations pausen exakt på "archesLabel" som vi definierade tidigare.
tl.addPause ( 'archesLabel')
Efter att ha täckt metoden addPause () och spelat med sig på ett antal demos är det dags att se om du kan tillämpa det. Att lära dig hur man gör en enkel uppspelningsknapp för att styra någon GSAP-animering (tweens eller tidslinjer) kan vara ganska praktisk, särskilt när du försöker lära dig en viss / tillvägagångssätt och / eller teknik.
I videon nedan går Carl Schoff igenom grunderna och förklarar hur man gör knutpunktsknappen i demo.
I vårt nästa GreenSock-äventyr lär vi oss vad mer intressant tweening handlar om! Vi ska undersöka vad en snyggare väg är och titta igenom ett exempel på demo visar hur man kan animera längs en snyggare väg. Fram till nästa gång glad animera!
