Share
In questo tutorial impareremo come controllare le animazioni, su richiesta, usando un metodo chiamato addPause (). Pronto? Imposta? ... leggera pausa ... Andiamo!
Il addPause () metodo è un metodo di controllo che consente agli sviluppatori di posizionare a pausa ovunque sulla loro cronologia. È molto più preciso dell'utilizzo di una funzione di callback che mette in pausa un'altra funzione (qualcosa che prima era necessario addPause () esistente).
Questo metodo di controllo può anche inserire un callback speciale che mette in pausa la riproduzione della timeline su un determinato timestamp o etichetta. Ciò aiuta a garantire che se la testina virtuale si muove leggermente oltre la posizione di pausa, verrà spostata nel punto preciso.
La sintassi per addPause è semplice. Proprio come scriviamo altri metodi come .a(), il .addPause () il metodo è scritto in modo simile e accetta argomenti che possono essere passati all'interno delle parentesi. Se non hai familiarità con i metodi, vai al mio altro articolo incentrato su GreenSock che esplora i meccanismi di GSAP e aspetterò qui il tuo ritorno.
timeline.addPause (2);
Aggiungendo il codice qui sopra metterà in pausa l'animazione esattamente al secondo segno della timeline. Se non sei sicuro di cosa sia una timeline e di come istanziarne uno, dovresti leggere un precedente articolo che ho scritto iniziando con TimelineMax.
È inoltre possibile inserire una pausa in relazione alle etichette. Se stai leggendo, potresti ricordare che abbiamo parlato delle etichette nell'articolo della meccanica.
timeline.addPause ( "yourLabel");
Ora quando la tua timeline incontra l'etichetta "yourLabel" verrà inserita una pausa in "yourLabel".
Questo esempio inserirà una pausa 3 secondi dopo "yourLabel" e, quando si verifica tale pausa, una chiamata a yourFunction si svolgerà.
Accentsconagua
timeline.addPause ("yourLabel + = 3", yourFunction);Se desideri inserire una pausa esattamente a 4 secondi, quindi chiama yourFunction, passare due parametri, param1 e param2 e infine associare l'ambito corrente al callback, è possibile farlo in questo modo:
timeline.addPause (4, yourFunction, ["param1", "param2"], this);
Ecco alcuni esempi divertenti per avere i piedi bagnati inserendo pause per una timeline. La sfida per te è prendere ogni approccio che ho menzionato in precedenza e tentare di implementarli tu stesso.
Per iniziare ecco un ottimo esempio, basato su una demo di Carl Schoof, che spiega un approccio lineare e una rappresentazione perfetta dell'uso tipico con addPause () metodo di controllo.
Un uso tipico di addPause () è spezzare un'esperienza lineare in più sezioni:
Ogni volta che colpisci il Il prossimo pulsante la timeline sarà giocare() fino a quando non colpisce il prossimo addPause () punto.
Ecco una demo che ho realizzato denominata "Bubble Emitter" per sperimentare di più con gli inserimenti in pausa a tuo piacimento. Cliccalo!
Sulla riga 90 del pannello JavaScript cerca questa riga commentata:
createBubbles (vasca) .addPause (0,25);
Decommentalo e interagisci con la demo per vedere il addPause il metodo ha luogo durante la riproduzione dell'animazione. Suggerimento: l'animazione si fermerà per 0,25 secondi nella sequenza di animazione.
Ho anche lasciato alcuni commenti in questa demo (grazie all'aiuto di Jack Doyle) spiegando come rendere questo effetto ancora più performante!
Questa demo SVG di Chris Gannon è un fantastico esempio di presentazione del plug-in DrawSVG ed è ideale per l'esplorazione addPause. Puoi anche usare addPause per scoprire ognuno dei movimenti che Chris impiega per rendere l'effetto prendere vita.
Prova ad aggiungere questo snippet alla riga 26 del pannello JavaScript della demo.
.addPause ()
Come ho già detto, la demo di Chris usa il plugin drawSVG che abbiamo visto in un precedente articolo. Per chi non lo conoscesse, DrawSVG è un plugin particolarmente utile per animare i tratti di un SVG e ti incoraggio vivamente ad esplorarlo ulteriormente quando hai tempo.
Semplicemente perché le cose di Chris sono così buone, che ne dici di aggiungere alcune pause ad un altro dei suoi demo? Questo è perfetto:
Se forzi questa demo, cancella tutto il codice JavaScript che Chris ha scritto, vedrai l'intero SVG e come ha usato il plugin DrawSVG per creare questa sequenza.
Questa è l'immagine SVGPer iniziare il nostro esperimento, aggiungi il seguente snippet alla riga 60 del pannello JavaScript della demo di CodePen:
tl.addPause (1,15);
Hai notato che l'animazione si ferma a 1,15 secondi nel movimento? Molto carino eh?
Ora per il prossimo trucco. Sostituisci le linee 44-47 con quanto segue, per aggiungere un'etichetta alla timeline:
.a (arches, 2, drawSVG: '0% -5%', facilità: Linear.easeNone). add ('archesLabel')Con il codice sopra riportato, aggiungi il seguente snippet sulla riga 60 per finalizzare il nostro esperimento. Guarda la pausa dell'animazione esattamente al "archesLabel" che abbiamo definito prima.
tl.addPause ( 'archesLabel')
Avendo coperto il metodo addPause () e giocato con esso su un certo numero di demo, è tempo di vedere se è possibile applicarlo. Imparare a creare un semplice pulsante di riproduzione / pausa per controllare qualsiasi animazione GSAP (interpolazioni o timeline) può essere molto utile, specialmente quando stai cercando di imparare un particolare / approccio e / o tecnica.
Nel video qui sotto Carl Schoff descrive le basi e spiega come attivare il pulsante di attivazione nella demo.
Nella nostra prossima avventura GreenSock impareremo cosa è l'interpolazione di bezier! Analizzeremo il percorso di Bezier e analizzeremo alcuni esempi di demo che illustrano come animare lungo un percorso di Bezier. Alla prossima felice animazione!
