1
00:00:00,370 --> 00:00:01,460
OK, ci piacerebbe tornare.

2
00:00:01,620 --> 00:00:06,150
Quindi in questo video prenderemo ciò che abbiamo già fatto e lo animeremo leggermente.

3
00:00:06,720 --> 00:00:12,090
Quindi alla fine quello che vogliamo succedere è che per ogni pressione di un tasto otteniamo un cerchio in una

4
00:00:14,010 --> 00:00:17,360
posizione casuale con un colore e che il colore si animi leggermente.

5
00:00:18,300 --> 00:00:21,120
E abbiamo anche l'animazione della dimensione.

6
00:00:21,460 --> 00:00:25,620
Quindi non so se è possibile cogliere il cambiamento di colore, ma è un bel gioco per

7
00:00:25,620 --> 00:00:26,980
aggiungere un po 'alla tonalità.

8
00:00:27,330 --> 00:00:30,220
Ma uno di questi farà per noi iniziare.

9
00:00:30,210 --> 00:00:34,770
Inizieremo in realtà solo cambiando il colore di queste cerchie e in realtà inizieremo

10
00:00:34,770 --> 00:00:37,950
più semplicemente cambiando semplicemente il colore di un cerchio.

11
00:00:38,040 --> 00:00:40,660
Quindi non tutti quelli che verranno dopo.

12
00:00:40,680 --> 00:00:48,150
Quindi, se andiamo a Paperchase, torniamo ai tutorial e guardiamo l'animazione in basso.

13
00:00:48,150 --> 00:00:51,400
La prima cosa che puoi fare è dare un'occhiata ad alcuni degli esempi.

14
00:00:51,540 --> 00:00:53,180
Ecco un esempio.

15
00:00:53,730 --> 00:00:57,440
E puoi vedere che è davvero davvero semplice fare l'animazione.

16
00:00:57,440 --> 00:01:01,260
Quello che facciamo è definire qualcosa in questo caso un rettangolo.

17
00:01:01,260 --> 00:01:08,310
Nel nostro caso sarà un cerchio e poi ci sarà questo su frame e qualunque codice

18
00:01:08,310 --> 00:01:11,610
inserito qui verrà eseguito su ogni frame dell'animazione.

19
00:01:11,610 --> 00:01:18,360
Quindi in questo caso ogni fotogramma di questa animazione ruotiamo quel rettangolo di tre gradi

20
00:01:18,360 --> 00:01:26,730
o in questo caso che è quello che useremo per ogni fotogramma che aggiungeremo alla tonalità di questo cerchio

21
00:01:26,760 --> 00:01:28,200
che abbiamo definito qui.

22
00:01:28,980 --> 00:01:31,580
Quindi proviamolo.

23
00:01:31,770 --> 00:01:35,290
Andiamo avanti e facciamo una nuova circonferenza non dentro la chiave giù.

24
00:01:35,310 --> 00:01:38,290
Quindi questo sarà sempre lì quando la pagina verrà caricata.

25
00:01:38,430 --> 00:01:50,250
Quindi lo chiameremo var cerchio animato uguale a nuovo percorso punto cerchio e avremo nuovi punti e facciamo

26
00:01:50,250 --> 00:01:55,870
questo cerchio a 300 virgola 300 e il raggio.

27
00:01:56,010 --> 00:01:58,200
Facciamolo più grande 100.

28
00:01:58,560 --> 00:01:59,870
Proprio così.

29
00:02:00,150 --> 00:02:09,190
E poi faremo animazione e ciò che viene chiamato cerchio animato piuttosto che animare il colore del punto e

30
00:02:09,260 --> 00:02:12,380
impostarlo in rosso per iniziare proprio così.

31
00:02:12,540 --> 00:02:13,790
Grande.

32
00:02:13,890 --> 00:02:18,690
grande e ogni volta che colpisco un tasto otteniamo cerchi più piccoli che sono casuali.

33
00:02:18,690 --> 00:02:22,260
Quindi non sarà ancora animato, ma se si aggiorna otteniamo un cerchio

34
00:02:22,260 --> 00:02:31,110
Ora dobbiamo aggiungere la nostra animazione ed è molto semplice visto che abbiamo visto la funzione sul frame e possiamo passare dentro

35
00:02:31,110 --> 00:02:33,640
o fuori, tranne questo argomento dell'evento.

36
00:02:33,660 --> 00:02:38,790
Se volessimo fare qualcosa con ogni frame, se volessimo dei dati su di esso, in realtà non

37
00:02:38,790 --> 00:02:39,560
ne abbiamo bisogno.

38
00:02:39,840 --> 00:02:48,050
E poi tutto quello che fai qui è il colore del punto di riempimento del cerchio animato che tu sei uguale a uno.

39
00:02:48,120 --> 00:02:50,750
E questo è direttamente da quell'esempio.

40
00:02:50,820 --> 00:02:57,330
nuovo frame che non dipende da noi, quindi non stiamo decidendo la frequenza fotogrammi quanto spesso viene chiamato questo codice.

41
00:02:57,480 --> 00:02:59,730
Quindi ogni volta che l'animazione richiede un

42
00:02:59,790 --> 00:03:06,570
Ogni volta che c'è un nuovo frame su cui la carta si prende cura di noi, ne aggiungiamo uno alla

43
00:03:06,570 --> 00:03:08,160
tonalità del suo cerchio animato.

44
00:03:08,160 --> 00:03:10,650
Rinnova e andiamo.

45
00:03:10,650 --> 00:03:13,720
Quindi, davvero molto semplice fare questo tipo di animazione.

46
00:03:13,830 --> 00:03:20,040
Possiamo anche fare animazioni ovunque cambiamo posizione di qualcosa e questo è un

47
00:03:20,040 --> 00:03:21,250
po 'più complicato.

48
00:03:21,270 --> 00:03:26,760
qualcosa da un punto a un altro punto e non si accelera anche in modo uniforme.

49
00:03:26,760 --> 00:03:31,360
Questo sembra essere ancora più complesso in questo esempio perché non sono solo animati

50
00:03:31,410 --> 00:03:35,630
Quindi è un po 'più complesso ma ancora solo poche righe.

51
00:03:36,600 --> 00:03:39,830
Ecco un altro esempio di come spostare le cose.

52
00:03:40,500 --> 00:03:42,610
Alcune altre animazioni

53
00:03:42,610 --> 00:03:48,450
Quello che faremo è usare qualcosa che non mostrano e gli esempi qui che trascorro

54
00:03:48,450 --> 00:03:54,840
un po 'di tempo a scavare nei documenti quello che vogliamo fare è ridimensionarli in ogni fotogramma.

55
00:03:56,340 --> 00:04:00,360
Quindi quello che facciamo è fondamentalmente quando premo un tasto facciamo un cerchio.

56
00:04:00,390 --> 00:04:09,060
quel personaggio ogni fotogramma o lo contraggo un po 'ridimensionandolo sostanzialmente al punto nove nove nove nove.

57
00:04:09,060 --> 00:04:15,680
Diciamo che inizia come 300 per 300 o 300 raggi scusami quando colpisco

58
00:04:15,720 --> 00:04:22,590
Ho dimenticato il numero esatto, ma lo stiamo moltiplicando di una dimensione inferiore ogni fotogramma e si riduce e

59
00:04:22,590 --> 00:04:24,760
si restringe in modo che scompaia.

60
00:04:25,110 --> 00:04:26,940
Quindi ti mostrerò come funziona.

61
00:04:27,090 --> 00:04:35,130
Torniamo al nostro codice, abbiamo il cerchio che si sta ancora animando e all'interno di un frame anziché

62
00:04:35,250 --> 00:04:36,910
aggiungerne uno alla tonalità.

63
00:04:37,110 --> 00:04:40,370
cerchio animato che è un metodo che ho trovato

64
00:04:42,910 --> 00:04:51,950
e che possiamo moltiplicare per qualsiasi frazione che vogliamo, se la lasciamo a una dimensione rimarrà della stessa dimensione, quindi non la vedremo realmente.

65
00:04:51,950 --> 00:04:55,760
Quello che faremo è fare una scala di punti a

66
00:04:55,970 --> 00:05:08,600
Ma se facciamo qualcosa come il punto nove e ci aggiorniamo, facciamo ogni cambiamento di frame di 1.

67
00:05:08,960 --> 00:05:14,560
E scala in base al punto nove o 90 percento di ciò che era nel fotogramma precedente.

68
00:05:14,570 --> 00:05:23,960
Quindi, se lo cambiamo in qualcosa come Point 9 9 per essere una transizione più lenta e se

69
00:05:23,960 --> 00:05:30,540
la cambiamo in qualcosa come il punto cinque si ridurrà molto molto rapidamente.

70
00:05:30,680 --> 00:05:34,090
Quindi ogni fotogramma diventa mezzo grande rispetto alla precedente.

71
00:05:34,280 --> 00:05:37,180
Quindi penso che sia stato il punto 9 ad iniziare.

72
00:05:37,370 --> 00:05:39,040
Quindi lo lasceremo a quello.

73
00:05:39,140 --> 00:05:45,680
E ora abbiamo un singolo cerchio che cambia colore e il restringimento di ciò che vogliamo fare è quando colpisco

74
00:05:45,680 --> 00:05:46,530
questi altri tasti.

75
00:05:46,730 --> 00:05:52,300
Vuoi che quelle cerchie facciano la stessa cosa e questo è un po 'più complicato.

76
00:05:52,490 --> 00:05:58,730
Ma sinceramente il codice qui rimarrà lo stesso, tutto ciò che è diverso è che dobbiamo fare questo

77
00:05:58,760 --> 00:06:01,410
per ogni cerchio che è sulla pagina.

78
00:06:01,790 --> 00:06:06,410
E questo è probabilmente il cambiamento più drastico che renderà ciò che effettivamente farà è avere

79
00:06:06,410 --> 00:06:12,950
una serie di cerchi e ogni volta che premiamo un tasto. Aggiungiamo quel cerchio in quel nuovo array perché al momento non

80
00:06:12,950 --> 00:06:17,380
stiamo tenendo traccia di tutti i cerchi abbiamo bisogno di salvarli tutti in qualche modo.

81
00:06:17,420 --> 00:06:24,830
In modo che sul frame proprio qui in questa funzione possiamo quindi fare riferimento a ogni cerchio che già

82
00:06:24,890 --> 00:06:26,240
esiste e animato.

83
00:06:26,840 --> 00:06:28,210
Quindi manterremo questo codice.

84
00:06:28,610 --> 00:06:33,770
Ma quello che vogliamo fare è passare in rassegna un array che non esiste quindi chiameremo solo cerchi.

85
00:06:33,770 --> 00:06:42,230
Quindi per var i equivale a zero Ayas meno di Circle StarLink.

86
00:06:42,690 --> 00:06:47,420
Inoltre, più ciò che vogliamo fare è fare cerchi.

87
00:06:47,580 --> 00:06:50,260
Riempio il colore qui.

88
00:06:50,260 --> 00:06:54,130
Quindi inizieremo solo con il colore di riempimento proprio all'inizio.

89
00:06:54,140 --> 00:06:56,500
Quindi mi limiterò a copiare questa riga.

90
00:06:58,550 --> 00:07:01,050
Quindi non funzionerà ancora perché il cerchio non esiste.

91
00:07:01,070 --> 00:07:08,780
Ma l'idea è che su ogni frame passiamo attraverso tutti i cerchi di questo array e ne aggiungiamo

92
00:07:08,780 --> 00:07:11,590
uno a ogni tonalità ogni fotogramma.

93
00:07:12,470 --> 00:07:17,900
E potresti pensare che sia piuttosto intenso ed è un sacco di cose che accadono ma la carta si prende solo

94
00:07:17,900 --> 00:07:18,760
cura di esso.

95
00:07:18,890 --> 00:07:25,550
Ma aggiungeremo anche una piccola ottimizzazione verso la fine, quindi ti mostrerò cosa intendo in un video

96
00:07:25,550 --> 00:07:25,910
futuro.

97
00:07:25,910 --> 00:07:27,780
Ma per ora questo è quello che faremo.

98
00:07:28,340 --> 00:07:35,660
E tutto quello che dobbiamo fare ora è aggiungere questo cerchio che stiamo creando nell'array delle cerchie, così possiamo

99
00:07:35,660 --> 00:07:42,590
definire che l'array per le nostre cerchie è un array vuoto da avviare e poi quando premi un

100
00:07:42,590 --> 00:07:51,830
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

101
00:07:51,830 --> 00:07:53,140
questo punto casuale.

102
00:07:53,240 --> 00:07:58,180
In questo momento abbiamo un raggio di 10 e ripristiniamo il colore di riempimento dell'uccisione come arancione.

103
00:07:58,220 --> 00:08:03,660
Quindi stiamo solo spingendo quel cerchio che avevamo già nella schiera di questo cerchio.

104
00:08:04,040 --> 00:08:06,830
E poi stiamo aggiornando ogni cerchio.

105
00:08:06,830 --> 00:08:09,950
Quindi potrebbe esserci un cerchio in cui potrebbero esserci 20 cerchi.

106
00:08:10,070 --> 00:08:12,270
Potrebbero esserci 100 cerchi in qualsiasi momento.

107
00:08:12,320 --> 00:08:19,790
Li analizziamo tutti e ne aggiungiamo uno a ciascuna coda e se guardiamo in questo momento e lo

108
00:08:19,790 --> 00:08:21,670
aggiorniamo non funziona ancora abbastanza.

109
00:08:21,770 --> 00:08:25,550
E questo fa emergere un punto davvero interessante su come funziona la spinta.

110
00:08:25,550 --> 00:08:33,650
Quindi se apro la console mi dice che non posso leggere la tonalità di Prakriti della mente indefinita 24 che è

111
00:08:33,650 --> 00:08:34,570
proprio qui.

112
00:08:35,150 --> 00:08:41,150
Quindi non è in qualche modo che non sta leggendo la proprietà di Hugh di Phil che dice che il codice Phil non esiste.

113
00:08:41,540 --> 00:08:43,870
Quindi facciamo un cerchio di registro costante.

114
00:08:44,330 --> 00:08:48,390
E vedrai qual è il problema.

115
00:08:49,100 --> 00:08:53,610
Se lo apro, viene interrotto perché abbiamo avuto un errore.

116
00:08:53,780 --> 00:09:00,390
Ma in realtà abbiamo aggiunto arancione la stringa nell'array, non il nuovo cerchio effettivo.

117
00:09:00,530 --> 00:09:06,710
E questo perché quello che stiamo spingendo non è solo un nuovo cerchio, stiamo facendo la nuova cerchia.

118
00:09:06,740 --> 00:09:09,470
E quindi stiamo impostando il colore di riempimento per essere arancione.

119
00:09:09,500 --> 00:09:13,010
Quindi l'ultima cosa che è stata restituita era la stringa arancione.

120
00:09:13,010 --> 00:09:16,780
Quindi il risultato finale è che stiamo semplicemente spingendo in arancione ogni volta.

121
00:09:16,850 --> 00:09:18,530
Che non è quello che vogliamo

122
00:09:19,190 --> 00:09:28,310
Quindi creeremo una nuova variabile, la chiameremo la nostra nuova cerchia e poi faremo il nuovo colore

123
00:09:28,310 --> 00:09:35,920
del punto di riempimento del cerchio separatamente uguale all'arancione e poi inseriremo il New Circle.

124
00:09:35,990 --> 00:09:40,480
Quindi, piuttosto che modificarlo, penso che sia un errore importante da vedere.

125
00:09:40,760 --> 00:09:44,870
Totalmente mi ha colto alla sprovvista per un momento, ma è importante capire

126
00:09:44,870 --> 00:09:51,760
come funziona dove abbiamo quei quei metodi concatenati uno sopra l'altro dove abbiamo passato quel cerchio e poi il colore di riempimento

127
00:09:51,770 --> 00:09:56,450
dei punti è uguale all'arancio e abbiamo appena aggiunto quella cosa intera in l'array con push.

128
00:09:56,560 --> 00:09:57,800
Stavamo solo aggiungendo l'arancione.

129
00:09:57,830 --> 00:09:59,980
Quindi abbiamo bisogno di aggiustarlo.

130
00:10:00,110 --> 00:10:01,290
Quindi spero che lo faccia.

131
00:10:01,310 --> 00:10:08,300
E in realtà so che lo fa, ma se siamo freschi e diamo uno sguardo ora aggiungiamo

132
00:10:09,700 --> 00:10:15,290
nuove cerchie disposte casualmente e tutte nemiche che l'Heugh si anima così perfettamente.

133
00:10:15,290 --> 00:10:17,450
Ora aggiorniamo questo per lavorare con le dimensioni.

134
00:10:17,570 --> 00:10:21,550
Quindi in realtà è proprio la stessa identica linea che abbiamo qui.

135
00:10:22,280 --> 00:10:23,860
Mi libererò del nostro registro non costante.

136
00:10:23,930 --> 00:10:26,140
Tranne noi vogliamo cerchi.

137
00:10:26,160 --> 00:10:28,420
IO.

138
00:10:30,680 --> 00:10:31,370
OK.

139
00:10:31,730 --> 00:10:36,420
Quindi, prima di mostrarti se funziona, rivediamo cosa abbiamo fatto.

140
00:10:36,440 --> 00:10:42,860
Quindi quando premi un qualsiasi tasto che aggiungiamo in un cerchio in un punto casuale 2 creiamo un punto casuale per

141
00:10:42,860 --> 00:10:49,100
creare un nuovo cerchio con quel raggio casuale di 10 pixel e lascia che cambi effettivamente quello per abbinare quello che

142
00:10:49,100 --> 00:10:54,590
abbiamo nella soluzione che è cinquecento e poi stiamo vendendo la carta di riempimento per iniziare come arancione

143
00:10:54,590 --> 00:10:55,770
che cambierà alla fine.

144
00:10:55,880 --> 00:10:58,840
E poi lo spingiamo in un array chiamato cerchi.

145
00:10:59,060 --> 00:11:07,200
Quindi, ogni volta che viene chiamato un nuovo fotogramma Ogni fotogramma dell'animazione passa attraverso tutti i cerchi.

146
00:11:07,520 --> 00:11:13,180
E per ognuno ne aggiungiamo uno alla hewe e moltiplichiamo le dimensioni della scala per il punto nove.

147
00:11:13,430 --> 00:11:17,260
Quindi lo stiamo rimpicciolendo appena per ogni fotogramma.

148
00:11:17,360 --> 00:11:22,130
Ma ci sono così tanti frame che in realtà si restringono abbastanza rapidamente e possiamo

149
00:11:22,130 --> 00:11:26,540
sbarazzarci del nostro cerchio animato ora che inizia con il caricamento della pagina.

150
00:11:26,540 --> 00:11:28,240
Non vogliamo iniziare con uno schermo nero.

151
00:11:28,250 --> 00:11:30,700
E poi quando premi un tasto, aggiungiamo un cerchio.

152
00:11:30,710 --> 00:11:33,320
Quindi proviamolo.

153
00:11:33,320 --> 00:11:37,110
Eccoci.

154
00:11:37,130 --> 00:11:40,920
Quindi questo è quasi esattamente allo stesso modo.

155
00:11:40,980 --> 00:11:43,130
Ecco il suono.

156
00:11:43,130 --> 00:11:51,260
Una grande differenza è che il colore dice che ogni tasto ha un colore assegnato qui, quindi Q è blu una

157
00:11:52,220 --> 00:11:54,000
metà blu più scura.

158
00:11:54,110 --> 00:11:55,810
È grigio?

159
00:11:55,980 --> 00:12:02,310
Quindi sul nostro è un viola proprio ora qui stiamo impostando tutti per iniziare è arancione e quindi cambiare

160
00:12:02,310 --> 00:12:03,070
la tonalità.

161
00:12:03,500 --> 00:12:08,500
Quindi dovremo sistemarlo, ma intendo aspettare di farlo finché non aggiungiamo il suono.

162
00:12:08,510 --> 00:12:10,990
Quindi abbiamo finito per ora.

163
00:12:11,210 --> 00:12:16,820
C'è una piccola ottimizzazione che ne farà la fine perché al momento non rimuoviamo

164
00:12:16,820 --> 00:12:19,000
mai quei cerchi dall'array circle.

165
00:12:19,040 --> 00:12:25,490
Quindi, anche se sapessi dopo 10 secondi che il cerchio è andato anche dopo tre secondi, non lo vediamo.

166
00:12:25,490 --> 00:12:27,330
Tecnicamente è ancora in quella matrice.

167
00:12:27,620 --> 00:12:29,540
Quindi non è l'ideale.

168
00:12:29,540 --> 00:12:34,640
cerchi che avevamo creato e non li vediamo nessuno, non vorremmo ricorrere a tutti loro.

169
00:12:34,640 --> 00:12:36,170
Se avessimo avuto diecimila

170
00:12:36,170 --> 00:12:41,360
Quindi nell'ultimo video ti mostrerò come rimuovere un cerchio quando sappiamo che è sparito o quando

171
00:12:41,360 --> 00:12:43,090
sappiamo che non è più fattibile.

172
00:12:43,490 --> 00:12:45,320
OK, quindi lavoreremo con il suono