Share
Hva du skal skapeKlar for noen definisjoner? mekanikk er definert som et område som er opptatt av oppførselen til gjenstander som er utsatt for krefter eller forskyvninger, og de påfølgende effektene av disse gjenstandene på deres miljø. EN tidslinje er en måte å vise en liste over hendelser i kronologisk rekkefølge, noen ganger beskrevet som en prosjektgenstand. La oss bygge bro over de to områdene for å lære å kontrollere og konfigurere animasjonene våre som om vi faktisk vet hva vi gjør.
Flere definisjoner kommer: begrepet syntaks refererer direkte til reglene og prinsippene som styrer strukturen. Som vi diskuterte i vår tidligere opplæring, er JavaScript-syntaksen for å sette opp en TimelineMax-animasjon som følger:
var config = ; var tmax_tl = ny TimelineMax (config);
Her har jeg definert en ny tidslinje ved hjelp av TimelineMax () konstruktør og bestått config objekt som et argument. Dette argumentet, hvis du husker, er det som er referert til som en "objektlig bokstavelig" som inneholder nøkkel: verdi sammenkoblinger knyttet til konfigurasjonsinnstillingene. De TimelineMax () Konstruktør er det som brukes til å instansere en ny TimelineMax-forekomst.
Husk når du blir vant til syntaksen, er følgende linjer de samme; som betyr at begge er identiske (den siste linjen er ment for enkelhets skyld).
tmax_tl.add (TweenLite.to (element, 1, left: 100, opacity: 0.5)); tmax_tl.to (element, 1, left: 100, opacity: 0.5);
Hvis du er noe som meg, er det usannsynlig at du vil huske alle parametrene som er akseptert for TimelineMax-konfigurasjonsalternativene. Heldigvis kan en fullstendig liste over konfigurasjonsalternativer og egenskaper finnes her som referanse.
Bortsett fra den faktiske konfigurasjonen, har vår tidslinje også eiendommer tilgjengelig. For eksempel, hvis jeg skrev følgende:
var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = ny TimelineMax (config); console.log (tmax_tl.vars);
konsollen ville logge hele config variabel (representert av tmax_tl.vars) som et objekt og la meg inspisere hver nøkkel / verdi som er satt. Det er en hel liste over eiendommer som er tilgjengelige for tidslinjen din, som du kan dykke inn her for videre utforskning.
Bare for moro skyld, prøv dette og kontroller utgangen fra DevTools-konsollen din:
console.log (tmax_tl.timeline);
Du bør se en lignende utgang til følgende skjermdump:
Prøv å rapportere denne neste eiendommen i konsollen og vær oppmerksom på at du blir blåst (konsollen skal rapportere en numerisk verdi):
console.log (tl.timeline._timeScale);
Den ekte hemmeligheten til å bygge fantastiske animasjons-sekvenser med presis timing er å forstå posisjonsparameteren. Denne super-fleksible parameteren styrer plasseringen av tweens, etiketter, tilbakeringinger, pauser og til og med nestede tidslinjer, slik at du kan plassere noe, hvor som helst og i hvilken som helst rekkefølge!
Hvis vi for eksempel ser på følgende kode, ser du at posisjonsparameteren er det siste argumentet for til() metode.
tmax_tl.to (mål, varighet, vars, posisjon)
Her er et eksempel på hvordan alt ser ut. Vær oppmerksom på kommentarene som forklarer hvordan stillingsargumentet retter opp sekvensen. Vi legger også metoder etter hverandre: hva er referert til som kjeding.
tmax_tl.to (element, 1, x: 200) .to (element, 1, y: 200, '+ = 1') // 1 sekund etter slutten av foregående til () tween .to 1, rotasjon: 360, '- = 0,5') // 0,5 sekunder før slutten av forrige til () tween .to (element, 1, skala: 4, 6); // Nøyaktig 6 sekunder fra begynnelsen av tidslinjen
Du kan tenke på stillingsargumentet som en måte å kontrollere plasseringen av en tween på tidslinjen (som standard er det enden av tidslinjen og representert som '* = 0'). Bruk et tall for å angi en absolutt tid i forhold til sekunder. Prefiksene som '* =' eller '- =' bidra til å kompensere innsettingspunktet i forhold til slutt av tidslinjen. For eksempel, '* = 2' ville plassere tween to sekunder etter slutten, etterlot et to-sekunders gap.
Når du er ferdig, tweet CodePen-lenken til @greensock slik at de kan få deg til å føle deg ekstra spesiell.
Du kan tenke på etiketter som en måte å sette markører inn i animasjonen, slik at du kan referere til eksakte poeng senere i sekvensen. Dette kan være et punkt hvor #objectX Flytter 100 px fra toppen da #objectY har en overlappende samhandling 0,5 sekunder inn i #objectX sekvens.
Når du bruker etiketter, sørg for å bruke en strengverdi for å angi hvor en tween skal plasseres og inkludere posisjonstidsargumentet for å kontrollere utførelsespunktet.
Accentsconagua
// tweens er satt inn på og i forhold til en etiketts posisjon var tmax_tl = ny TimelineMax (); tmax_tl.to ('# green', 1, x: 750) // Legg til blueGreenSpin-etiketten 1 sekund etter slutten av den grønne sekvensen ... legg til ('blueGreenSpin', '+ = 1') .to , 2, x: 750, rotasjon: 360, 'blueGreenSpin') // Legg til tween på blueGreenSpin-etiketten .to ('# oransje', 2, x: 750, rotasjon: 360, 'blueGreenSpin + = 0.5') ; // Sett inn mellom 0,5 sekunder etter blueGreenSpin-etiketten Merk: De fleste metoder har null som standardverdier for posisjonargumentet ('* = 0').
Hvis du definerer en etikett som ikke eksisterer ennå, blir den automatisk lagt til slutten av tidslinjen før du setter inn tweenen som kan være ganske praktisk.
metoder er det som hjelper å utføre hensikten med våre ønskede handlinger, eller med andre ord, handlingen vi ønsker å skje for hver sekvens på vår tidslinje.
Bare for vitenskapens skyld, la oss skrive en metode som tar et enkelt objekt med et ID-nummer #objectA og gjør det flytte til høyre side av skjermen. Slik ser det ut med metoden til ():
/ * .to (mål: [Objekt || Array], varighet: Nummer, vars: Objekt, posisjon: *) * / tmax_tl.to ($ ('# objectA'), 1, left: '100px') ; Det viktige å merke seg basert på koden ovenfor, er at vi også trenger hjelp av CSS (position: absolute) for å utføre vår forespørsel (flytte objektet). Husk at elementer i webland har en statisk posisjon, noe som betyr at hvis du ønsker å flytte et objekt ved hjelp av fremgangsmåten ovenfor, må du sørge for at de tilsvarende CSS-egenskapene er på plass, ellers skjer ingenting.
Det er på tide at du hadde noe annet å dissekere, tror du ikke?
Følgende demo bruker til() Metode for å kontrollere hver sirkel av en laster (du kan bruke en enklere tilnærming, men det er et poeng på denne galskapen). Forsøk å gjøre ytre sirkler og midtsirkel stagger i bevegelsen ved hjelp av stillingsjusteringsargumentet. Poenget med øvelsen er å forstå visuelt hvordan stillingsparameteren tillater overlapping av tweens i løpet av sekvensen. Som du kan se i følgende .gif brenner hver sirkels tween på nøyaktig samme tid. Prøv å gi denne animasjonen litt krydder ved å overlappe sekvensen som du så i det animerte gifet som ble brukt til innføringen av dette innlegget. Lykke til, gi oss beskjed om hvordan du går videre!
// Siste Argument er Posisjonstiming. // Bruk dette argumentet til å skjule synligheten til omkringliggende sirkler tmax_tl.to ($ ('svg> sirkel: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> nth-of-type (2) '), 1, tween_options_to, 0) .to ($ (' svg> sirkel: nth-of-type (3) '), 1, tween_options_to, 0) .to svg> sirkel: nth-of-type (5) '), 1, tween_options_to, 0) .to ($ (' svg> sirkel: nth-of-type ($ ('svg> sirkel: nth-of-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> sirkel: nth-of-type (7)'), 1, tween_options_to, 0) 
Se pennen, gaffel den og rot deg med timingen Som alltid, Hvis du ønsker å gå videre på denne animasjonsreisen, er du velkommen til å gå videre til GreenSock-dokumentasjonen - spesifikt lese på TweenLite og TweenMax. Hold deg innstilt for neste avdrag i denne serien som dekker den fantastiske verden av tweening! jeg håper jeg får se deg igjen snart!
