ESTÁ BEM.
Então vamos começar aqui.
E este vídeo se concentrará em colocar o Paperchase configurado e fazer algumas animações simples e simples.
Então, não há áudio ainda.
Primeiro, vou apontar que estou em um novo diretório que criei.
Eu adicionei esse diretório de sons aqui.
Então, certifique-se de que você não precisa fazê-lo necessariamente para este vídeo, porque você não estará tocando
os sons.
Mas se você deseja acompanhar, faça um diretório certifique-se de arrastar ou copiar a pasta de sons
para ele.
A próxima coisa que você precisa fazer é fazer o nosso arquivo para que eu faça um arquivo, salve-o
no diretório correto e vou chamar círculos de cada vez.
Bem, eu na nossa h tim L. Esqueleto, é claro, assim, e vamos deixar isso por enquanto.
Então, vamos apenas abri-lo não deve realmente ver nada.
Agora vamos ao genio do papel.
Mais uma vez eu realmente amo esse.
Mas nós vamos nos afastar disso e nós vamos baixar para começar.
E a primeira coisa que faremos é simplesmente baixar a versão mais recente que já fiz.
Então, quando você terminar com isso, ficará assim.
E a primeira coisa que podemos fazer é apenas dar uma olhada no diretório de exemplos.
Vamos dar uma olhada na animada estrela animada.
Muito divertido de brincar com isso me deixa tonto, então eu vou desligar isso.
Mas você pode dar uma olhada em alguns dos outros também.
Choque de doces.
Então, há algumas animações legais que você pode fazer.
Há um pouco de física envolvida aqui.
O que mais nos temos.
Esta animação de linha legal e um monte de outros são você.
Eu realmente gosto desse tipo desse efeito de paralaxe quando você move o mouse.
ESTÁ BEM.
Então você pode passar horas fazendo isso.
Há muitos exemplos excelentes que você pode abrir qualquer um deles se desejar.
Dê uma olhada em como funciona.
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.
Mas há algo que você não viu antes, e
é que nós temos um tipo de script igual ao script de texto de bloco de texto.
Portanto, há um tipo particular de arquivo
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.
Portanto, não é algo que funcionará a menos que possamos incluir Paperchase.
E então, você também vê essa tela de atributo de tela igual a tela.
Então, essa é uma espécie de estranho que uma tela é um elemento de hinário envelhecido.
Então, na verdade, é onde tudo o que fazemos.
Vou mostrar-lhe inspecionar isso agora.
Esta é a versão funcional ou a versão final.
Se eu olhar primeiro para mostrar como funciona.
Mais uma vez, se eu examinar e inspecionar este fundo preto não é o corpo.
É algo chamado lona e tela é um elemento
HMO que basicamente funciona como um lugar para fazer animações e gráficos.
Então, se eu for para
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.
Então é realmente tudo o que é.
É um elemento em tela que por si só sem javascript ele realmente não faz nada.
Mas então, vamos e adicionamos javascript para dizer coisas como fazer retângulo aqui,
torná-lo verde, faça um formulário 3D, faça essa animação e nós fazemos tudo com Javascript.
Então, papel J. S. usa um elemento de tela.
É o palco onde é adicionado em todas as animações em todos os gráficos.
Então, precisamos ter uma tela na nossa página, como você pode ver para este exemplo de espaço.
Se eu for até o fundo, a única coisa no corpo é
esta aqui uma tela e tem ID igual à tela e também o plano de fundo definido para preto.
Então Id igual a tela corresponde a esta linha aqui.
Canvas é igual à tela.
Então, estamos apenas informando este arquivo
de script em papel ou este script de script de papel que ID deve procurar no exemplo que acabou de chamar, mas de tela.
Então, vamos fazer algo muito parecido com isso.
Mas antes de chegar lá, precisamos nos certificar de que incluímos papel sim.
Então, quando você vai ao download.
E, ao invés de abrir exemplos, vamos olhar indexados
e então podemos escolher o papel cheio ou o papel cheio de homens e entender o completo aqui.
Então, vou copiar isso para o nosso
diretório para que o papel Dasch cheio, mas nós, em nosso próprio aplicativo, precisamos ter certeza de incluir isso.
Então Source é igual ao papel Dasch full japes assim e salva.
E então, o que faremos é atualizar a página no Chrome.
Certifique-se de que não receba um erro.
Ótimo.
Então encontrou o arquivo bem.
Agora vamos aos documentos do genial do papel e olhe para os tutoriais, então eu realmente não fiz isso no início.
Mas eu quero ler a descrição do documento JSA.
Portanto, é uma estrutura de scripts de gráficos vetoriais de código aberto que é executada em cima da idade para as minhas cinco telas.
limpo e muita funcionalidade poderosa para criar e trabalhar com gráficos vetoriais e
curvas de Bezier, tudo bem envolvido em uma interface de programação consistente e bem projetada.
Oferece um modelo de objeto de documento de barra de gráfico de cena
Tão gentil um bocado.
Basicamente, é uma biblioteca de gráficos de biblioteca de animação de biblioteca de desenho.
Isso é realmente muito popular.
Existem alguns deles por
aí, não é como uma consulta onde é praticamente a única biblioteca de manipulação de DOM.
A única biblioteca de tratamento de eventos.
dizendo que é o mais popular.
Há muita animação em coisas gráficas lá fora, mas o papel é é que eu estou bastante confiante
OK, então vamos voltar aos tutoriais e dar uma olhada em começar.
Eu acho que sim começar a trabalhar com papel.
Sim.
E vamos nos deslocar para baixo e dar uma olhada em seu exemplo aqui.
Então, o que podemos fazer é copiar tudo isso.
Mas eu quero fazer uma peça de cada vez para que você veja como ela funciona.
Então, comece por copiar essa tela, copie a linha inteira e colocá-la em nosso corpo.
Então, a lona I. D. é igual a minha tela e se eu atualizar a página, não veremos nada.
Se esperássemos que verássemos, há uma tela
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.
E vamos colocar isso aqui e colar.
Então, se olharmos o que está acontecendo aqui, alguns comentários
agradáveis ​​dizem que ele cria um caminho de papel G-S para desenhar uma linha.
Então, nós fazemos um caminho e você vai ver muita sintaxe aqui que você nunca viu.
E, novamente, esse é o ponto.
O objetivo é que eu estou forçando você a ver algumas coisas novas para ler os documentos.
Pode desensibilizar esse sentimento de eu não sei
o que estou fazendo. Nunca vi esse código antes de não saber como ele funciona.
Esse é o ponto da biblioteca.
Você não precisa saber como funciona especialmente para algo como animações.
Apenas fique feliz que outra pessoa esteja cuidando de você.
Eu definitivamente sou salvo minha vida muitas vezes.
Então, criamos um novo caminho aqui, salve-o em uma variável.
Nós mudamos a cor do traço para ser preto e, em seguida, criamos um ponto para
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.
Então, vou mostrar-lhe exatamente o que isso faz, mas desenha uma linha a partir de 100 100 e, em
seguida, move essa linha ou conecta o primeiro ponto para 300 vírgulas 50.
Então, se dar uma olhada, certifique-se de que tudo está funcionando se estivermos frescos.
Acabamos com uma linha.
Então a melhor coisa a fazer quando você tem algo novo como este é jogar.
Então tente mudar isso.
Então é vermelho e começar é agora 0 100.
Aí, nós apenas mudamos nossa linha ou mudamos isso para ser algo mais drástico como 500.
Então você pode brincar com isso durante todo o dia.
Mas o que eu quero realmente apontar é
que estamos criando um script de script em papel, não texto, então é script de papel do javascript e estamos
definindo essa tela de atributo de tela igual a minha tela que é o nome ou o ID que nós atribuímos.
Então, estes têm que
combinar e todo esse ponto é apenas para dizer a este arquivo de script de papel onde desenhar coisas.
Que tela usar.
Então, podemos brincar um pouco mais.
E eu recomendo que
você pare o vídeo e dê uma olhada nos tutoriais tente algumas outras coisas.
Então, eu apenas vou apontar você para as formas predefinidas do caminho, que é o que usaremos.
Vamos fazer círculos com nosso aplicativo aqui.
Então, é isso que precisamos fazer.
dar um ponto para fazer um círculo.
Vamos apenas copiar este código aqui, então Pat novo caminho ponto círculo e então você tem que
E, em seguida, o raio que parece.
Então, você pode ver que há
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.
Então, dê uma olhada, basta copiar isso para o fundo do nosso código e ver o que acontece.
Qual é o tipo de coisa que você faz muito com J S e bibliotecas semelhantes.
Você apenas experimenta.
Então, vamos mudar o raio para ser 10.
Ai está.
Então, também podemos tentar fazer outro círculo simplesmente copiando isso para outra linha.
Vamos chamá-lo de var círculo 2 é igual ao novo ponto do caminho.
E vamos fazer isso muito grande e roxo.
Então, um novo ponto e vamos colocá-lo aos 50.
Venha um 50 e será enorme.
Então, dê-lhe um raio de 300 e então o círculo para preencher a cor é igual a roxo.
Assim como essa atualização.
E você pode ver que acabamos com esse círculo gigantesco que você
realmente não pode dizer o quão grande é porque nossa tela não ocupou toda a largura da nossa tela.
Então, vamos fazer isso em seguida porque queremos que desejemos que nossa tela ocupe toda a largura.
Então eu irei e criei uma nova folha de estilos, então eu adicionei
uma tag de link aqui, um Tref é igual ao ponto SS do círculo que não existe.
E, em seguida,
vamos salvar um arquivo chamado Circle Stut, veja avaliar e o que faremos é adicionar em tela com 100 por cento.
E vamos também dar um plano de fundo de preto.
E se estamos frescos, você pode ver que estamos perto, mas temos algumas coisas.
O primeiro de tudo é que o nosso corpo na verdade não passa todo o caminho.
Assim, nossa tela ocupa-se quando 100% da largura.
Mas mesmo que lhe dêmos 100 por cento de altura, agora
não vai realmente mudar a maneira como queremos.
Então, também temos essa margem de que queremos livrar.
Então, ao invés de gastar muito tempo, eu vou apenas mostrar o que precisamos fazer.
Bem, basta definir altura para 100% e margem para ser zero.
E se eu atualizar a página agora, ela ocupa a tela cheia.
Então, se você quiser entrar mais em detalhes e entender exatamente por que fizemos
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.
Basicamente, estamos apenas certificando-se de que o corpo ocupa toda a largura e altura e não
há margem, o que significa que nossa tela se expandirá para ocupar esse espaço inteiro também.
ESTÁ BEM.
Então, criamos uma tela agora que é realmente a última coisa que farei neste vídeo.
Eu só queria apresentar-lhe como a papelada é que temos scripts de script em papel.
Damos uma tela e depois colocamos algum código aqui que você nunca viu antes.
Muito disso, eu nunca vi antes de fazer este vídeo ou até que fizesse este projeto para este vídeo.
Eu definitivamente vi isso antes.
Este vídeo exato.
Mas o ponto é que é novo.
E é por isso que estamos fazendo isso.
É uma habilidade muito importante para poder tomar o código redox e, basicamente, copiá-lo e alterá-lo.
Ótimo.
Então, no próximo
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.
Mas se você conseguir apenas uma espécie de recompensa, vá em frente saltear o próximo vídeo.
Eu recomendaria que você fizesse isso.
Não vamos fazer a coisa mais
impressionante, mas eu vou fazer você fazer um exercício com alguns círculos.
Muito exitante.
Eu sei.
ESTÁ BEM.
Vejo você então.