Share
In deze tutorial leren we hoe je animaties bestuurt, op aanvraag, met behulp van een methode genaamd addPause (). Klaar? Instellen? ... lichte stilte ... Laten we gaan!
De addPause () methode is een besturingsmethode waarmee ontwikkelaars een pauze overal op hun tijdlijn. Het is veel preciezer dan het gebruiken van een callback-functie die een andere functie pauzeert (iets dat daarvoor nodig was) addPause () bestaande).
Deze besturingsmethode kan ook een speciale callback invoegen die het afspelen van de tijdlijn op een bepaald tijdstempel of label onderbreekt. Als u dit doet, zorgt u ervoor dat de virtuele afspeelkop net iets verder dan de pauzepositie wordt verplaatst en teruggaat naar de precieze plek.
De syntaxis voor addPause is rechttoe rechtaan. Net zoals we andere methoden zoals schrijven .naar(), de .addPause () methode is op dezelfde manier geschreven en accepteert argumenten die tussen haakjes kunnen worden doorgegeven. Als je niet bekend bent met methoden, ga dan naar mijn andere GreenSock-gerichte artikel waarin de werking van GSAP wordt onderzocht en ik zal hier wachten op je terugkeer.
timeline.addPause (2);
Als je de bovenstaande code toevoegt, wordt je animatie gepauzeerd op het punt van 2 seconden op de tijdlijn. Als u niet zeker weet wat een tijdlijn is en hoe u er een instantine van maakt, moet u een eerder artikel lezen dat ik schreef over het begin met TimelineMax.
U kunt ook een pauze invoegen ten opzichte van labels. Als je hebt meegelezen, zou je je misschien kunnen herinneren dat we het hadden over labels in het artikel over mechanica.
timeline.addPause ( "yourLabel");
Wanneer uw tijdlijn nu het label "yourLabel" tegenkomt, wordt er een pauze ingevoegd bij "yourLabel".
Dit voorbeeld voegt een pauze in 3 seconden na "yourLabel" en, wanneer die pauze optreedt, een oproep naar yourFunction zal plaatsvinden.
Accentsconagua
timeline.addPause ("yourLabel + = 3", yourFunction);Als u een pauze van exact 4 seconden wilt invoegen, belt u yourFunction, geef het twee parameters door, param1 en param2 en eindelijk binden de huidige scope aan de callback, u kunt dat doen als volgt:
timeline.addPause (4, yourFunction, ["param1", "param2"], this);
Hier zijn enkele leuke voorbeelden om je voeten nat te krijgen en pauzes in te voegen voor een tijdlijn. De uitdaging voor jou is om elke benadering te nemen die ik eerder heb genoemd en deze zelf te implementeren.
Om hier te beginnen is een goed voorbeeld, gebaseerd op een demo van Carl Schoof, die een lineaire benadering en een perfecte weergave van typisch gebruik met de addPause () controle methode.
Een typisch gebruik van addPause () is om een lineaire ervaring op te delen in meerdere secties:
Elke keer dat je op volgende druk op de tijdlijn zal spelen() totdat het de volgende raakt addPause () punt.
Hier is een demo die ik "Bubble Emitter" heb gemaakt om op je gemak verder te experimenteren met pauze-invoegingen. Klik Het!
Zoek op lijn 90 van het JavaScript-paneel naar deze uitgelijnde regel:
createBubbles (bad) .addPause (0,25);
Reageer hierop en wissel de demo in om de addPause methode vindt plaats tijdens het afspelen van de animatie. wenk: de animatie pauzeert 0,25 seconden in de animatiereeks.
Ik heb ook enkele opmerkingen in deze demo achtergelaten (dankzij de hulp van Jack Doyle) waarin wordt uitgelegd hoe je dit effect nog performanter kunt maken!
Deze SVG-demo van Chris Gannon is een geweldig voorbeeld van de DrawSVG-plug-in en is geweldig om te ontdekken addPause. Je kan ook gebruiken addPause om elk van de bewegingen te ontdekken die Chris gebruikt om het effect tot leven te brengen.
Probeer dit fragment toe te voegen aan regel 26 van het JavaScript-paneel van de demo.
.addPause ()
Zoals ik eerder al zei, de demo van Chris gebruikt de drawSVG-plug-in waarnaar we in een vorig artikel hebben gekeken. Voor degenen die niet bekend zijn, is DrawSVG een bijzonder nuttige plug-in om animaties van een SVG te animeren en ik moedig je aan om deze verder te verkennen als je de tijd hebt.
Gewoon omdat Chris 'spullen zo goed zijn, wat als we wat pauzes toevoegen aan een van zijn demo's? Deze is perfect:
Als je deze demo gebruikt, wis dan alle JavaScript die Chris heeft geschreven, je ziet de hele SVG en hoe hij de DrawSVG-plug-in heeft gebruikt om deze reeks te maken.
Dit is de SVG-afbeeldingVoeg om aan ons experiment te beginnen het volgende fragment toe aan regel 60 van het JavaScript-venster van de CodePen-demo:
tl.addPause (1,15);
Is het je opgevallen dat de animatie 1,15 seconden in de beweging stopt? Best cool he?
Nu voor de volgende truc. Vervang de regels 44-47 door het volgende om een label aan de tijdlijn toe te voegen:
.to (arches, 2, drawSVG: '0% -5%', ease: Linear.easeNone). add ('archesLabel')Voeg, met de bovenstaande code, het volgende fragment toe rond regel 60 om ons experiment te voltooien. Bekijk de animatie precies op het "archesLabel" dat we eerder hebben gedefinieerd.
tl.addPause ( 'archesLabel')
Nadat je de addPause () -methode hebt besproken en ermee hebt gespeeld op een aantal demo's, is het tijd om te kijken of je het kunt toepassen. Leren hoe je een simpele play / pause-schakelknop kunt maken om elke GSAP-animatie (tweens of tijdlijnen) te besturen, kan best handig zijn, vooral als je een bepaalde / benadering en / of techniek probeert te leren.
In de video hieronder loopt Carl Schoff door de basis en legt hij uit hoe je de schakelknop in de demo kunt maken.
In ons volgende GreenSock-avontuur leren we waar bezier-tweening over gaat! We zullen onderzoeken wat een bezier-pad is en bekijken enkele voorbeeld-demo's die laten zien hoe je kunt animeren langs een bezier-pad. Tot de volgende keer vrolijk animeren!
