Share
Hva er TimelineMax? Hva skiller det fra andre GreenSock Animation Platform (GSAP) biblioteker? Hvorfor skulle jeg trenge TimelineMax over TimelineLite? Hvordan går jeg om forståelsesparametere for TimelineMax? Hvis du finner deg selv å stille noen av disse spørsmålene, så har du kommet til rett sted.
Velkommen til grunnleggeren for en Tuts + -serie som diskuterer TimelineMax av GreenSock. Gjør deg klar for en eksplosiv, sinnsbuktende serie for å skape deg til en animasjonsprosess.
TimelineMax er et JavaScript-sekvenseringsverktøy som fungerer som en container for tweens og andre tidslinjer, noe som gjør det enklere å kontrollere dem som en helhet og presist administrere timingen deres. TimelineMax gir metoder for å tillate tilgang til flere aspekter av animasjonen. Det kan også dynamisk justere en tidslinjes hastighet ved kjøretid, pluss mye, mye mer.
Merk: tweening er en forkortelse av inbetweening; skaper rammer mellom stater ien animasjonssekvens.
TimelineMax utvider TimelineLite, og tilbyr akkurat samme funksjonalitet sammen med flere (men ikke-essensielle) funksjoner som:
Accentsconagua
gjentarepeatDelayyoyocurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()getActive () TimelineMax gir deg som forfatter muligheten til å gjøre tweens overlapping på tidslinjen så mye du vil. Som animasjonen pro, har du full kontroll over hvor tweens er plassert på tidslinjen. De fleste andre animasjonsverktøy kan primært utføre en grunnleggende den ene etter den andre sekvensering, men kan ikke tillate tweens å overlappe. Tenk deg å legge til en tween som beveger et objekt, og du vil at det skal begynne å fade ut 0,5 sekunder før slutten av den tween? Med TimelineMax er det en stor renere, pluss ekstremt robust for å gjøre alt som skjer.
For enkelhets skyld er store plugins som CSSPlugin (for å levere CSS-leverandør prefiks), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin og BezierPlugin alle inkludert i TweenMax og TimelineMax. Siden TweenMax vil gi deg TimelineMax og alle de andre godbitene som er oppført tidligere, anbefaler GreenSock at du bruker TweenMax for de fleste brukstilfeller. Lasting TweenMax er bare mer praktisk, da en fil inneholder stort sett alt du trenger.
For å starte, må du få TweenMax-skriptet og laste det inn i HTML-dokumentet ditt i forkant til ditt egendefinerte animasjonsskript. Heldig for oss CDNJS har en kopi tilgjengelig for oss (det er også en på GitHub).
TimelineMax tillater tilpassede konfigurasjonsalternativer ved bruk av et objekt bokstavelig. La oss utforske hva som ser ut.
TidslinjeMax (vars: )
Den delen du ser bruker krøllete braces er objektet bokstavelig som vil holde vår konfigurasjon. Dette betyr at vi kan sette inn nøkkel: verdi sammenkoblinger i disse braces å definere hvordan vår tidslinje vil oppføre seg. Hele linjen TidslinjeMax (vars: ) er det som refereres til i TimelineMax docs som "Constructor."
Her er hele TimelineMax config med hver tast gitt standardverdien. Plasser dette til høyre øverst på JavaScript-animasjonsfilen (som vi kalte "min-timelinemax-animation.js" i vårt eksempel ovenfor). Vi viser bare hele konfigurasjonen her, slik at du kan se forskjellige konfigurasjonsalternativer TimelineMax tilbyr. Vanligvis inneholder konfigurasjonsobjektet bare egenskapene som trengs for justeringer. Du kan lese mer om disse alternativene i dokumentasjonen for TimelineMax.
var tmax_options = delay: 0, pauset: false, onComplete: function () console.log ('animasjon er fullført'); , onCompleteScope: , tweens: [], stagger: 0, justere: 'normal', useFrames: false, onStart: funksjon () console.log ('på start kalt'); , onStartScope: , onUpdate: function () console.log ('på oppdatert kalles'); , onUpdateScope: , onRepeat: function () console.log ('på gjentatt kalles'); , onRepeatScope: , onReverseComplete: funksjon () console.log ('på baksiden fullført'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repeat: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], påReverseCompleteParams: [], onStartParams: [], onUpdateParams: [], onRepeatParams: ]; Nå som du har config på plass og forstår det er alternativer, kan du passere ditt egendefinerte objekt bokstavelig config til TimelineMax () constructor, så legg til følgende til bunnen av filen din:
var tmax_tl = ny TimelineMax (tmax_options);
Tweens er opprettet ved hjelp av metoder som til(), fra() og staggerFrom () bare for å nevne noen få. Som du så tidligere tok vi vårt alternativobjekt og bestilte det som et argument til TimelineMax-konstruktøren. Nå må vi flytte noen få objekter for å få føttene våte. For enkelhets skyld, la oss flytte to sirkler fra venstre og toppen av visningsporten:
Undersøk JS fanen i eksemplet ovenfor for å se hvordan effekten oppnås. Som nevnt tidligere har jeg satt opp TimelineMax-konstruktøren for scenen over og passert i objektet bokstavelig som inneholder tidslinjens alternativer:
var tl = ny TimelineMax (tmax_options)
Hver sirkel inneholder en id for meg å referere dem ved:
var tl = ny TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# sirkelbunn'); og deretter til() Metoden brukes for å styre tweenen.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Innenfor til() vi sier faktisk "bruk elementet som er bestått som det første argumentet og flytt det fra venstre 100px. Bruk deretter til() metode kjedet etter vår første til() metode for å gjøre det samme, men flytt det elementet fra toppen 100px. "
Legg merke til at sirkelen som beveger seg fra toppen, utløses når sirkelen beveger seg fra venstre har fullført dets bevegelse (tween). Vi lærer i kommende opplæringsprogrammer hvordan man kontrollerer elementer på forskjellige tidspunkter og hastighet langs tidslinjen ved hjelp av stilling parameter.
Hvis du ønsker å hoppe videre på denne animasjonsreisen, er du velkommen til å gå videre til GreenSock-dokumentasjonen. Hold deg innstilt for neste i serien av dette animasjonseventyret der jeg dekker ting som etiketter, offsets, pauser, argumenter og læring hvordan du kan finjustere alternativer til elleve. Til neste gang!
