1
00:00:00,240 --> 00:00:00,610
ESTÁ BEM.

2
00:00:00,690 --> 00:00:01,960
Então vamos começar aqui.

3
00:00:02,040 --> 00:00:07,390
E este vídeo se concentrará em colocar o Paperchase configurado e fazer algumas animações simples e simples.

4
00:00:07,440 --> 00:00:09,110
Então, não há áudio ainda.

5
00:00:09,120 --> 00:00:12,400
Primeiro, vou apontar que estou em um novo diretório que criei.

6
00:00:12,720 --> 00:00:14,930
Eu adicionei esse diretório de sons aqui.

7
00:00:14,940 --> 00:00:19,500
Então, certifique-se de que você não precisa fazê-lo necessariamente para este vídeo, porque você não estará tocando

8
00:00:19,500 --> 00:00:19,970
os sons.

9
00:00:19,980 --> 00:00:25,950
Mas se você deseja acompanhar, faça um diretório certifique-se de arrastar ou copiar a pasta de sons

10
00:00:25,950 --> 00:00:26,820
para ele.

11
00:00:26,850 --> 00:00:33,960
A próxima coisa que você precisa fazer é fazer o nosso arquivo para que eu faça um arquivo, salve-o

12
00:00:34,740 --> 00:00:38,650
no diretório correto e vou chamar círculos de cada vez.

13
00:00:39,810 --> 00:00:46,490
Bem, eu na nossa h tim L. Esqueleto, é claro, assim, e vamos deixar isso por enquanto.

14
00:00:46,800 --> 00:00:51,110
Então, vamos apenas abri-lo não deve realmente ver nada.

15
00:00:51,120 --> 00:00:53,710
Agora vamos ao genio do papel.

16
00:00:54,000 --> 00:00:55,370
Mais uma vez eu realmente amo esse.

17
00:00:55,560 --> 00:01:00,530
Mas nós vamos nos afastar disso e nós vamos baixar para começar.

18
00:01:01,350 --> 00:01:06,390
E a primeira coisa que faremos é simplesmente baixar a versão mais recente que já fiz.

19
00:01:07,260 --> 00:01:10,810
Então, quando você terminar com isso, ficará assim.

20
00:01:11,010 --> 00:01:15,050
E a primeira coisa que podemos fazer é apenas dar uma olhada no diretório de exemplos.

21
00:01:15,090 --> 00:01:19,600
Vamos dar uma olhada na animada estrela animada.

22
00:01:19,860 --> 00:01:23,880
Muito divertido de brincar com isso me deixa tonto, então eu vou desligar isso.

23
00:01:23,880 --> 00:01:26,280
Mas você pode dar uma olhada em alguns dos outros também.

24
00:01:26,280 --> 00:01:28,300
Choque de doces.

25
00:01:29,310 --> 00:01:32,010
Então, há algumas animações legais que você pode fazer.

26
00:01:32,130 --> 00:01:35,590
Há um pouco de física envolvida aqui.

27
00:01:35,610 --> 00:01:38,120
O que mais nos temos.

28
00:01:38,130 --> 00:01:45,110
Esta animação de linha legal e um monte de outros são você.

29
00:01:45,110 --> 00:01:49,290
Eu realmente gosto desse tipo desse efeito de paralaxe quando você move o mouse.

30
00:01:49,830 --> 00:01:50,150
ESTÁ BEM.

31
00:01:50,190 --> 00:01:52,400
Então você pode passar horas fazendo isso.

32
00:01:52,410 --> 00:01:55,450
Há muitos exemplos excelentes que você pode abrir qualquer um deles se desejar.

33
00:01:55,470 --> 00:01:56,980
Dê uma olhada em como funciona.

34
00:01:57,060 --> 00:02:04,500
Então, vejamos esse espaço uma primeira coisa que você verá que estamos incluindo o papel J. S. Precisamos desse arquivo, é claro, da biblioteca exatamente como precisamos para Jay Querrey.

35
00:02:04,590 --> 00:02:08,060
Mas há algo que você não viu antes, e

36
00:02:08,460 --> 00:02:14,670
é que nós temos um tipo de script igual ao script de texto de bloco de texto.

37
00:02:14,730 --> 00:02:16,070
Portanto, há um tipo particular de arquivo

38
00:02:16,260 --> 00:02:22,620
ou um script que podemos escrever chamado script em papel que é uma linguagem específica do domínio, que basicamente é um idioma que é feito especificamente para a pasta de papel.

39
00:02:22,620 --> 00:02:29,240
Portanto, não é algo que funcionará a menos que possamos incluir Paperchase.

40
00:02:29,250 --> 00:02:33,350
E então, você também vê essa tela de atributo de tela igual a tela.

41
00:02:33,570 --> 00:02:37,960
Então, essa é uma espécie de estranho que uma tela é um elemento de hinário envelhecido.

42
00:02:37,980 --> 00:02:42,370
Então, na verdade, é onde tudo o que fazemos.

43
00:02:42,540 --> 00:02:45,550
Vou mostrar-lhe inspecionar isso agora.

44
00:02:45,600 --> 00:02:47,590
Esta é a versão funcional ou a versão final.

45
00:02:47,730 --> 00:02:50,280
Se eu olhar primeiro para mostrar como funciona.

46
00:02:50,380 --> 00:02:54,070
Mais uma vez, se eu examinar e inspecionar este fundo preto não é o corpo.

47
00:02:54,070 --> 00:02:59,450
É algo chamado lona e tela é um elemento

48
00:02:59,700 --> 00:03:06,900
HMO que basicamente funciona como um lugar para fazer animações e gráficos.

49
00:03:06,930 --> 00:03:08,040
Então, se eu for para

50
00:03:08,280 --> 00:03:15,990
o DN, um olhar para a tela pode ver que adicionou um cheiro envelhecido cinco para cada elemento de cannabis de fumaça pode ser usado para desenhar gráficos para ser um script em JavaScript.

51
00:03:16,020 --> 00:03:19,010
Então é realmente tudo o que é.

52
00:03:19,290 --> 00:03:20,300
É um elemento em tela que por si só sem javascript ele realmente não faz nada.

53
00:03:20,310 --> 00:03:26,000
Mas então, vamos e adicionamos javascript para dizer coisas como fazer retângulo aqui,

54
00:03:26,280 --> 00:03:33,030
torná-lo verde, faça um formulário 3D, faça essa animação e nós fazemos tudo com Javascript.

55
00:03:33,030 --> 00:03:37,140
Então, papel J. S. usa um elemento de tela.

56
00:03:37,140 --> 00:03:40,830
É o palco onde é adicionado em todas as animações em todos os gráficos.

57
00:03:40,920 --> 00:03:45,000
Então, precisamos ter uma tela na nossa página, como você pode ver para este exemplo de espaço.

58
00:03:45,000 --> 00:03:49,140
Se eu for até o fundo, a única coisa no corpo é

59
00:03:49,560 --> 00:03:56,370
esta aqui uma tela e tem ID igual à tela e também o plano de fundo definido para preto.

60
00:03:56,370 --> 00:03:59,760
Então Id igual a tela corresponde a esta linha aqui.

61
00:03:59,850 --> 00:04:04,500
Canvas é igual à tela.

62
00:04:04,500 --> 00:04:06,300
Então, estamos apenas informando este arquivo

63
00:04:06,300 --> 00:04:14,220
de script em papel ou este script de script de papel que ID deve procurar no exemplo que acabou de chamar, mas de tela.

64
00:04:14,220 --> 00:04:16,460
Então, vamos fazer algo muito parecido com isso.

65
00:04:16,800 --> 00:04:18,890
Mas antes de chegar lá, precisamos nos certificar de que incluímos papel sim.

66
00:04:18,930 --> 00:04:22,820
Então, quando você vai ao download.

67
00:04:23,220 --> 00:04:26,250
E, ao invés de abrir exemplos, vamos olhar indexados

68
00:04:26,250 --> 00:04:32,190
e então podemos escolher o papel cheio ou o papel cheio de homens e entender o completo aqui.

69
00:04:32,190 --> 00:04:35,870
Então, vou copiar isso para o nosso

70
00:04:35,910 --> 00:04:45,450
diretório para que o papel Dasch cheio, mas nós, em nosso próprio aplicativo, precisamos ter certeza de incluir isso.

71
00:04:45,450 --> 00:04:47,410
Então Source é igual ao papel Dasch full japes assim e salva.

72
00:04:47,670 --> 00:04:55,200
E então, o que faremos é atualizar a página no Chrome.

73
00:04:55,620 --> 00:04:59,760
Certifique-se de que não receba um erro.

74
00:05:00,120 --> 00:05:01,630
Ótimo.

75
00:05:01,740 --> 00:05:02,390
Então encontrou o arquivo bem.

76
00:05:02,430 --> 00:05:04,590
Agora vamos aos documentos do genial do papel e olhe para os tutoriais, então eu realmente não fiz isso no início.

77
00:05:04,590 --> 00:05:11,580
Mas eu quero ler a descrição do documento JSA.

78
00:05:12,120 --> 00:05:15,490
Portanto, é uma estrutura de scripts de gráficos vetoriais de código aberto que é executada em cima da idade para as minhas cinco telas.

79
00:05:15,780 --> 00:05:21,290
limpo e muita funcionalidade poderosa para criar e trabalhar com gráficos vetoriais e

80
00:05:22,080 --> 00:05:28,200
curvas de Bezier, tudo bem envolvido em uma interface de programação consistente e bem projetada.

81
00:05:28,230 --> 00:05:33,540
Oferece um modelo de objeto de documento de barra de gráfico de cena

82
00:05:33,540 --> 00:05:35,950
Tão gentil um bocado.

83
00:05:36,000 --> 00:05:37,540
Basicamente, é uma biblioteca de gráficos de biblioteca de animação de biblioteca de desenho.

84
00:05:37,560 --> 00:05:42,120
Isso é realmente muito popular.

85
00:05:42,120 --> 00:05:43,560
Existem alguns deles por

86
00:05:43,560 --> 00:05:50,250
aí, não é como uma consulta onde é praticamente a única biblioteca de manipulação de DOM.

87
00:05:50,250 --> 00:05:52,270
A única biblioteca de tratamento de eventos.

88
00:05:52,290 --> 00:05:54,030
dizendo que é o mais popular.

89
00:05:54,030 --> 00:05:59,400
Há muita animação em coisas gráficas lá fora, mas o papel é é que eu estou bastante confiante

90
00:05:59,400 --> 00:06:00,790
OK, então vamos voltar aos tutoriais e dar uma olhada em começar.

91
00:06:01,110 --> 00:06:06,660
Eu acho que sim começar a trabalhar com papel.

92
00:06:06,660 --> 00:06:09,000
Sim.

93
00:06:09,020 --> 00:06:09,900
E vamos nos deslocar para baixo e dar uma olhada em seu exemplo aqui.

94
00:06:10,470 --> 00:06:14,280
Então, o que podemos fazer é copiar tudo isso.

95
00:06:14,820 --> 00:06:17,380
Mas eu quero fazer uma peça de cada vez para que você veja como ela funciona.

96
00:06:17,400 --> 00:06:21,290
Então, comece por copiar essa tela, copie a linha inteira e colocá-la em nosso corpo.

97
00:06:21,540 --> 00:06:29,270
Então, a lona I. D. é igual a minha tela e se eu atualizar a página, não veremos nada.

98
00:06:29,970 --> 00:06:36,180
Se esperássemos que verássemos, há uma tela

99
00:06:36,270 --> 00:06:44,100
lá, mas se voltarmos, vamos copiar esse texto ou tipo de script porque a tela de script de papel do tamanho do texto é minha tela.

100
00:06:44,100 --> 00:06:48,260
E vamos colocar isso aqui e colar.

101
00:06:48,260 --> 00:06:52,850
Então, se olharmos o que está acontecendo aqui, alguns comentários

102
00:06:53,130 --> 00:06:59,150
agradáveis ​​dizem que ele cria um caminho de papel G-S para desenhar uma linha.

103
00:06:59,170 --> 00:07:00,000
Então, nós fazemos um caminho e você vai ver muita sintaxe aqui que você nunca viu.

104
00:07:00,120 --> 00:07:04,400
E, novamente, esse é o ponto.

105
00:07:04,410 --> 00:07:05,730
O objetivo é que eu estou forçando você a ver algumas coisas novas para ler os documentos.

106
00:07:05,940 --> 00:07:09,740
Pode desensibilizar esse sentimento de eu não sei

107
00:07:09,800 --> 00:07:16,470
o que estou fazendo. Nunca vi esse código antes de não saber como ele funciona.

108
00:07:16,480 --> 00:07:17,890
Esse é o ponto da biblioteca.

109
00:07:17,940 --> 00:07:19,370
Você não precisa saber como funciona especialmente para algo como animações.

110
00:07:19,380 --> 00:07:23,310
Apenas fique feliz que outra pessoa esteja cuidando de você.

111
00:07:23,310 --> 00:07:26,120
Eu definitivamente sou salvo minha vida muitas vezes.

112
00:07:26,130 --> 00:07:28,700
Então, criamos um novo caminho aqui, salve-o em uma variável.

113
00:07:28,920 --> 00:07:33,070
Nós mudamos a cor do traço para ser preto e, em seguida, criamos um ponto para

114
00:07:33,070 --> 00:07:40,800
o início em 100 vírgulas 100 e, em seguida, movemos nosso caminho para esse início e, então, desenhamos uma linha para iniciar mais 100 X e negativo 50 y.

115
00:07:40,800 --> 00:07:50,960
Então, vou mostrar-lhe exatamente o que isso faz, mas desenha uma linha a partir de 100 100 e, em

116
00:07:51,210 --> 00:07:57,780
seguida, move essa linha ou conecta o primeiro ponto para 300 vírgulas 50.

117
00:07:57,780 --> 00:08:04,800
Então, se dar uma olhada, certifique-se de que tudo está funcionando se estivermos frescos.

118
00:08:04,800 --> 00:08:09,260
Acabamos com uma linha.

119
00:08:10,260 --> 00:08:12,160
Então a melhor coisa a fazer quando você tem algo novo como este é jogar.

120
00:08:13,170 --> 00:08:16,730
Então tente mudar isso.

121
00:08:17,040 --> 00:08:18,480
Então é vermelho e começar é agora 0 100.

122
00:08:18,630 --> 00:08:25,980
Aí, nós apenas mudamos nossa linha ou mudamos isso para ser algo mais drástico como 500.

123
00:08:25,980 --> 00:08:33,250
Então você pode brincar com isso durante todo o dia.

124
00:08:33,510 --> 00:08:36,070
Mas o que eu quero realmente apontar é

125
00:08:36,420 --> 00:08:43,140
que estamos criando um script de script em papel, não texto, então é script de papel do javascript e estamos

126
00:08:43,140 --> 00:08:50,340
definindo essa tela de atributo de tela igual a minha tela que é o nome ou o ID que nós atribuímos.

127
00:08:50,340 --> 00:08:51,580
Então, estes têm que

128
00:08:51,660 --> 00:08:58,110
combinar e todo esse ponto é apenas para dizer a este arquivo de script de papel onde desenhar coisas.

129
00:08:58,110 --> 00:08:58,530
Que tela usar.

130
00:08:58,560 --> 00:09:00,040
Então, podemos brincar um pouco mais.

131
00:09:00,300 --> 00:09:02,360
E eu recomendo que

132
00:09:02,460 --> 00:09:09,990
você pare o vídeo e dê uma olhada nos tutoriais tente algumas outras coisas.

133
00:09:09,990 --> 00:09:10,890
Então, eu apenas vou apontar você para as formas predefinidas do caminho, que é o que usaremos.

134
00:09:11,100 --> 00:09:17,720
Vamos fazer círculos com nosso aplicativo aqui.

135
00:09:17,820 --> 00:09:21,280
Então, é isso que precisamos fazer.

136
00:09:21,690 --> 00:09:24,270
dar um ponto para fazer um círculo.

137
00:09:24,690 --> 00:09:30,510
Vamos apenas copiar este código aqui, então Pat novo caminho ponto círculo e então você tem que

138
00:09:30,630 --> 00:09:31,820
E, em seguida, o raio que parece.

139
00:09:32,160 --> 00:09:34,240
Então, você pode ver que há

140
00:09:34,320 --> 00:09:43,770
uma explicação para que ele precise de um ponto central x 100 y 70 e um raio de 50 e depois uma cor de preenchimento.

141
00:09:43,770 --> 00:09:44,690
Então, dê uma olhada, basta copiar isso para o fundo do nosso código e ver o que acontece.

142
00:09:45,000 --> 00:09:51,120
Qual é o tipo de coisa que você faz muito com J S e bibliotecas semelhantes.

143
00:09:51,720 --> 00:09:56,160
Você apenas experimenta.

144
00:09:56,340 --> 00:09:57,340
Então, vamos mudar o raio para ser 10.

145
00:09:57,480 --> 00:10:01,520
Ai está.

146
00:10:01,530 --> 00:10:02,880
Então, também podemos tentar fazer outro círculo simplesmente copiando isso para outra linha.

147
00:10:03,540 --> 00:10:09,000
Vamos chamá-lo de var círculo 2 é igual ao novo ponto do caminho.

148
00:10:09,150 --> 00:10:15,610
E vamos fazer isso muito grande e roxo.

149
00:10:15,840 --> 00:10:18,340
Então, um novo ponto e vamos colocá-lo aos 50.

150
00:10:18,630 --> 00:10:22,250
Venha um 50 e será enorme.

151
00:10:22,250 --> 00:10:25,740
Então, dê-lhe um raio de 300 e então o círculo para preencher a cor é igual a roxo.

152
00:10:25,740 --> 00:10:34,730
Assim como essa atualização.

153
00:10:34,830 --> 00:10:38,180
E você pode ver que acabamos com esse círculo gigantesco que você

154
00:10:38,670 --> 00:10:43,650
realmente não pode dizer o quão grande é porque nossa tela não ocupou toda a largura da nossa tela.

155
00:10:43,710 --> 00:10:46,740
Então, vamos fazer isso em seguida porque queremos que desejemos que nossa tela ocupe toda a largura.

156
00:10:46,950 --> 00:10:52,860
Então eu irei e criei uma nova folha de estilos, então eu adicionei

157
00:10:52,860 --> 00:11:00,660
uma tag de link aqui, um Tref é igual ao ponto SS do círculo que não existe.

158
00:11:00,660 --> 00:11:01,790
E, em seguida,

159
00:11:02,430 --> 00:11:10,870
vamos salvar um arquivo chamado Circle Stut, veja avaliar e o que faremos é adicionar em tela com 100 por cento.

160
00:11:10,900 --> 00:11:12,210
E vamos também dar um plano de fundo de preto.

161
00:11:12,840 --> 00:11:17,930
E se estamos frescos, você pode ver que estamos perto, mas temos algumas coisas.

162
00:11:17,930 --> 00:11:21,880
O primeiro de tudo é que o nosso corpo na verdade não passa todo o caminho.

163
00:11:21,870 --> 00:11:25,210
Assim, nossa tela ocupa-se quando 100% da largura.

164
00:11:25,230 --> 00:11:28,860
Mas mesmo que lhe dêmos 100 por cento de altura, agora

165
00:11:28,980 --> 00:11:31,830
não vai realmente mudar a maneira como queremos.

166
00:11:35,490 --> 00:11:38,840
Então, também temos essa margem de que queremos livrar.

167
00:11:38,850 --> 00:11:41,570
Então, ao invés de gastar muito tempo, eu vou apenas mostrar o que precisamos fazer.

168
00:11:42,000 --> 00:11:46,390
Bem, basta definir altura para 100% e margem para ser zero.

169
00:11:46,770 --> 00:11:54,500
E se eu atualizar a página agora, ela ocupa a tela cheia.

170
00:11:54,810 --> 00:11:58,490
Então, se você quiser entrar mais em detalhes e entender exatamente por que fizemos

171
00:11:58,860 --> 00:12:05,160
isso, inspecione o corpo antes de adicionar este código e, em seguida, não agradava inspecionar o corpo novamente e você verá o que acontece.

172
00:12:05,190 --> 00:12:10,440
Basicamente, estamos apenas certificando-se de que o corpo ocupa toda a largura e altura e não

173
00:12:10,560 --> 00:12:15,570
há margem, o que significa que nossa tela se expandirá para ocupar esse espaço inteiro também.

174
00:12:15,630 --> 00:12:20,020
ESTÁ BEM.

175
00:12:20,250 --> 00:12:20,910
Então, criamos uma tela agora que é realmente a última coisa que farei neste vídeo.

176
00:12:20,910 --> 00:12:24,680
Eu só queria apresentar-lhe como a papelada é que temos scripts de script em papel.

177
00:12:24,690 --> 00:12:30,420
Damos uma tela e depois colocamos algum código aqui que você nunca viu antes.

178
00:12:30,420 --> 00:12:35,140
Muito disso, eu nunca vi antes de fazer este vídeo ou até que fizesse este projeto para este vídeo.

179
00:12:35,190 --> 00:12:40,770
Eu definitivamente vi isso antes.

180
00:12:41,100 --> 00:12:42,380
Este vídeo exato.

181
00:12:42,390 --> 00:12:43,820
Mas o ponto é que é novo.

182
00:12:43,830 --> 00:12:46,580
E é por isso que estamos fazendo isso.

183
00:12:46,650 --> 00:12:48,130
É uma habilidade muito importante para poder tomar o código redox e, basicamente, copiá-lo e alterá-lo.

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

185
00:12:54,330 --> 00:12:54,980
Então, no próximo

186
00:12:54,990 --> 00:12:59,940
vídeo, vou dar-lhe um exercício opcional rápido, então, se você quiser apenas chegar ao projeto e ignorar a experiência de aprendizado educacional, seja o que quiser.

187
00:12:59,940 --> 00:13:05,980
Mas se você conseguir apenas uma espécie de recompensa, vá em frente saltear o próximo vídeo.

188
00:13:06,000 --> 00:13:11,170
Eu recomendaria que você fizesse isso.

189
00:13:11,190 --> 00:13:13,040
Não vamos fazer a coisa mais

190
00:13:13,050 --> 00:13:17,070
impressionante, mas eu vou fazer você fazer um exercício com alguns círculos.

191
00:13:17,070 --> 00:13:17,860
Muito exitante.

192
00:13:17,940 --> 00:13:18,500
Eu sei.

193
00:13:18,510 --> 00:13:18,960
ESTÁ BEM.

194
00:13:19,200 --> 00:13:19,480
Vejo você então.

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