Share
Wat is TimelineMax? Wat maakt het anders dan andere GreenSock Animation Platform (GSAP) -bibliotheken? Waarom zou ik TimelineMax nodig hebben via TimelineLite? Hoe ga ik om met het begrijpen van parameters voor TimelineMax? Als u een van deze vragen stelt, bent u bij ons aan het juiste adres.
Welkom bij de inleiding voor een Tuts + -serie over TimelineMax van GreenSock. Maak je klaar voor een explosieve, breinbrekende serie om je te helpen je te vormen in een animatiepro.
TimelineMax is een JavaScript-sequentiëringstool die fungeert als een container voor tweens en andere tijdlijnen, waardoor het gemakkelijker wordt om ze als geheel te besturen en hun timing precies te beheren. TimelineMax biedt methoden voor toegang tot meerdere aspecten van je animatie. Het kan ook de snelheid van een tijdlijn tijdens runtime dynamisch aanpassen, plus nog veel, veel meer.
Notitie: tweening is een afkorting van Tweening; frames maken tussen staten ineen animatiereeks.
TimelineMax breidt TimelineLite uit, biedt exact dezelfde functionaliteit samen met aanvullende (maar niet-essentiële) functies zoals:
Accentsconagua
herhalingherhalingsvertragingyoyocurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()word actief() Met TimelineMax kun je, als auteur, de kracht krijgen om tweens zoveel mogelijk op de tijdlijn te laten overlappen als je wilt. Als de animatiepro heb je volledige controle over waar tweens op de tijdlijn worden geplaatst. De meeste andere animatietools kunnen primair een basis uitvoeren de een na de ander sequencing, maar kan niet toestaan dat tweens elkaar overlappen. Stel je voor dat je een tween toevoegt die een object verplaatst en dat je wilt dat het 0,5 seconde voor het einde van die tween begint uit te faden? Met TimelineMax is het een stuk schoner en bovendien zeer robuust om dat allemaal mogelijk te maken.
Gemakshalve zijn belangrijke plug-ins zoals CSSPlugin (voor het leveren van CSS-leveranciersvoorvoegsels), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin en BezierPlugin allemaal inbegrepen bij TweenMax en TimelineMax. Omdat TweenMax je TimelineMax en alle andere goodies die eerder in de lijst staan, biedt, beveelt GreenSock TweenMax aan voor de meeste gevallen. TweenMax laden is gewoon handiger omdat een bestand vrijwel alles bevat wat je nodig hebt.
Om te beginnen, moet u het TweenMax-script downloaden en het in uw HTML-document laden voorafgaand naar je aangepaste animatiescript. Gelukkig voor ons CDNJS heeft een exemplaar beschikbaar voor ons (er is er ook een op GitHub).
TimelineMax maakt aangepaste configuratie-opties mogelijk door het gebruik van een letterlijk object. Laten we eens kijken hoe dat eruit ziet.
TijdlijnMax (vars: )
Het gedeelte dat u ziet met behulp van de accolades is het letterlijke object dat onze configuratie zal behouden. Dit betekent dat we kunnen invoegen sleutel waarde koppels binnen die accolades om te definiëren hoe onze tijdlijn zich zal gedragen. De hele lijn TijdlijnMax (vars: ) is waarnaar in de TijdlijnMax-documenten wordt verwezen als de 'Constructor'.
Dit is de volledige TimelineMax-configuratie waarbij elke sleutel de standaardwaarde heeft. Plaats dit rechtsboven in je JavaScript-animatiebestand (dat we in mijn voorbeeld 'my-timelinemax-animation.js' noemden). We geven hier alleen de volledige configuratie op, zodat u de verscheidenheid aan configuratieopties van TimelineMax kunt zien. Gewoonlijk bevat uw configuratieobject alleen de eigenschappen die nodig zijn voor aanpassingen. U kunt meer over deze opties lezen in de TimelineMax-documentatie.
var tmax_options = delay: 0, paused: false, onComplete: function () console.log ('animatie is voltooid'); , onCompleteScope: , tweens: [], stagger: 0, align: 'normal', useFrames: false, onStart: function () console.log ('on start called'); , onStartScope: , onUpdate: function () console.log ('on update called'); , onUpdateScope: , onRepeat: function () console.log ('on repeat called'); , onRepeatScope: , onReverseComplete: function () console.log ('on reverse complete'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repeat: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], onReverseCompleteParams: [], onStartParams: [], onUpdateParams: [], onRepeatParams: [ ]; Nu u de config op zijn plaats hebt en de opties ervan begrijpt, kunt u de letterlijke configuratie van uw aangepaste object doorgeven aan de TimelineMax () constructor, dus voeg het volgende toe aan de onderkant van uw bestand:
var tmax_tl = nieuwe TijdlijnMax (tmax_options);
Tweens worden gemaakt met behulp van methoden zoals naar(), van() en staggerFrom () om er een paar te noemen. Zoals je eerder hebt gezien, hebben we ons optieobject genomen en het als argument doorgegeven aan de TimelineMax-constructor. Nu moeten we een paar voorwerpen verplaatsen om onze voeten nat te maken. Laten we omwille van de eenvoud twee cirkels van links en de bovenkant van de viewport verplaatsen:
Controleer de JS in het bovenstaande voorbeeld om te zien hoe het effect wordt bereikt. Zoals eerder opgemerkt, heb ik de TimelineMax-constructor voor bovenstaande scène ingesteld en het letterlijke voorwerp doorgegeven met de opties van de tijdlijn:
var tl = new TimelineMax (tmax_options)
Elke cirkel bevat een ID kaart voor mij om ernaar te verwijzen door:
var tl = new TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# circle-bottom'); en dan de naar() methode wordt gebruikt om de tween te besturen.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Binnen naar() we zeggen in feite "gebruik het element dat is doorgegeven als het eerste argument en verplaats het van de linker 100px. Gebruik dan de naar() methode geketend na onze eerste naar() methode om hetzelfde te doen, maar verplaats dat element van de top 100px. "
Houd er rekening mee dat de cirkel die van de bovenkant beweegt, wordt geactiveerd zodra de cirkel die van links naar links beweegt, wordt geactiveerd voltooid zijn beweging (tween). We zullen in komende tutorials leren hoe elementen op verschillende tijdstippen en snelheden langs de tijdlijn kunnen worden bestuurd met behulp van de positie parameter.
Als je graag op deze animatie-reis wilt springen, kun je gerust naar de GreenSock-documentatie voor beginners gaan. Blijf op de hoogte voor de volgende in de reeks van dit animatie-avontuur waarin ik dingen als labels, offsets, pauzes, argumenten bespreek en leer hoe ik opties kan aanpassen tot elf. Tot de volgende keer!
