1
00:00:00,240 --> 00:00:00,610
OK.

2
00:00:00,690 --> 00:00:01,960
Quindi iniziamo qui.

3
00:00:02,040 --> 00:00:07,390
E questo video si concentrerà su come impostare Paperchase e fare alcune semplici e semplici animazioni.

4
00:00:07,440 --> 00:00:09,110
Quindi niente audio ancora.

5
00:00:09,120 --> 00:00:12,400
Per prima cosa farò notare che sono in una nuova directory che ho creato.

6
00:00:12,720 --> 00:00:14,930
Ho aggiunto la directory dei suoni qui.

7
00:00:14,940 --> 00:00:19,500
Quindi assicurati di non doverlo fare necessariamente per questo video perché non suoni i

8
00:00:19,500 --> 00:00:19,970
suoni.

9
00:00:19,980 --> 00:00:25,950
Ma se vuoi seguire una directory, assicurati di trascinare o copiare la cartella dei suoni

10
00:00:25,950 --> 00:00:26,820
in essa.

11
00:00:26,850 --> 00:00:33,960
La prossima cosa che devi fare è creare il nostro file in modo che io faccia un file salvandolo

12
00:00:34,740 --> 00:00:38,650
nella directory corretta e lo chiamerò semplicemente cerchi ogni volta.

13
00:00:39,810 --> 00:00:46,490
Bene io nella nostra h tim L. Scheletro ovviamente proprio così e lo lasceremo a quello per ora.

14
00:00:46,800 --> 00:00:51,110
Quindi apriamolo non dovrebbe davvero vedere nulla.

15
00:00:51,120 --> 00:00:53,710
Ora andiamo al genio della carta.

16
00:00:54,000 --> 00:00:55,370
Ancora una volta mi piace molto questo.

17
00:00:55,560 --> 00:01:00,530
Ma andremo via da questo e andremo a scaricare per iniziare.

18
00:01:01,350 --> 00:01:06,390
E la prima cosa che faremo è scaricare la versione più recente che ho già fatto.

19
00:01:07,260 --> 00:01:10,810
Quindi quando hai finito con quello sarà simile a questo.

20
00:01:11,010 --> 00:01:15,050
E la prima cosa che possiamo fare è dare un'occhiata nella directory degli esempi.

21
00:01:15,090 --> 00:01:19,600
Diamo un'occhiata alla stella animata animata.

22
00:01:19,860 --> 00:01:23,880
Molto divertente da giocare con questo mi fa girare la testa così ho intenzione di spegnerlo.

23
00:01:23,880 --> 00:01:26,280
Ma puoi dare un'occhiata anche ad altri.

24
00:01:26,280 --> 00:01:28,300
Candy Crash.

25
00:01:29,310 --> 00:01:32,010
Quindi c'è una bella animazione che puoi fare.

26
00:01:32,130 --> 00:01:35,590
C'è un po 'di fisica coinvolta qui.

27
00:01:35,610 --> 00:01:38,120
Cos'altro abbiamo.

28
00:01:38,130 --> 00:01:45,110
Questa animazione alla moda e tanti altri sei tu.

29
00:01:45,110 --> 00:01:49,290
Mi piace molto questo tipo di effetto di parallasse quando muovi il mouse.

30
00:01:49,830 --> 00:01:50,150
OK.

31
00:01:50,190 --> 00:01:52,400
Quindi puoi passare ore a fare questo.

32
00:01:52,410 --> 00:01:55,450
Ci sono molti ottimi esempi in cui puoi aprirne uno se lo desideri.

33
00:01:55,470 --> 00:01:56,980
Dai un'occhiata a come funziona.

34
00:01:57,060 --> 00:02:04,500
Diamo un'occhiata a quello spazio una prima cosa che vedrai che stiamo includendo la carta J. S. Abbiamo bisogno di quel file, naturalmente, della biblioteca, proprio come abbiamo bisogno di Jay Querrey.

35
00:02:04,590 --> 00:02:08,060
Ma c'è qualcosa che non hai mai visto prima,

36
00:02:08,460 --> 00:02:14,670
che è che abbiamo un tipo di script uguale a uno script di testo su carta.

37
00:02:14,730 --> 00:02:16,070
Quindi c'è un particolare tipo di

38
00:02:16,260 --> 00:02:22,620
file o uno script che possiamo scrivere chiamato script di carta che è un linguaggio specifico del dominio che fondamentalmente è un linguaggio che è stato creato specificamente per paperchase.

39
00:02:22,620 --> 00:02:29,240
Quindi non è qualcosa che funzionerà a meno che non includiamo Paperchase.

40
00:02:29,250 --> 00:02:33,350
E poi vedi anche questo canvas attributo canvas uguale a canvas.

41
00:02:33,570 --> 00:02:37,960
Quindi questo è un po 'strano che una tela sia un elemento innamorato invecchiato.

42
00:02:37,980 --> 00:02:42,370
Quindi in realtà è dove tutto ciò che facciamo.

43
00:02:42,540 --> 00:02:45,550
Ti mostrerò ispezionare questo adesso.

44
00:02:45,600 --> 00:02:47,590
Questa è la versione funzionante o la versione finale.

45
00:02:47,730 --> 00:02:50,280
Se prima do un'occhiata, ti mostro come funziona.

46
00:02:50,380 --> 00:02:54,070
Ancora una volta, se guardo e guardo questo sfondo nero, non è il corpo.

47
00:02:54,070 --> 00:02:59,450
È una cosa chiamata canvas e canvas è un

48
00:02:59,700 --> 00:03:06,900
elemento HMO che funge fondamentalmente da luogo per animazioni e grafica.

49
00:03:06,930 --> 00:03:08,040
Quindi, se vado a

50
00:03:08,280 --> 00:03:15,990
DN, un look per la tela può vedere che è stato aggiunto un odore vecchio di cinque a ciascun elemento di cannabis fumogena per disegnare la grafica come script in Javascript.

51
00:03:16,020 --> 00:03:19,010
Quindi questo è tutto.

52
00:03:19,290 --> 00:03:20,300
È un elemento nella tela che da solo senza javascript non fa nulla.

53
00:03:20,310 --> 00:03:26,000
Ma poi andiamo e aggiungiamo javascript per dire cose come renderlo rettangolare qui

54
00:03:26,280 --> 00:03:33,030
renderlo verde fai una forma tridimensionale qui fai questa animazione e facciamo tutto con Javascript.

55
00:03:33,030 --> 00:03:37,140
Quindi carta J. S. usa un elemento canvas.

56
00:03:37,140 --> 00:03:40,830
È il momento in cui aggiunge tutte le animazioni a tutta la grafica.

57
00:03:40,920 --> 00:03:45,000
Quindi abbiamo bisogno di avere una tela sulla nostra pagina come puoi vedere per questo esempio di spazio.

58
00:03:45,000 --> 00:03:49,140
Se vado in fondo, l'unica cosa nel corpo è questa

59
00:03:49,560 --> 00:03:56,370
qui una tela e ha un ID uguale alla tela e anche lo sfondo è nero.

60
00:03:56,370 --> 00:03:59,760
Quindi Id uguale alla tela corrisponde a questa linea proprio qui.

61
00:03:59,850 --> 00:04:04,500
Tela uguale a tela.

62
00:04:04,500 --> 00:04:06,300
Quindi stiamo solo dicendo a

63
00:04:06,300 --> 00:04:14,220
questo file di script cartaceo oa questo script di script cartaceico quale ID cercare, nell'esempio che ha appena chiamato ma tela.

64
00:04:14,220 --> 00:04:16,460
Quindi faremo qualcosa di molto simile a questo.

65
00:04:16,800 --> 00:04:18,890
Ma prima di arrivarci dobbiamo assicurarci di includere la carta sì.

66
00:04:18,930 --> 00:04:22,820
Quindi quando vai al download.

67
00:04:23,220 --> 00:04:26,250
E invece di aprire degli esempi, andremo a indicizzare

68
00:04:26,250 --> 00:04:32,190
e poi potremo scegliere tra la carta piena o la carta piena di uomini e comprenderne la piena qui.

69
00:04:32,190 --> 00:04:35,870
Quindi ho intenzione di copiarlo nella nostra

70
00:04:35,910 --> 00:04:45,450
directory in modo da riempirlo di carta Dasch ma poi nella nostra app dobbiamo assicurarci di includerlo.

71
00:04:45,450 --> 00:04:47,410
Quindi Source è uguale a Dasch full jap in carta proprio così e salva.

72
00:04:47,670 --> 00:04:55,200
E poi quello che faremo è solo aggiornare la pagina in Chrome.

73
00:04:55,620 --> 00:04:59,760
Assicurati di non ricevere un errore.

74
00:05:00,120 --> 00:05:01,630
Grande.

75
00:05:01,740 --> 00:05:02,390
Quindi ha trovato il file bene.

76
00:05:02,430 --> 00:05:04,590
Ora andiamo ai documenti di paper genius e guardiamo i tutorial, quindi in realtà non l'ho fatto prima.

77
00:05:04,590 --> 00:05:11,580
Ma voglio leggere la descrizione di quale carta è JSA.

78
00:05:12,120 --> 00:05:15,490
Quindi è un framework di scripting di grafica vettoriale open source che va avanti con l'età fino ai miei cinque canvas.

79
00:05:15,780 --> 00:05:21,290
un sacco di potenti funzionalità per creare e lavorare con la grafica vettoriale e

80
00:05:22,080 --> 00:05:28,200
le curve di Bezier, tutte perfettamente racchiuse in un'interfaccia di programmazione coerente e pulita ben progettata.

81
00:05:28,230 --> 00:05:33,540
Offre un modello di oggetto di documento di slash grafico di scena pulito e

82
00:05:33,540 --> 00:05:35,950
Così gentile di un boccone.

83
00:05:36,000 --> 00:05:37,540
Fondamentalmente è una libreria grafica per la libreria di animazione della libreria di disegno.

84
00:05:37,560 --> 00:05:42,120
È davvero molto popolare.

85
00:05:42,120 --> 00:05:43,560
Ce ne sono alcuni

86
00:05:43,560 --> 00:05:50,250
là fuori quindi non è che non è come una query in cui è praticamente l'unica libreria di manipolazione DOM.

87
00:05:50,250 --> 00:05:52,270
La libreria di gestione degli eventi.

88
00:05:52,290 --> 00:05:54,030
dicendo che è il più popolare.

89
00:05:54,030 --> 00:05:59,400
Ci sono molte animazioni nelle cose grafiche là fuori, ma la carta è che sono abbastanza fiducioso

90
00:05:59,400 --> 00:06:00,790
OK, torniamo ai tutorial e dai un'occhiata per iniziare.

91
00:06:01,110 --> 00:06:06,660
Penso di sì iniziare a lavorare con la carta.

92
00:06:06,660 --> 00:06:09,000
Sì.

93
00:06:09,020 --> 00:06:09,900
E scorreremo verso il basso e daremo un'occhiata al loro esempio qui.

94
00:06:10,470 --> 00:06:14,280
Quindi quello che potremmo fare è copiare tutta questa cosa.

95
00:06:14,820 --> 00:06:17,380
Ma voglio farlo un pezzo alla volta in modo che tu veda come funziona.

96
00:06:17,400 --> 00:06:21,290
Cominciamo copiando questa tela, copia l'intera linea e la inseriremo nel nostro corpo.

97
00:06:21,540 --> 00:06:29,270
Quindi tela I. D. è uguale alla mia tela e se aggiorno la pagina non vedremo nulla.

98
00:06:29,970 --> 00:06:36,180
Se ci aspettassimo, vedremmo che

99
00:06:36,270 --> 00:06:44,100
c'è una tela, ma se torniamo copiamo questo testo o tipo di script perché la tela di testo è di tela.

100
00:06:44,100 --> 00:06:48,260
E mettiamolo qui e incollalo.

101
00:06:48,260 --> 00:06:52,850
Quindi, se guardiamo a quello che sta succedendo qui, alcuni

102
00:06:53,130 --> 00:06:59,150
commenti positivi dicono che crea un tracciato G-S su carta per tracciare una linea.

103
00:06:59,170 --> 00:07:00,000
Quindi facciamo un percorso e vedrai molte sintassi qui che non hai mai visto.

104
00:07:00,120 --> 00:07:04,400
E ancora questo è il punto.

105
00:07:04,410 --> 00:07:05,730
Il punto è che ti sto costringendo a vedere alcune cose nuove per leggere i documenti.

106
00:07:05,940 --> 00:07:09,740
Può desensibilizzarti a questa sensazione di non so

107
00:07:09,800 --> 00:07:16,470
cosa sto facendo Non ho mai visto questo codice prima di non sapere come funziona.

108
00:07:16,480 --> 00:07:17,890
Questo è il punto della biblioteca.

109
00:07:17,940 --> 00:07:19,370
Non devi sapere come funziona in particolare per qualcosa come le animazioni.

110
00:07:19,380 --> 00:07:23,310
Sii felice che qualcun altro si prenda cura di te per te.

111
00:07:23,310 --> 00:07:26,120
Sono sicuro che mi ha salvato la vita un sacco di volte.

112
00:07:26,130 --> 00:07:28,700
Quindi creiamo un nuovo percorso qui salvarlo su una variabile.

113
00:07:28,920 --> 00:07:33,070
Cambiamo il colore del tratto in nero e poi creiamo un punto per l'inizio

114
00:07:33,070 --> 00:07:40,800
al 100 virgola 100 e poi spostiamo il nostro percorso fino a quell'inizio e quindi disegniamo una linea da iniziare più 100 X e negativa 50 y.

115
00:07:40,800 --> 00:07:50,960
Quindi ti mostrerò esattamente cosa fa ma traccia una linea che parte da 100 100 e poi sposta

116
00:07:51,210 --> 00:07:57,780
quella linea o collega il primo punto a 300 virgola 50.

117
00:07:57,780 --> 00:08:04,800
Quindi, se diamo un'occhiata, assicurati che tutto funzioni se siamo freschi.

118
00:08:04,800 --> 00:08:09,260
Finiamo con una linea.

119
00:08:10,260 --> 00:08:12,160
Quindi la cosa migliore da fare quando hai qualcosa di nuovo come questo è giocare.

120
00:08:13,170 --> 00:08:16,730
Quindi prova a cambiare questo.

121
00:08:17,040 --> 00:08:18,480
Quindi è rosso e start ora è 0 100.

122
00:08:18,630 --> 00:08:25,980
Eccoci, abbiamo semplicemente spostato la nostra linea o cambiamolo per essere qualcosa di più drastico come 500.

123
00:08:25,980 --> 00:08:33,250
Quindi puoi giocare con questo tutto il giorno.

124
00:08:33,510 --> 00:08:36,070
Ma quello che voglio veramente sottolineare è

125
00:08:36,420 --> 00:08:43,140
che stiamo creando uno script di script cartaceo non di testo quindi è uno script di carta javascript

126
00:08:43,140 --> 00:08:50,340
e stiamo impostando questo canvas attributo canvas uguale alla mia tela che è il nome o l'ID che abbiamo assegnato.

127
00:08:50,340 --> 00:08:51,580
Quindi questi devono corrispondere

128
00:08:51,660 --> 00:08:58,110
e il punto è solo quello di dire a questo file di script cartaceo dove disegnare le cose.

129
00:08:58,110 --> 00:08:58,530
Quale tela usare.

130
00:08:58,560 --> 00:09:00,040
Quindi possiamo giocare un po 'di più.

131
00:09:00,300 --> 00:09:02,360
E ti consiglio vivamente

132
00:09:02,460 --> 00:09:09,990
di interrompere il video e dare un'occhiata ai tutorial per provare altre cose.

133
00:09:09,990 --> 00:09:10,890
Quindi ti indicherò solo le forme predefinite del percorso che è quello che useremo.

134
00:09:11,100 --> 00:09:17,720
Faremo delle cerchie con la nostra applicazione qui.

135
00:09:17,820 --> 00:09:21,280
Quindi questo è ciò che dovremo fare.

136
00:09:21,690 --> 00:09:24,270
un punto per fare un cerchio.

137
00:09:24,690 --> 00:09:30,510
Copiamo questo codice proprio qui, quindi Pat nuovo percorso punto cerchio e poi devi dare

138
00:09:30,630 --> 00:09:31,820
E poi il raggio sembra.

139
00:09:32,160 --> 00:09:34,240
Quindi puoi vedere che c'è

140
00:09:34,320 --> 00:09:43,770
una spiegazione, quindi ha bisogno di un punto centrale x 100 y 70 e un raggio di 50 e poi un colore di riempimento.

141
00:09:43,770 --> 00:09:44,690
Diamo un'occhiata, copia questo in fondo al nostro codice e guarda cosa succede.

142
00:09:45,000 --> 00:09:51,120
Il che è un po 'quello che fai molto con J S e librerie simili.

143
00:09:51,720 --> 00:09:56,160
Hai appena sperimentato.

144
00:09:56,340 --> 00:09:57,340
Quindi cambiamo raggio per essere 10.

145
00:09:57,480 --> 00:10:01,520
Ecco qua.

146
00:10:01,530 --> 00:10:02,880
Quindi potremmo anche provare a fare un altro cerchio semplicemente copiandolo su un'altra linea.

147
00:10:03,540 --> 00:10:09,000
Chiamiamolo var circle 2 uguale a new path dot.

148
00:10:09,150 --> 00:10:15,610
E rendiamo questo molto grande e viola.

149
00:10:15,840 --> 00:10:18,340
Quindi, nuovo punto e mettiamolo a 50.

150
00:10:18,630 --> 00:10:22,250
Vieni a 50 e sarà enorme.

151
00:10:22,250 --> 00:10:25,740
Quindi gli danno un raggio di 300 e quindi il cerchio per riempire il colore equivale al viola.

152
00:10:25,740 --> 00:10:34,730
Proprio come quello rinfresco.

153
00:10:34,830 --> 00:10:38,180
E puoi vedere che ci ritroviamo con quel gigantesco cerchio che in

154
00:10:38,670 --> 00:10:43,650
realtà non puoi dire quanto è grande perché la nostra tela non ha occupato l'intera larghezza del nostro schermo.

155
00:10:43,710 --> 00:10:46,740
Quindi facciamolo dopo perché vogliamo che vogliamo che la nostra tela occupi l'intera larghezza.

156
00:10:46,950 --> 00:10:52,860
Quindi andrò a creare un nuovo foglio di stile, quindi ho aggiunto il

157
00:10:52,860 --> 00:11:00,660
tag di collegamento in modo che Tref sia uguale al punto del cerchio SS che non esiste.

158
00:11:00,660 --> 00:11:01,790
E poi

159
00:11:02,430 --> 00:11:10,870
salviamo un file chiamato Circle Stut, vedi valutare e quello che faremo è aggiungere il canvas al 100 percento.

160
00:11:10,900 --> 00:11:12,210
E diamo anche uno sfondo nero.

161
00:11:12,840 --> 00:11:17,930
E se siamo freschi, puoi vedere che siamo vicini ma abbiamo alcune cose.

162
00:11:17,930 --> 00:11:21,880
Il primo dei quali è che il nostro corpo in realtà non scende fino in fondo.

163
00:11:21,870 --> 00:11:25,210
Quindi la nostra tela riprende quando il 100 percento della larghezza.

164
00:11:25,230 --> 00:11:28,860
Ma anche se ora gli diamo il 100 percento di altezza,

165
00:11:28,980 --> 00:11:31,830
non cambierà realmente il modo in cui vogliamo farlo.

166
00:11:35,490 --> 00:11:38,840
Quindi abbiamo anche questo margine di cui vogliamo sbarazzarci.

167
00:11:38,850 --> 00:11:41,570
Quindi, piuttosto che passare troppo tempo a esaminare, ti mostrerò semplicemente quello che dobbiamo fare.

168
00:11:42,000 --> 00:11:46,390
Bene, imposta l'altezza al 100% e il margine a zero.

169
00:11:46,770 --> 00:11:54,500
E se aggiorno la pagina ora occupa tutto lo schermo.

170
00:11:54,810 --> 00:11:58,490
Quindi, se vuoi approfondire i dettagli e capire esattamente il motivo per

171
00:11:58,860 --> 00:12:05,160
cui l'abbiamo fatto, ispeziona il corpo prima di aggiungere questo codice, quindi ispeziona di nuovo il testo e vedrai cosa succede.

172
00:12:05,190 --> 00:12:10,440
Fondamentalmente ci stiamo solo assicurando che il corpo occupi l'intera larghezza e altezza e che non ci

173
00:12:10,560 --> 00:12:15,570
siano margini, il che significa che la nostra tela si espanderà per occupare anche l'intero spazio.

174
00:12:15,630 --> 00:12:20,020
OK.

175
00:12:20,250 --> 00:12:20,910
Quindi abbiamo creato una tela ora che è davvero l'ultima cosa che farò in questo video.

176
00:12:20,910 --> 00:12:24,680
Volevo solo presentarti come i documenti cartacei abbiano script di script cartacei.

177
00:12:24,690 --> 00:12:30,420
Diamo una tela e poi inseriamo del codice qui che non hai mai visto prima.

178
00:12:30,420 --> 00:12:35,140
Molto di questo non l'ho mai visto prima di aver realizzato questo video o fino a quando non ho realizzato questo progetto per questo video.

179
00:12:35,190 --> 00:12:40,770
L'ho sicuramente visto prima.

180
00:12:41,100 --> 00:12:42,380
Questo video esatto.

181
00:12:42,390 --> 00:12:43,820
Ma il punto è che è nuovo.

182
00:12:43,830 --> 00:12:46,580
Ed è per questo che lo stiamo facendo.

183
00:12:46,650 --> 00:12:48,130
È un'abilità davvero importante essere in grado di prendere il codice redox e in pratica copiarlo e modificarlo.

184
00:12:48,150 --> 00:12:54,200
Grande.

185
00:12:54,330 --> 00:12:54,980
Quindi nel prossimo

186
00:12:54,990 --> 00:12:59,940
video ti offrirò un esercizio rapido opzionale, quindi se vuoi solo arrivare al progetto e saltare l'esperienza di apprendimento educativo come vuoi.

187
00:12:59,940 --> 00:13:05,980
Ma se arrivi solo a una specie di ricompensa, salta il prossimo video.

188
00:13:06,000 --> 00:13:11,170
Ti consiglierei di farlo comunque.

189
00:13:11,190 --> 00:13:13,040
Non faremo la cosa più

190
00:13:13,050 --> 00:13:17,070
impressionante, ma ho intenzione di fare un esercizio con delle cerchie.

191
00:13:17,070 --> 00:13:17,860
Molto eccitante.

192
00:13:17,940 --> 00:13:18,500
Lo so.

193
00:13:18,510 --> 00:13:18,960
OK.

194
00:13:19,200 --> 00:13:19,480
Ci vediamo allora.

195
00:13:19,500 --> 00:13:20,360