Share
Vad du ska skapaKlar för vissa definitioner? Mekanik definieras som ett område som berör beteendet hos föremål som utsätts för krafter eller förskjutningar, och de efterföljande effekterna av dessa föremål på deras omgivning. en tidslinje är ett sätt att visa en lista över händelser i kronologisk ordning, ibland beskrivet som en projektartefakt. Låt oss överbrygga de två områdena för att lära oss att kontrollera och konfigurera våra animationer som om vi faktiskt vet vad vi gör.
Mer definitioner kommer: termen syntax hänvisar direkt till de regler och principer som styr strukturen. Som vi diskuterade i vår tidigare handledning är JavaScript-syntaxen för att konfigurera en TimelineMax-animering som följer:
var config = ; var tmax_tl = ny TimelineMax (config);
Här har jag definierat en ny tidslinje med TimelineMax () konstruktör och passerade config objekt som ett argument. Detta argument, om du kommer ihåg, är det som kallas "ett objekt objektivt" innehållande nyckelvärde parningar relaterade till våra konfigurationsinställningar. De TimelineMax () konstruktör är vad som används för att inställa en ny TimelineMax-förekomst.
Kom ihåg när du är van vid syntaxen, är följande rader densamma; vilket betyder att båda är identiska (den sista raden är avsett för bekvämlighet).
tmax_tl.add (TweenLite.to (element, 1, vänster: 100, opacitet: 0,5)); tmax_tl.to (element, 1, vänster: 100, opacitet: 0,5);
Om du är något som jag är det osannolikt kommer du att komma ihåg alla parametrar som accepteras för konfigurationsalternativen TimelineMax. Lyckligtvis kan en fullständig lista med konfigurationsalternativ och egenskaper hittas här som referens.
Förutom den faktiska konfigurationen har vår tidslinje också egenskaper. Till exempel om jag skrev följande:
var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = ny TimelineMax (config); console.log (tmax_tl.vars);
konsolen skulle logga hela config variabel (representerad av tmax_tl.vars) som ett objekt och tillåter mig att inspektera varje nyckel / värde som har ställts in. Det finns en hel lista över egenskaper som är tillgängliga för din tidslinje som du kan dyka in här för vidare utforskning.
Bara för skojs skull, försök med det här och kontrollera inspelningen från din DevTools-konsol:
console.log (tmax_tl.timeline);
Du bör se en liknande utmatning till följande skärmdump:
Prova att rapportera den här nästa egenskapen i konsolen och se till att ditt sinne blåses (konsolen ska rapportera ett numeriskt värde):
console.log (tl.timeline._timeScale);
Den verkliga hemligheten att bygga fantastiska animationssekvenser med exakt timing är att förstå positionsparametern. Den här super-flexibla parametern styr placeringen av tweens, etiketter, återuppringningar, pausar och till och med kapslade tidslinjer, så att du kan placera någonting, var som helst och i vilken sekvens som helst!
Om vi till exempel tittar på följande kod ser du att positionsparametern är det sista argumentet för till() metod.
tmax_tl.to (mål, duration, vars, position)
Här är ett exempel på hur allt ser ut. Var noga med kommentarerna som förklarar hur positionsargumentet leder upp sekvensen. Vi lägger också metoder efter varandra: vad kallas chaining.
tmax_tl.to (element, 1, x: 200) .to (element, 1, y: 200, '+ = 1') // 1 sekund efter slutet av föregående till 1, rotation: 360, '- = 0,5') // 0,5 sekunder före slutet av föregående till () tween .to (element, 1, skala: 4, 6); // Exakt 6 sekunder från början av tidslinjen
Du kan tänka på positionsargumentet som ett sätt att styra placeringen av en tween på tidslinjen (som standard är det slutet på tidslinjen och representeras som '^ = 0'). Använd ett nummer för att ange en absolut tid i sekunder. Prefixen som '^ =' eller '- =' bidra till att kompensera införingspunkten i förhållande till slutet av tidslinjen. Till exempel, '^ = 2' skulle placera intervallet två sekunder efter slutet, lämnar ett gap på två sekunder.
När du är klar, tweet CodePen-länken till @greensock så att de kan få dig att känna dig extra speciell.
Du kan tänka på etiketter som ett sätt att infoga markörer i din animering så att du kan referera till exakta punkter senare i sekvensen. Detta kan vara en punkt där #objectX flyttar 100px från toppen då #objectY har en överlappande interaktion 0,5 sekunder in i #objectX sekvens.
När du använder etiketter, se till att du använder ett strängvärde för att ange var en tween ska placeras och inkludera positionstidsargumentet för att styra utföringspunkten.
Accentsconagua
// tweens infogas vid och i förhållande till en etiketts position var tmax_tl = ny TimelineMax (); tmax_tl.to ('# green', 1, x: 750) // Lägg till blueGreenSpin-etiketten 1 sekund efter slutet av den gröna sekvensen ... lägg till ('blueGreenSpin', '+ = 1') .to ('# blue' , 2, x: 750, rotation: 360, 'blueGreenSpin') // Lägg till tween på blueGreenSpin-etiketten .to ('# orange', 2, x: 750, rotation: 360, 'blueGreenSpin + = 0.5') ; // Sätt in mellan 0,5 sekunder efter blueGreenSpin-etiketten Notera: De flesta metoder har noll som standardvärde för positionsargumentet ('^ = 0').
Om du definierar en etikett som inte existerar kommer den automatiskt att läggas till slutet av tidslinjen innan du sätter in den mellan vilken det kan vara ganska bekvämt.
metoder är det som hjälper till att utföra syftet med vår önskade åtgärd (er), eller med andra ord, den åtgärd vi skulle vilja hända för varje sekvens på vår tidslinje.
Bara för vetenskapens skull, låt oss skriva en metod som tar ett enda objekt med ett ID på #objectA och gör det flytta till höger om skärmen. Så här skulle det se ut med metoden to ():
/ * .to (mål: [Objekt || Array], varaktighet: Nummer, vars: Objekt, position: *) * / tmax_tl.to ($ ('# objectA'), 1, vänster: '100px') ; Viktigt att notera baserat på koden ovan är att vi också behöver hjälp av CSS (position: absolute) för att utföra vår begäran (flytta objektet). Kom ihåg att element i webbland har en statisk position, vilket betyder att om du vill flytta ett objekt med ovanstående synsätt måste du se till att motsvarande CSS-egenskaper är på plats, annars kommer inget att hända.
Det är hög tid att du hade något annat att dissekera, tror du inte?
Följande demo använder till() Metod för att styra varje krets av en lastare (du kan använda ett enklare tillvägagångssätt, men det finns en punkt på den här galningen). Försök att göra de yttre cirklarna och mittencirkeln stagger i sin rörelse med hjälp av positionstidsargumentet. Poängen med övningen är att visuellt förstå hur positionsparametern tillåter överlappning av dina tweens under sekvensen. Som du kan se i följande .gif bränder varje cirkels intervall på exakt samma tidpunkt. Prova och ge denna animering lite krydda genom att överlappa sekvensen som du såg i det animerade gifet som användes för inträdet av detta inlägg. Lycka till, låt oss veta hur du går vidare!
// Senaste argumentet är Position Timing. // Använd det här argumentet för att häva synligheten för omgivande cirklar tmax_tl.to ($ ('svg> cirkel: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (2) '), 1, tween_options_to, 0) .to ($ (' svg> cirkel: nth-of-type (3) ', 1, tween_options_to, 0) .to svg> cirkel: nth-of-type (4) '), 1, tween_options_to, 0) .to ($ (' svg> cirkel: nth-of-type (5) '), 1, tween_options_to, 0) .to ($ ('svg> cirkel: nth-of-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> cirkel: nth-of-type (7)'), 1, tween_options_to, 0) 
Se pennan, gaffel och röra med tidpunkten Som alltid, Om du skulle vilja hoppa framåt på den här animationsresan, är du välkommen att gå vidare till GreenSock-dokumentationen - läs specifikt på TweenLite och TweenMax. Håll dig klar för nästa del av denna serie som täcker den underbara världen av tweening! jag hoppas vi ses snart igen!
