Share
Wat je gaat creërenKlaar voor enkele definities? Mechanica wordt gedefinieerd als een gebied dat zich bezighoudt met het gedrag van objecten die worden onderworpen aan krachten of verplaatsingen en de daaropvolgende effecten van die objecten op hun omgeving. EEN tijdlijn is een manier om een lijst met gebeurtenissen in chronologische volgorde weer te geven, soms beschreven als een projectartefact. Laten we de twee gebieden overbruggen om te leren hoe we onze animaties kunnen bedienen en configureren alsof we echt weten wat we doen.
Meer definities komen: de term syntaxis verwijst direct naar de regels en principes die de structuur bepalen. Zoals we in onze vorige zelfstudie hebben besproken, is de JavaScript-syntaxis voor het instellen van een TimelineMax-animatie als volgt:
var config = ; var tmax_tl = nieuwe TimelineMax (config);
Hier heb ik een nieuwe tijdlijn gedefinieerd met behulp van de TimelineMax () constructor en geslaagd voor de config object als een argument. Dit argument, als je het onthoudt, is wat wordt aangeduid als een "object letterlijk" bevattende sleutel waarde koppelingen met betrekking tot onze configuratie-instellingen. De TimelineMax () constructor is wat wordt gebruikt om een nieuwe TimelineMax-instantie te instantiëren.
Houd rekening met het volgende wanneer u vertrouwd raakt met de syntaxis: de volgende regels zijn hetzelfde; wat betekent dat beide identiek zijn (de laatste regel is bedoeld voor het gemak).
tmax_tl.add (TweenLite.to (element, 1, left: 100, opacity: 0.5)); tmax_tl.to (element, 1, left: 100, onacity: 0.5);
Als je op mij lijkt, is het onwaarschijnlijk dat je alle parameters zult onthouden die zijn geaccepteerd voor de configuratie-opties van Timeline Max. Gelukkig is hier een volledige lijst van configuratie-opties en eigenschappen te vinden ter referentie.
Afgezien van de feitelijke configuratie, heeft onze tijdlijn ook eigenschappen beschikbaar. Bijvoorbeeld als ik het volgende schreef:
var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = nieuwe TimelineMax (config); console.log (tmax_tl.vars);
de console zou het geheel loggen config variabele (vertegenwoordigd door tmax_tl.vars) als een object en laat ik elke sleutel / waarde inspecteren die is ingesteld. Er is een hele lijst met eigenschappen beschikbaar op uw tijdlijn waar u hier kunt duiken voor verdere verkenning.
Gewoon voor de lol, probeer het eens en inspecteer de uitvoer van je DevTools console:
console.log (tmax_tl.timeline);
Je zou een vergelijkbare uitvoer als de volgende screenshot moeten zien:
Probeer deze volgende eigenschap in de console te melden en kijk hoe je geest wordt opgeblazen (console moet een numerieke waarde rapporteren):
console.log (tl.timeline._timeScale);
Het ware geheim van het bouwen van verbazingwekkende animatiesequenties met precieze timing is het begrijpen van de positieparameter. Deze superflexibele parameter bepaalt de plaatsing van tweens, labels, callbacks, pauzes en zelfs geneste tijdlijnen, zodat u alles, overal en in elke reeks kunt plaatsen!
Als we bijvoorbeeld naar de volgende code kijken, ziet u dat de parameter position het laatste argument is voor de naar() methode.
tmax_tl.to (doel, duur, vars, positie)
Hier is een voorbeeld van hoe alles eruit ziet. Besteed veel aandacht aan de opmerkingen die uitleggen hoe het positie-argument de reeks bepaalt. We plaatsen ook de ene na de andere methode: wat wordt aangeduid als chaining.
tmax_tl.to (element, 1, x: 200) .to (element, 1, y: 200, '+ = 1') // 1 seconde na einde van vorige tot () tween .to (element, 1, rotation: 360, '- = 0.5') // 0.5 seconden vóór het einde van de vorige tot () tween .to (element, 1, scale: 4, 6); // Precies 6 seconden na het begin van de tijdlijn
U kunt het positie-argument zien als een manier om de plaatsing van een tween op de tijdlijn te regelen (standaard is dit het einde van de tijdlijn en wordt weergegeven als '+ = 0'). Gebruik een cijfer om een absolute tijd in termen van seconden aan te geven. De voorvoegsels zoals '+ =' of '- =' helpen om het invoegpunt ten opzichte van de einde van de tijdlijn. Bijvoorbeeld, '+ = 2' zou de tween twee seconden na het einde plaatsen, waardoor er een opening van twee seconden overblijft.
Als je klaar bent, tweet je de CodePen-link naar @greensock, zodat ze je extra speciaal kunnen maken.
U kunt etiketten zien als een manier om markeringen in uw animatie in te voegen, zodat u later in de reeks kunt verwijzen naar exacte punten. Dit kan een punt zijn waar #objectX beweegt dan 100px vanaf de bovenkant #objectY heeft een overlappende interactie 0,5 seconden in de #objectX volgorde.
Wanneer u labels gebruikt, moet u een tekenreekswaarde gebruiken om op te geven waar een tween moet worden geplaatst en het positietimingargument opnemen om het uitvoeringspunt te besturen.
Accentsconagua
// tweens worden ingevoegd op en relatief aan de positie van een label var tmax_tl = new TimelineMax (); tmax_tl.to ('# green', 1, x: 750) // Voeg blueGreenSpin-label toe 1 seconde na einde van de groene reeks ... add ('blueGreenSpin', '+ = 1') .to ('# blue' , 2, x: 750, rotatie: 360, 'blueGreenSpin') // Tween toevoegen bij blueGreenSpin-label .to ('# orange', 2, x: 750, rotation: 360, 'blueGreenSpin + = 0.5') ; // Voeg tween 0.5 seconden na blueGreenSpin-label in Notitie: De meeste methoden bevatten nul als standaardwaarde voor het positiege- argument ('+ = 0').
Als u een label definieert dat nog niet bestaat, wordt het automatisch aan het einde van de tijdlijn toegevoegd voordat de tween wordt ingevoegd, wat heel handig kan zijn.
methoden zijn wat helpen bij het uitvoeren van het doel van onze gewenste actie (s), of met andere woorden, de actie die we zouden willen doen voor elke reeks op onze tijdlijn.
Laten we, omwille van de wetenschap, een methode schrijven die een enkel object met een ID van neemt #objectA en laat het naar de rechterkant van het scherm gaan. Zo ziet het eruit met de methode to ():
/ * .to (doel: [Object || Array], duration: Number, vars: Object, position: *) * / tmax_tl.to ($ ('# objectA'), 1, left: '100px') ; Het belangrijke om op te merken op basis van de bovenstaande code is het feit dat we ook de hulp van CSS nodig hebben (positie: absolute) om ons verzoek uit te voeren (het object verplaatsen). Onthoud dat elementen in het web een statische positie hebben, wat betekent dat als u een object wilt verplaatsen met de bovenstaande benadering, u ervoor moet zorgen dat de overeenkomstige CSS-eigenschappen aanwezig zijn, anders gebeurt er niets.
Het wordt hoog tijd dat je iets anders hebt om te ontleden, vind je niet?
De volgende demo gebruikt de naar() methode om elke cirkel van een lader te besturen (je zou een eenvoudiger aanpak kunnen gebruiken, maar deze waanzin heeft een punt). Probeer de buitencirkels en middencirkel in hun beweging te laten verspringen met het argument voor positietiming. Het punt van de oefening is om visueel te begrijpen hoe de positieparameter overlapping van uw tweens tijdens de reeks toestaat. Zoals je kunt zien in het volgende .gif schiet elke tween van een cirkel precies op hetzelfde moment. Probeer deze animatie een beetje pit te geven door de reeks te overlappen zoals je zag in het geanimeerde gif dat werd gebruikt voor de intro van dit bericht. Veel succes, laat ons weten hoe het met je gaat!
// Laatste argument is positietiming. // Gebruik dit argument om de zichtbaarheid van omringende cirkels te spreiden tmax_tl.to ($ ('svg> circle: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-van-type (2) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (3) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (4) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (5) '), 1, tween_options_to, 0) .to ($ ('svg> cirkel: nth-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> cirkel: nth-type (7)'), 1, tween_options_to, 0) 
Zie de pen, vork het en rommel met de timing Zoals altijd, als je graag verder wilt gaan op deze animatie-reis, kun je gerust naar de GreenSock-documentatie gaan - specifiek gelezen op TweenLite en TweenMax. Blijf op de hoogte voor de volgende aflevering van deze serie over de wondere wereld van tweening! ik hoop dat ik je snel weer zie!
