Share
Cos'è TimelineMax? Cosa lo rende diverso dalle altre librerie GSAP (GreenSock Animation Platform)? Perché dovrei aver bisogno di TimelineMax su TimelineLite? Come faccio a capire i parametri per TimelineMax? Se ti ritrovi a porre una di queste domande, sei arrivato nel posto giusto.
Benvenuti al programma di base per una serie di Tuts + che discute di TimelineMax di GreenSock. Preparati per un'esplosiva serie di piegamenti della mente per aiutarti a trasformarti in un professionista dell'animazione.
TimelineMax è uno strumento di sequenziamento JavaScript che funge da contenitore per le interpolazioni e altre timeline, rendendo più facile controllarle nel loro insieme e gestirne con precisione i tempi. TimelineMax fornisce metodi per consentire l'accesso a molteplici aspetti della tua animazione. Può anche regolare dinamicamente la velocità di una timeline in fase di esecuzione, oltre a molto, molto altro.
Nota: interpolazione è un'abbreviazione di Inbetweening; creare frame tra stati inuna sequenza di animazione.
TimelineMax estende TimelineLite, offrendo esattamente la stessa funzionalità insieme a funzionalità aggiuntive (ma non essenziali) come:
Accentsconagua
ripetererepeatDelayyoyocurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()getActive () TimelineMax ti consente, come autore, il potere di fare in modo che le interpolazioni si sovrappongano alla timeline quanto desideri. Come pro dell'animazione, hai il controllo completo su dove sono posizionati i tween sulla timeline. La maggior parte degli altri strumenti di animazione può principalmente eseguire una base uno dopo l'altro sequenziamento, ma non consente alle interpolazioni di sovrapporsi. Immagina di accodare un'interpolazione che muove un oggetto e desideri che inizi a dissolversi 0,5 secondi prima della fine di tale interpolazione? Con TimelineMax è molto più pulito, oltre che estremamente robusto per rendere tutto ciò che accade.
Per comodità, plugin importanti come CSSPlugin (per la fornitura di prefissi di fornitori CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin e BezierPlugin sono tutti inclusi con TweenMax e TimelineMax. Poiché TweenMax ti fornisce TimelineMax e tutti gli altri gadget elencati in precedenza, GreenSock consiglia di utilizzare TweenMax per la maggior parte dei casi d'uso. Caricare TweenMax è più conveniente in quanto un file contiene praticamente tutto ciò di cui hai bisogno.
Per iniziare, devi ottenere lo script TweenMax e caricarlo nel tuo documento HTML precedente al tuo script di animazione personalizzato. Fortunatamente per noi CDNJS ha una copia disponibile per noi (ce n'è anche una su GitHub).
TimelineMax consente opzioni di configurazione personalizzate tramite l'uso di un oggetto letterale. Esploriamo come appare.
TimelineMax (vars: )
La parte che vedi usando il parentesi graffe è l'oggetto letterale che manterrà la nostra configurazione. Questo significa che possiamo inserire Key: Value accoppiamenti all'interno di queste parentesi per definire come si comporterà la nostra sequenza temporale. L'intera linea TimelineMax (vars: ) è ciò che viene definito nei documenti TimelineMax come "Costruttore".
Ecco l'intera configurazione di TimelineMax con ogni chiave, dato il suo valore predefinito. Posizionalo nella parte superiore del tuo file di animazione JavaScript (che abbiamo chiamato "my-timelinemax-animation.js" nel nostro esempio sopra). Stiamo solo elencando l'intera configurazione in modo da poter vedere la varietà di opzioni di configurazione offerte da TimelineMax. In genere l'oggetto di configurazione conterrà solo le proprietà necessarie per le regolazioni. Puoi leggere ulteriori informazioni su queste opzioni nella documentazione di TimelineMax.
var tmax_options = delay: 0, pause: false, onComplete: function () console.log ('animation is complete'); , onCompleteScope: , tweens: [], scaglionare: 0, allineare: 'normal', useFrames: false, onStart: function () console.log ('all'avvio chiama'); , 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: [] ]; Ora che hai configurato la configurazione e comprendi le sue opzioni, puoi passare la configurazione letterale dell'oggetto personalizzato al file TimelineMax () costruttore, quindi aggiungi quanto segue alla fine del tuo file:
var tmax_tl = new TimelineMax (tmax_options);
Le Tween sono create usando metodi come a(), a partire dal() e staggerFrom () solo per citarne alcuni. Come visto in precedenza, abbiamo preso l'oggetto options e lo abbiamo passato come argomento al costruttore TimelineMax. Ora avremo bisogno di spostare alcuni oggetti per bagnarci i piedi. Per semplicità spostiamo due cerchi da sinistra e dall'alto del viewport:
Controlla il JS scheda nell'esempio sopra per vedere come viene raggiunto l'effetto. Come notato in precedenza, ho impostato il costruttore TimelineMax per la scena sopra e passato nel letterale dell'oggetto contenente le opzioni della timeline:
var tl = new TimelineMax (tmax_options)
Ogni cerchio contiene un id per farmi riferimento da:
var tl = new TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# circle-bottom'); e poi il a() il metodo è usato per controllare l'interpolazione.
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Entro a() stiamo effettivamente dicendo "usa l'elemento che è passato come primo argomento e spostalo da 100 px a sinistra. Quindi utilizzare il a() metodo incatenato dopo il nostro primo a() metodo per fare lo stesso, ma spostare quell'elemento dall'alto 100 px. "
Prendi nota che il cerchio che si muove dall'alto viene attivato una volta che il cerchio si sposta da sinistra completato il suo movimento (interpolazione). Impareremo nei prossimi tutorial come controllare gli elementi in tempi diversi e accelerare lungo la timeline usando il posizione parametro.
Se desideri fare un salto in avanti in questo viaggio di animazione, non esitare a visitare la documentazione introduttiva di GreenSock. Rimanete sintonizzati per il prossimo della serie di questa avventura di animazione in cui copro cose come etichette, offset, pause, argomenti e apprendendo come modificare le opzioni su undici. Fino alla prossima volta!
