OK, ci piacerebbe tornare.
Quindi in questo video prenderemo ciò che abbiamo già fatto e lo animeremo leggermente.
Quindi alla fine quello che vogliamo succedere è che per ogni pressione di un tasto otteniamo un cerchio in una
posizione casuale con un colore e che il colore si animi leggermente.
E abbiamo anche l'animazione della dimensione.
Quindi non so se è possibile cogliere il cambiamento di colore, ma è un bel gioco per
aggiungere un po 'alla tonalità.
Ma uno di questi farà per noi iniziare.
Inizieremo in realtà solo cambiando il colore di queste cerchie e in realtà inizieremo
più semplicemente cambiando semplicemente il colore di un cerchio.
Quindi non tutti quelli che verranno dopo.
Quindi, se andiamo a Paperchase, torniamo ai tutorial e guardiamo l'animazione in basso.
La prima cosa che puoi fare è dare un'occhiata ad alcuni degli esempi.
Ecco un esempio.
E puoi vedere che è davvero davvero semplice fare l'animazione.
Quello che facciamo è definire qualcosa in questo caso un rettangolo.
Nel nostro caso sarà un cerchio e poi ci sarà questo su frame e qualunque codice
inserito qui verrà eseguito su ogni frame dell'animazione.
Quindi in questo caso ogni fotogramma di questa animazione ruotiamo quel rettangolo di tre gradi
o in questo caso che è quello che useremo per ogni fotogramma che aggiungeremo alla tonalità di questo cerchio
che abbiamo definito qui.
Quindi proviamolo.
Andiamo avanti e facciamo una nuova circonferenza non dentro la chiave giù.
Quindi questo sarà sempre lì quando la pagina verrà caricata.
Quindi lo chiameremo var cerchio animato uguale a nuovo percorso punto cerchio e avremo nuovi punti e facciamo
questo cerchio a 300 virgola 300 e il raggio.
Facciamolo più grande 100.
Proprio così.
E poi faremo animazione e ciò che viene chiamato cerchio animato piuttosto che animare il colore del punto e
impostarlo in rosso per iniziare proprio così.
Grande.
grande e ogni volta che colpisco un tasto otteniamo cerchi più piccoli che sono casuali.
Quindi non sarà ancora animato, ma se si aggiorna otteniamo un cerchio
Ora dobbiamo aggiungere la nostra animazione ed è molto semplice visto che abbiamo visto la funzione sul frame e possiamo passare dentro
o fuori, tranne questo argomento dell'evento.
Se volessimo fare qualcosa con ogni frame, se volessimo dei dati su di esso, in realtà non
ne abbiamo bisogno.
E poi tutto quello che fai qui è il colore del punto di riempimento del cerchio animato che tu sei uguale a uno.
E questo è direttamente da quell'esempio.
nuovo frame che non dipende da noi, quindi non stiamo decidendo la frequenza fotogrammi quanto spesso viene chiamato questo codice.
Quindi ogni volta che l'animazione richiede un
Ogni volta che c'è un nuovo frame su cui la carta si prende cura di noi, ne aggiungiamo uno alla
tonalità del suo cerchio animato.
Rinnova e andiamo.
Quindi, davvero molto semplice fare questo tipo di animazione.
Possiamo anche fare animazioni ovunque cambiamo posizione di qualcosa e questo è un
po 'più complicato.
qualcosa da un punto a un altro punto e non si accelera anche in modo uniforme.
Questo sembra essere ancora più complesso in questo esempio perché non sono solo animati
Quindi è un po 'più complesso ma ancora solo poche righe.
Ecco un altro esempio di come spostare le cose.
Alcune altre animazioni
Quello che faremo è usare qualcosa che non mostrano e gli esempi qui che trascorro
un po 'di tempo a scavare nei documenti quello che vogliamo fare è ridimensionarli in ogni fotogramma.
Quindi quello che facciamo è fondamentalmente quando premo un tasto facciamo un cerchio.
quel personaggio ogni fotogramma o lo contraggo un po 'ridimensionandolo sostanzialmente al punto nove nove nove nove.
Diciamo che inizia come 300 per 300 o 300 raggi scusami quando colpisco
Ho dimenticato il numero esatto, ma lo stiamo moltiplicando di una dimensione inferiore ogni fotogramma e si riduce e
si restringe in modo che scompaia.
Quindi ti mostrerò come funziona.
Torniamo al nostro codice, abbiamo il cerchio che si sta ancora animando e all'interno di un frame anziché
aggiungerne uno alla tonalità.
cerchio animato che è un metodo che ho trovato
e che possiamo moltiplicare per qualsiasi frazione che vogliamo, se la lasciamo a una dimensione rimarrà della stessa dimensione, quindi non la vedremo realmente.
Quello che faremo è fare una scala di punti a
Ma se facciamo qualcosa come il punto nove e ci aggiorniamo, facciamo ogni cambiamento di frame di 1.
E scala in base al punto nove o 90 percento di ciò che era nel fotogramma precedente.
Quindi, se lo cambiamo in qualcosa come Point 9 9 per essere una transizione più lenta e se
la cambiamo in qualcosa come il punto cinque si ridurrà molto molto rapidamente.
Quindi ogni fotogramma diventa mezzo grande rispetto alla precedente.
Quindi penso che sia stato il punto 9 ad iniziare.
Quindi lo lasceremo a quello.
E ora abbiamo un singolo cerchio che cambia colore e il restringimento di ciò che vogliamo fare è quando colpisco
questi altri tasti.
Vuoi che quelle cerchie facciano la stessa cosa e questo è un po 'più complicato.
Ma sinceramente il codice qui rimarrà lo stesso, tutto ciò che è diverso è che dobbiamo fare questo
per ogni cerchio che è sulla pagina.
E questo è probabilmente il cambiamento più drastico che renderà ciò che effettivamente farà è avere
una serie di cerchi e ogni volta che premiamo un tasto. Aggiungiamo quel cerchio in quel nuovo array perché al momento non
stiamo tenendo traccia di tutti i cerchi abbiamo bisogno di salvarli tutti in qualche modo.
In modo che sul frame proprio qui in questa funzione possiamo quindi fare riferimento a ogni cerchio che già
esiste e animato.
Quindi manterremo questo codice.
Ma quello che vogliamo fare è passare in rassegna un array che non esiste quindi chiameremo solo cerchi.
Quindi per var i equivale a zero Ayas meno di Circle StarLink.
Inoltre, più ciò che vogliamo fare è fare cerchi.
Riempio il colore qui.
Quindi inizieremo solo con il colore di riempimento proprio all'inizio.
Quindi mi limiterò a copiare questa riga.
Quindi non funzionerà ancora perché il cerchio non esiste.
Ma l'idea è che su ogni frame passiamo attraverso tutti i cerchi di questo array e ne aggiungiamo
uno a ogni tonalità ogni fotogramma.
E potresti pensare che sia piuttosto intenso ed è un sacco di cose che accadono ma la carta si prende solo
cura di esso.
Ma aggiungeremo anche una piccola ottimizzazione verso la fine, quindi ti mostrerò cosa intendo in un video
futuro.
Ma per ora questo è quello che faremo.
E tutto quello che dobbiamo fare ora è aggiungere questo cerchio che stiamo creando nell'array delle cerchie, così possiamo
definire che l'array per le nostre cerchie è un array vuoto da avviare e poi quando premi un
tasto sul tasto in basso, solo fare cerchi verso l'alto spingere questo nuovo cerchio in cerchio stop spingere questo nuovo percorso fuori cerchio in
questo punto casuale.
In questo momento abbiamo un raggio di 10 e ripristiniamo il colore di riempimento dell'uccisione come arancione.
Quindi stiamo solo spingendo quel cerchio che avevamo già nella schiera di questo cerchio.
E poi stiamo aggiornando ogni cerchio.
Quindi potrebbe esserci un cerchio in cui potrebbero esserci 20 cerchi.
Potrebbero esserci 100 cerchi in qualsiasi momento.
Li analizziamo tutti e ne aggiungiamo uno a ciascuna coda e se guardiamo in questo momento e lo
aggiorniamo non funziona ancora abbastanza.
E questo fa emergere un punto davvero interessante su come funziona la spinta.
Quindi se apro la console mi dice che non posso leggere la tonalità di Prakriti della mente indefinita 24 che è
proprio qui.
Quindi non è in qualche modo che non sta leggendo la proprietà di Hugh di Phil che dice che il codice Phil non esiste.
Quindi facciamo un cerchio di registro costante.
E vedrai qual è il problema.
Se lo apro, viene interrotto perché abbiamo avuto un errore.
Ma in realtà abbiamo aggiunto arancione la stringa nell'array, non il nuovo cerchio effettivo.
E questo perché quello che stiamo spingendo non è solo un nuovo cerchio, stiamo facendo la nuova cerchia.
E quindi stiamo impostando il colore di riempimento per essere arancione.
Quindi l'ultima cosa che è stata restituita era la stringa arancione.
Quindi il risultato finale è che stiamo semplicemente spingendo in arancione ogni volta.
Che non è quello che vogliamo
Quindi creeremo una nuova variabile, la chiameremo la nostra nuova cerchia e poi faremo il nuovo colore
del punto di riempimento del cerchio separatamente uguale all'arancione e poi inseriremo il New Circle.
Quindi, piuttosto che modificarlo, penso che sia un errore importante da vedere.
Totalmente mi ha colto alla sprovvista per un momento, ma è importante capire
come funziona dove abbiamo quei quei metodi concatenati uno sopra l'altro dove abbiamo passato quel cerchio e poi il colore di riempimento
dei punti è uguale all'arancio e abbiamo appena aggiunto quella cosa intera in l'array con push.
Stavamo solo aggiungendo l'arancione.
Quindi abbiamo bisogno di aggiustarlo.
Quindi spero che lo faccia.
E in realtà so che lo fa, ma se siamo freschi e diamo uno sguardo ora aggiungiamo
nuove cerchie disposte casualmente e tutte nemiche che l'Heugh si anima così perfettamente.
Ora aggiorniamo questo per lavorare con le dimensioni.
Quindi in realtà è proprio la stessa identica linea che abbiamo qui.
Mi libererò del nostro registro non costante.
Tranne noi vogliamo cerchi.
IO.
OK.
Quindi, prima di mostrarti se funziona, rivediamo cosa abbiamo fatto.
Quindi quando premi un qualsiasi tasto che aggiungiamo in un cerchio in un punto casuale 2 creiamo un punto casuale per
creare un nuovo cerchio con quel raggio casuale di 10 pixel e lascia che cambi effettivamente quello per abbinare quello che
abbiamo nella soluzione che è cinquecento e poi stiamo vendendo la carta di riempimento per iniziare come arancione
che cambierà alla fine.
E poi lo spingiamo in un array chiamato cerchi.
Quindi, ogni volta che viene chiamato un nuovo fotogramma Ogni fotogramma dell'animazione passa attraverso tutti i cerchi.
E per ognuno ne aggiungiamo uno alla hewe e moltiplichiamo le dimensioni della scala per il punto nove.
Quindi lo stiamo rimpicciolendo appena per ogni fotogramma.
Ma ci sono così tanti frame che in realtà si restringono abbastanza rapidamente e possiamo
sbarazzarci del nostro cerchio animato ora che inizia con il caricamento della pagina.
Non vogliamo iniziare con uno schermo nero.
E poi quando premi un tasto, aggiungiamo un cerchio.
Quindi proviamolo.
Eccoci.
Quindi questo è quasi esattamente allo stesso modo.
Ecco il suono.
Una grande differenza è che il colore dice che ogni tasto ha un colore assegnato qui, quindi Q è blu una
metà blu più scura.
È grigio?
Quindi sul nostro è un viola proprio ora qui stiamo impostando tutti per iniziare è arancione e quindi cambiare
la tonalità.
Quindi dovremo sistemarlo, ma intendo aspettare di farlo finché non aggiungiamo il suono.
Quindi abbiamo finito per ora.
C'è una piccola ottimizzazione che ne farà la fine perché al momento non rimuoviamo
mai quei cerchi dall'array circle.
Quindi, anche se sapessi dopo 10 secondi che il cerchio è andato anche dopo tre secondi, non lo vediamo.
Tecnicamente è ancora in quella matrice.
Quindi non è l'ideale.
cerchi che avevamo creato e non li vediamo nessuno, non vorremmo ricorrere a tutti loro.
Se avessimo avuto diecimila
Quindi nell'ultimo video ti mostrerò come rimuovere un cerchio quando sappiamo che è sparito o quando
sappiamo che non è più fattibile.
OK, quindi lavoreremo con il suono