Share
Cosa starai creandoPronto per alcune definizioni? Meccanica è definito come un'area interessata dal comportamento di oggetti soggetti a forze o spostamenti e gli effetti successivi di tali oggetti sul loro ambiente. UN sequenza temporale è un modo di visualizzare un elenco di eventi in ordine cronologico, talvolta descritto come un artefatto del progetto. Poniamo un ponte tra le due aree per imparare come controllare e configurare le nostre animazioni come se effettivamente sapessimo cosa stiamo facendo.
Altre definizioni in arrivo: il termine sintassi si riferisce direttamente alle regole e ai principi che governano la struttura. Come abbiamo discusso nel tutorial precedente, la sintassi JavaScript per configurare un'animazione TimelineMax è la seguente:
var config = ; var tmax_tl = new TimelineMax (config);
Qui ho definito una nuova timeline usando il TimelineMax () costruttore e passato il config oggetto come argomento. Questo argomento, se si ricorda, è ciò che viene definito come un "oggetto letterale" contenente Key: Value abbinamenti relativi alle nostre impostazioni di configurazione. Il TimelineMax () il costruttore è ciò che viene utilizzato per creare un'istanza di una nuova istanza di TimelineMax.
Tieni presente che man mano che ti abitui alla sintassi, le seguenti righe sono le stesse; il che significa che entrambi sono identici (l'ultima riga è intesa per comodità).
tmax_tl.add (TweenLite.to (element, 1, left: 100, opacity: 0.5)); tmax_tl.to (element, 1, left: 100, opacity: 0.5);
Se sei come me è improbabile che ti ricordi tutti i parametri accettati per le opzioni di configurazione di TimelineMax. Fortunatamente, un elenco completo di opzioni e proprietà di configurazione può essere trovato qui per riferimento.
Oltre alla configurazione attuale, la nostra timeline ha anche proprietà disponibili. Ad esempio, se ho scritto quanto segue:
var config = repeat: -1, delay: 1, repeatDelay: 0; var tmax_tl = new TimelineMax (config); console.log (tmax_tl.vars);
la console avrebbe registrato l'intero config variabile (rappresentata da tmax_tl.vars) come oggetto e permettimi di ispezionare ogni chiave / valore che è stato impostato. C'è un intero elenco di proprietà disponibili per la tua timeline che puoi immergerti qui per ulteriori esplorazioni.
Solo per divertimento, provalo e poi ispeziona l'output dalla tua console DevTools:
console.log (tmax_tl.timeline);
Dovresti vedere un output simile allo screenshot seguente:
Prova a segnalare questa proprietà successiva nella console e osserva come la tua mente viene distrutta (la console dovrebbe riportare un valore numerico):
console.log (tl.timeline._timeScale);
Il vero segreto per costruire sequenze animate sorprendenti con tempistiche precise è la comprensione del parametro di posizione. Questo parametro super-flessibile controlla il posizionamento di interpolazioni, etichette, callback, pause e persino timeline annidate, quindi potrai posizionare qualsiasi cosa, ovunque e in qualsiasi sequenza!
Ad esempio, se osserviamo il seguente codice, vedremo che il parametro position è l'ultimo argomento per il a() metodo.
tmax_tl.to (destinazione, durata, vars, posizione)
Ecco un esempio di come tutto ciò sembra. Presta molta attenzione ai commenti che spiegano come l'argomento di posizione allinea la sequenza. Stiamo anche ponendo i metodi uno dopo l'altro: a cosa si fa riferimento concatenamento.
tmax_tl.to (elemento, 1, x: 200) .to (elemento, 1, y: 200, '+ = 1') // 1 secondo dopo la fine della precedente a () interpolazione .to (elemento, 1, rotation: 360, '- = 0.5') // 0.5 secondi prima della fine della precedente a () interpolazione .to (elemento, 1, scala: 4, 6); // Esattamente 6 secondi dall'inizio della timeline
Puoi pensare all'argomento position come modo per controllare il posizionamento di un'interpolazione sulla timeline (per impostazione predefinita, è la fine della timeline e viene rappresentata come '+ = 0'). Utilizzare un numero per indicare un tempo assoluto in termini di secondi. I prefissi come '+ =' o '- =' aiuta a compensare il punto di inserimento relativo al fine della timeline. Per esempio, '+ = 2' posizionerebbe l'interpolazione due secondi dopo la fine, lasciando uno spazio di due secondi.
Quando hai finito, invia il link CodePen a @greensock in modo che possano farti sentire davvero speciale.
Puoi pensare alle etichette come a un modo per inserire i marcatori nella tua animazione in modo da poter fare riferimento a punti precisi più avanti nella sequenza. Questo potrebbe essere un punto in cui #objectX muove 100px dall'alto poi #objectY ha un'interazione sovrapposta di 0,5 secondi nel #objectX sequenza.
Quando si utilizzano le etichette, assicurarsi di utilizzare un valore stringa per specificare dove deve essere posizionata un'interpolazione e includere l'argomento del timing posizione per controllare il punto di esecuzione.
Accentsconagua
// le interpolazioni sono inserite e relative alla posizione di una etichetta var tmax_tl = new TimelineMax (); tmax_tl.to ('# verde', 1, x: 750) // Aggiungi l'etichetta blueGreenSpin 1 secondo dopo la fine della sequenza verde ... aggiungi ('blueGreenSpin', '+ = 1') .to ('# blue' , 2, x: 750, rotazione: 360, 'blueGreenSpin') // Aggiungi interpolazione sull'etichetta blueGreenSpin .to ('# orange', 2, x: 750, rotazione: 360, 'blueGreenSpin + = 0.5') ; // Inserisci interpolazione 0,5 secondi dopo l'etichetta blueGreenSpin Nota: Molti metodi portano zero come valore predefinito per l'argomento position ('+ = 0').
Se definisci un'etichetta che non esiste ancora, verrà automaticamente aggiunta alla fine della timeline prima di inserire un'interpolazione che può essere abbastanza comoda.
metodi sono ciò che aiuta a realizzare lo scopo delle nostre azioni desiderate, o in altre parole, l'azione che vorremmo accadesse per ciascuna sequenza sulla nostra timeline.
Solo per motivi di scienza, scriviamo un metodo che prende un singolo oggetto con un id di #objectA e fallo spostare sul lato destro dello schermo. Ecco come apparirebbe usando il metodo to ():
/ * .to (destinazione: [Oggetto || Array], durata: Number, vars: Object, posizione: *) * / tmax_tl.to ($ ('# objectA'), 1, left: '100px') ; La cosa importante da notare in base al codice sopra è il fatto che avremo anche bisogno dell'aiuto di CSS (position: absolute) per eseguire la nostra richiesta (spostamento dell'oggetto). Ricorda che gli elementi nel web land hanno una posizione statica, il che significa che se desideri spostare un oggetto usando l'approccio sopra, dovrai assicurarti che le corrispondenti proprietà CSS siano a posto, altrimenti non accadrà nulla.
È ora che tu abbia qualcos'altro da sezionare, non credi?
La seguente demo usa il a() metodo per controllare ogni cerchio di un caricatore (si potrebbe usare un approccio più semplice, ma c'è un punto in questa follia). Cerca di far barcollare i cerchi esterni e il cerchio centrale nel loro movimento usando l'argomento del tempo di posizione. Il punto dell'esercizio è capire visivamente come il parametro di posizione consente la sovrapposizione delle interpolazioni durante la sequenza. Come puoi vedere nel seguito .gif il tween di ogni cerchio si attiva allo stesso tempo. Prova a dare a questa animazione delle spezie sovrapponendo la sequenza come hai visto nella gif animata usata per l'introduzione di questo post. Buona fortuna, facci sapere come vai!
// Ultimo argomento è la temporizzazione della posizione. // Usa questo argomento per scaglionare la visibilità dei cerchi circostanti tmax_tl.to ($ ('svg> circle: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-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) .per ($ ('svg> circle: nth-of-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (7)'), 1, tween_options_to, 0) 
Guarda la penna, forchetta e scherza con i tempi Come sempre, se desideri fare un salto in avanti in questo viaggio di animazione, non esitare a consultare la documentazione di GreenSock, leggendo in modo specifico su TweenLite e TweenMax. Restate sintonizzati per la prossima puntata di questa serie che copre il meraviglioso mondo del tweening! spero di rivederti presto!
