Share
Cosa starai creandoNei tempi antichi dell'animazione interpolazione era un termine usato per descrivere una sequenza fotogramma per fotogramma, o quello che a volte viene definito "in-intermediario". È quel luogo in cui un singolo movimento conduce al successivo per creare un movimento fluido. Per quelli che hanno i capelli grigi potresti ricordare Flash; un'applicazione che usa questo termine quando si riferisce ai movimenti del telaio. Diamo uno sguardo penetrante ad alcuni esempi e diamo a questa lezione di danza un buon college alla moda.
Per entrambi gli esempi in questo tutorial caricherò TweenMax.min.js che ci darà accesso a TimelineMax e tutti gli altri straordinari strumenti chiave che GSAP ha da offrire. Se ripensi al nostro primer TimelineMax ho discusso di caricare TweenMax.min.js perché è più comodo, in più questo file contiene praticamente tutto ciò di cui abbiamo bisogno (anche ciò che è raccomandato da GreenSock il 99% delle volte).
TweenMax estende TweenLite, aggiungendo molte funzioni utili (ma non essenziali) come ripetere(), repeatDelay (), yoyo (), UpdateTo (), e altro ancora. TweenMax è stato creato per comodità, fornendo un singolo file JavaScript contenente tutto ciò che è comunemente necessario per animare gli elementi DOM. In sostanza, consente agli autori di specificare singoli movimenti, mentre TimelineMax accetterà i metodi concatenati per creare un insieme più complesso di interpolazioni / sequenze.
I caricatori sono quegli oggetti dati agli utenti quando stanno aspettando il caricamento di un processo. Ci danno il potere di esplorare minuscoli elementi di dimensioni microscopiche che possono avere interazioni complesse o persino semplicistiche - oltre a essere un'esplosione da fare.
Dai una rapida occhiata a questa demo di "String of Pearls":
Rompiamo la sequenza per una migliore comprensione di come funzioni tutta questa parte del "tweening".
Per creare questa sequenza richiederà l'uso del metodo staggerTo. Se non ricordi quale sia un metodo, ti invito a smettere subito e leggere il mio tutorial sulla meccanica.
Secondo la documentazione di GreenSock, il staggerTo () metodo:
"Interpone una serie di obiettivi a un insieme comune di valori di destinazione.
Nel nostro caso quei bersagli multipli saranno ciascuno dei cerchi all'interno dell'intero SVG.
Accentsconagua
staggerTo accetterà il selettore che stiamo usando per i cerchi (in questo caso cerchi).Ciò comporterebbe quanto segue; supponendo cerchi contiene tre oggetti ...
timeline.staggerTo (cerchi, 15, x: 0, 0,2) // cerchio 1 inizia al momento 0 // cerchio 2 inizia al momento 0,2 // cerchio 3 inizia al momento 0.4
Per iniziare, dovremo definire una nuova timeline e alcune impostazioni per la nostra configurazione.
var loader = new TimelineMax (ripetizione: -1, yoyo: true), circles = $ ('svg circle'), stagger_options = opacity: 0, y: -800, facilità: Elastic.easeInOut;Per fare in modo che questa linea temporale si ripeta nella direzione opposta, sto usando il yoyo chiave e impostarne il valore vero. Di nuovo, questo farà sì che la nostra sequenza suoni nella direzione opposta una volta che l'animazione raggiunge il fotogramma finale. Attivare l'animazione richiederà il targeting di ogni cerchio all'interno di SVG e esattamente il motivo per cui avremo bisogno di un riferimento utilizzando la potenza di jQuery.
Ci sono diversi modi in cui i documenti possono passare ai selezionatori (sentiti libero di leggere di più a riguardo qui). Per questo esempio selezionerò tutti i cerchi contemporaneamente usando la tipica sintassi del selettore di jQuery. È anche un po 'più veloce memorizzare il nostro riferimento in una variabile da riutilizzare in seguito, quindi circles = $ ('svg circle').
Il stagger_options variabile è un oggetto letterale che contiene le proprietà per dare a questa animazione la sua vita. Spostiamo i nostri oggetti usando il y chiave perché il GSAP CSSPlugin converte intelligentemente trasformare valori a matrice equivalenti e alla fine accelera le cose per noi. Ci sono un intero elenco di trasformazioni di proprietà short-hand che sono di gran lunga superiori e molto più facili da usare rispetto alle tipiche trasformazioni CSS:
| CSS | GSAP |
|---|---|
translateX () | X |
translateY () | y |
translateZ () | z |
ruotare() | rotazione |
RotateY () | rotationY |
rotateX () | rotationX |
scaleX () | scaleX |
scaleY () | scaleY |
skewX () | skewX |
skewY () | skewY |
Possiamo anche controllare l'andamento (la sensazione dell'animazione) e passare in vari tipi di movimento. Per gli amanti della visione, puoi controllare l'intuitivo visualizzatore di GreenSock per ottenere una migliore comprensione della miriade di facilità disponibili.
Il pezzo finale di questa creazione è quello di allegare il staggerTo metodo alla nostra timeline e inserimento delle variabili definite in precedenza e nell'ordine corretto per questo particolare metodo (elementi, durata, opzioni, quantità scaglionata).
loader.staggerTo (cerchi, 0.875, stagger_options, 0.025);
Se si ha fame di creare un'altra sequenza una volta completata la sequenza di scaglioni, si potrebbe certamente incatenare un altro metodo come da A così:
loader.staggerTo (cerchi, 0.875, stagger_options, 0.025) .fromTo (target: Object, duration: Number, fromVars: , toVars: );
Proviamo con un SVG che chiamo "Polyman". Recentemente ho scritto un articolo per CSS-Tricks sull'animazione dei poligoni e ho deciso di utilizzare questo esempio simile per un altro esercizio di interpolazione qui. Proviamo a usare il staggerFromTo () metodo e vedere che tipo di magia possiamo evocare.
Il seguente output SVG (XML) è leggermente abbreviato per motivi di discussione, ma come vedrete il nostro SVG comprende alcuni tag; specificamente
Per la configurazione iniziale della timeline definiremo le nostre opzioni globali usando un oggetto letterale che ritarderà l'animazione iniziale, ripeterà la sequenza, ritarderà l'animazione in ripetizione e infine riprodurrà l'animazione al contrario.
var tmax_options = delay: 0.25, repeat: -1, repeatDelay: 0.25, yoyo: true;
La prossima è una proprietà piuttosto nuova e non documentata che impone che i valori di trasformazione vengano posizionati nell'attributo di trasformazione SVG (al contrario di uno stile CSS).
CSSPlugin.useSVGTransformAttr = true;
Questa proprietà è stata aggiunta per rendere più facile agli sviluppatori aggirare un bug in Safari in cui combinare opacità e trasforma (ad esempio trasformare: scale () per esempio) produrrebbe un risultato dispari. A partire da 1.16.0 useSVGTransformAttr è impostato per vero automaticamente e specificamente mirato al nostro amico Safari, quindi non è più necessario per gli autori definire come ho sopra.
Dal momento che il staggerFromTo il metodo accetta argomenti separati per a partire dal e a posizioni Mi piace impostare entrambi i letterali oggetto al di fuori del metodo per scopi organizzativi e di leggibilità.
var stagger_opts_from = opacity: 0, scale: 0, transformOrigin: 'center center'; var stagger_opts_to = opacità: 1, scala: 1, facilità: Elastic.easeInOut, force3D: true;
Definiamo due letterali oggetto perché abbiamo bisogno di tutti i nostri a partire dal e a proprietà definite in modo che questa animazione faccia il suo esempio. Se non è chiaro, stiamo andando dai valori definiti nel nostro stagger_opts_from e termina con i valori impostati all'interno stagger_opts_to.
Il force3D forza chiave GSAP per applicare un valore 3D alla trasformazione dell'elemento; senso Matrix3D () invece di matrice(), o translate3d () invece di tradurre(). In genere, il browser inserisce l'elemento mirato sul proprio livello di composizione, consentendo aggiornamenti più efficienti con le animazioni.
Di default force3D è impostato per auto (a partire da 1.15.0) quindi non c'è davvero bisogno di usarlo affatto (a meno che tu non voglia specificarne il comportamento vero invece di auto per quella coppia).
// stratifica i target all'inizio dell'interpolazione e // li mantiene in questo modo usando una matrice 3D ove applicabile // (per le trasformazioni 2D e 3D). force3D: true // esegue il layering dei target all'inizio dell'interpolazione e // li decodifica anche (tornando a una matrice 2D o // trasforma) alla fine dell'interpolazione. Questo impedisce a // di creare e appendere su centinaia di elementi stratificati // (che possono degradare le prestazioni) e assicura anche che il testo // che potrebbe essere stato rasterizzato durante l'interpolazione ritorni a // essere nitido. force3D: auto
Puoi impostare il globale force3D valore per tutte le interpolazioni che utilizzano il defaultForce3D proprietà fornita da CSSPlugin:
// accetta anche 'false' o 'auto' CSSPlugin.defaultForce3D = true;
Oppure puoi impostare questo su una base per-tween invece:
// manterrà l'elemento stratificato dopo che l'interpolazione è stata completata timeline.to (element, 1, x: 300, force3D: true); // manterrà l'elemento stratificato dopo che l'interpolazione è stata completata timeline.to (element, 1, x: 300, force3D: false);
Se la tua animazione sta tentando di sovrascrivere le proprietà CSS, devi assicurarti che la tua specifica specificità non entri in collisione con quanto dichiarato nel tuo JavaScript, altrimenti i valori CSS nativi avranno la precedenza e l'animazione non reagirà come previsto.
/ * Stili polimerici obbligatori * / .polimer path opacity: 0;
Il CSS sopra nasconderà Polyman sul caricamento iniziale della finestra, quindi inizialmente non vedremo il nostro barbuto molto simile a quello che potresti provare con ciò che viene comunemente definito FOUT (Flash Of Unstyled Text).
Dal momento che la maggior parte della nostra configurazione è definita, possiamo finalmente iniziare a impostare la nostra timeline, indirizzando i percorsi SVG, definendo un valore di scaglionamento (stagger_val) E finendo definendo per quanto tempo durerà l'intera animazione (durata).
var tl = new TimelineMax (tmax_options), path = $ ('svg.polyman path'), stagger_val = 0.0125, duration = 1.25;Proprio così e con la delicata ondata della nostra bacchetta magica e una leggera spolverata di polvere di unicorno passiamo tutte le variabili richieste che sono state definite come argomenti nel staggerFromTo metodo!
tl.staggerFromTo (percorso, durata, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Viola! In una linea semplice il Polyman inizia a respirare e diventa una vera creatura vivente (beh, non proprio). Molto carino eh?
Nel prossimo tutorial della nostra serie TweenMax vedremo come creare un punto di pausa sulla timeline, quindi l'animazione si interrompe automaticamente quando raggiunge il punto desiderato. Il metodo addPause () è relativamente nuovo e consente di inserire una pausa in qualsiasi punto della timeline. È molto più preciso rispetto all'utilizzo di una richiamata che chiama una funzione per mettere in pausa la funzione (che è ciò che si doveva fare prima addPause () esistente). Alla prossima, felice tweening!
Un ringraziamento speciale a quei lettori che seguono questo viaggio GreenSock!
