OK, vamos receber de volta.
Então, neste vídeo, vamos levar o que já fizemos e vamos animá-lo ligeiramente.
Então, eventualmente, o que queremos acontecer é que, para cada imprensa de chave, nós temos um círculo em
uma localização aleatória com uma cor e essa cor animar ligeiramente.
E também recebemos a animação de tamanho.
Então, eu não sei se você conseguiu mudar a cor, mas é um bom palpite para apenas
adicionar um pouco a tonalidade.
Mas qualquer um desses irá fazer para nós começar.
Vamos começar realmente mudando a cor desses círculos e, na verdade, vamos começar
mais simples simplesmente mudando a cor de um círculo.
Então não todos eles que virão mais tarde.
Então, se vamos para a Paperchase, volte para os tutoriais e você olha a animação na parte inferior.
A primeira coisa que você pode fazer é dar uma olhada em alguns exemplos.
Aqui está um exemplo.
E você pode ver que é realmente muito simples realmente fazer a animação.
O que fazemos é que nós definimos algo neste caso um retângulo.
No nosso caso, será um círculo e, em seguida, haverá um quadro e qualquer código que colocemos
aqui será executado em cada quadro da animação.
Então, neste caso, cada quadro dessa animação estamos rodando esse retângulo em três graus
ou, neste caso, o que vamos usar em cada quadro, estamos adicionando um para a tonalidade desse círculo
que definimos aqui.
Então vamos tentar isso.
Avançemos e façamos um novo círculo não dentro da chave para baixo.
Então, isso sempre estará sempre lá quando a página for carregada.
Então, chamaremos isso de círculo de animação variável igual ao novo círculo de pontos de caminho e terá novos pontos e vamos
fazer esse círculo em 300 vírgulas 300 e o raio.
Vamos torná-lo maior 100.
Bem desse jeito.
E então, faremos animação e o chamado círculo animado, em vez de animar a cor do preenchimento de pontos
e configurá-lo como vermelho para começar assim.
Ótimo.
círculo grande e toda vez que toco uma tecla, ficamos com círculos menores que são aleatórios.
Então, não vai ser animado ainda, mas se você atualizar, obtemos um
Agora, precisamos adicionar nossa animação e é realmente simples, já que vimos a função no quadro e podemos passar dentro ou
fora, exceto este argumento do evento.
Se quisermos fazer algo com cada quadro se quisermos alguns dados sobre isso, na verdade não
precisamos disso.
E então, tudo o que faz aqui é a cor de preenchimento de ponto de círculo animado que você mais é igual a um.
E isso é direto desse exemplo.
uma nova moldura que não depende de nós, não estamos decidindo a taxa de quadros a que frequência esse código é chamado.
Então, toda vez que a animação solicita
Sempre que haja uma nova moldura em que o papel apenas cuida, estamos adicionando uma à tonalidade
de seu círculo animado.
Vamos atualizar e lá vamos nós.
Então, realmente é muito simples fazer esse tipo de animação.
Nós também podemos fazer animações, independentemente de onde mudar a posição de algo e isso é um
pouco mais complicado.
apenas animados de um ponto para outro e também não estão acelerando uniformemente.
Este é um exemplo ainda mais complexo, porque eles não são
Então, é um pouco mais complexo, mas ainda apenas algumas linhas.
Aqui está outro exemplo de mover coisas.
Algumas outras animações.
O que nós vamos fazer é usar algo que eles não mostram e os exemplos aqui que eu
gasto um pouco de tempo cavando nos documentos o que queremos fazer é simplesmente escalar cada um de cada quadro.
Então, o que fazemos é basicamente quando eu pressiono uma chave que fazemos um círculo.
esse personagem em todas as moldura ou encolhendo-o um pouco basicamente escalando-o no ponto nove nove nove e nove.
Digamos que ele começa como 300 por 300 ou 300 raio, desculpe-me quando acertei
Eu esqueci o número exato, mas estamos multiplicando-o por um tamanho menor em cada quadro e ele apenas
encolhe e encolhe, então ele desaparece.
Então eu vou mostrar-lhe como isso funciona.
Voltemos ao nosso código, temos o círculo ainda animando e dentro do quadro em vez de apenas
adicionar um ao matiz.
animado, que é um método que encontrei e que
podemos multiplicar por qualquer fração que queremos, se a deixarmos em uma, ela permanecerá do mesmo tamanho, de modo que na verdade não a veremos.
O que faremos é fazer uma escala de ponto de círculo
Mas se fizermos algo como o ponto nove e nós atualizamos, nós vamos, cada quadro modifica Hewe por 1.
E escala pelo ponto nove ou 90 por cento do que era no quadro anterior.
Então, se mudarmos isso para algo como o Ponto 9 9 para ser uma transição mais lenta para baixo e se
nós o mudarmos para algo como o ponto cinco, isso vai diminuir muito rapidamente.
Então, cada quadro fica meio tão grande como era na corrida anterior.
Então eu acho que o que fui com o ponto 9 para começar.
Então vamos deixar isso.
E agora, temos um único círculo que altera a cor e o encolhimento do que queremos fazer depois é quando eu toco
essas outras chaves.
Você quer que esses círculos façam o mesmo e isso seja um pouco mais complicado.
Mas, honestamente, o código aqui permanecerá o mesmo, tudo diferente é que precisamos fazer isso
para cada círculo que está na página.
E esta é provavelmente a mudança mais drástica que fará o que realmente vai fazer é
ter uma série de círculos e toda vez que pressionamos uma chave Vamos adicionar esse círculo naquela nova matriz porque agora não
estamos realmente rastreando tudo os círculos que precisamos para salvar todos eles de alguma forma.
Então, no quadro aqui mesmo nesta função, podemos voltar a cada círculo que já
existe e animado.
Então, manteremos esse código.
Mas o que queremos fazer é percorrer uma matriz que não existe, então vamos chamá-la de círculos.
Então, para var i, é igual a zero Ayas do que o Circle StarLink.
Além disso, mais o que queremos fazer é fazer círculos.
Eu preenchho a cor aqui.
Então, vamos começar com a cor de preenchimento apenas no início.
Então, vou copiar essa linha.
Então, não vai funcionar ainda porque o círculo não existe.
Mas a idéia é que, em cada quadro, fazemos um loop em todos os círculos nesta matriz e adicionamos
um a cada matiz em cada quadro.
E você pode pensar que isso é bastante intenso e é que muitas coisas acontecem, mas o papel
apenas cuida disso.
Mas também vamos adicionar uma pequena otimização para o final, então vou mostrar o que quero dizer em um futuro
vídeo.
Mas, por enquanto, é isso que faremos.
E tudo o que temos que fazer agora é realmente adicionar este círculo que estamos fazendo na matriz de círculos
para que possamos definir essa matriz para nossos círculos é uma matriz vazia para começar e então, quando você
pressiona uma tecla na chave, vamos apenas faça círculos para cima, empurre este novo círculo em círculo, pare empurrar este novo caminho para fora do
círculo neste ponto aleatório.
Neste momento, temos um raio de 10 e restabelecemos a cor de preenchimento como laranja.
Então, estamos apenas empurrando esse círculo que já tivemos na matriz deste círculo.
E então estamos atualizando cada círculo.
Então, pode haver um círculo, pode haver 20 círculos.
Pode haver 100 círculos em qualquer momento.
Passamos por todos eles e adicionamos um a cada fila e, se olharmos agora e
atualizarmos, ainda não funciona.
E isso traz um ponto realmente interessante sobre como o push funciona.
Então, se eu abrir o console, ele me diz que não consigo ler a matiz Prakriti da mente indefinida 24 que está
aqui mesmo.
Então não é de alguma forma que não está lendo essa propriedade de Hugh da cor de Phil dizendo que o código de Phil não existe.
Então, vamos fazer um círculo de log constante.
E você verá qual é o problema.
Se eu abrir isso, ele é parado porque nós tivemos um erro.
Mas, na verdade, adicionamos a linha laranja na cadeia não o novo círculo atual.
E é por isso que o que estamos envolvendo não é apenas um novo círculo em que estamos fazendo o novo círculo.
E então estamos definindo a cor de preenchimento para ser laranja.
Então, a última coisa que foi devolvida foi a linha de laranja.
Então, o resultado final é que estamos apenas empurrando laranja sempre.
O que não é o que queremos.
Então, vamos fazer uma nova variável, vamos chamá-la de nosso novo círculo e então faremos um novo círculo de
cor de preenchimento de pontos, separadamente, igual a laranja e então vamos pressionar o Novo Círculo.
Então, ao invés de editar isso, acho que é um erro importante para ver.
Totalmente me deteve desprevenido por um momento, mas é importante entender como isso funciona
onde nós temos esses métodos encadeados em cima uns dos outros, onde nós passamos nesse círculo e, em seguida, a cor de preenchimento
de pontos é laranja e acabamos de adicionar essa coisa em A matriz com push.
Nós estávamos apenas adicionando laranja.
Então precisamos corrigi-lo.
Então, espero que isso faça isso.
E, na verdade, eu sei que sim, mas se estamos frescos e dê uma olhada agora, adicione novos
círculos colocados aleatoriamente e todos os inimigos que o Heugh anime tão simplesmente perfeito.
Agora vamos atualizar isso para trabalhar com o tamanho.
Então, é exatamente essa exatamente a mesma linha que temos aqui.
Vou livrar-se da nossa constante não log.
Exceto que queremos círculos.
EU.
ESTÁ BEM.
Então, antes de lhe mostrar se funciona, vamos apenas rever o que fizemos.
Então, quando você acerta qualquer tecla, adicionamos em um círculo em um ponto aleatório 2, fazemos um ponto aleatório para criar
um novo círculo com esse raio de pixel de 10 pontos aleatórios e podemos realmente mudar isso para combinar o que
temos na solução que é quinhentos e então estamos vendendo o cartão de preenchimento para começar como laranja
que irá mudar eventualmente.
E então, empurramos isso para uma matriz chamada círculos.
Então, cada vez que uma nova moldura é chamada Todo quadro de animação, estamos fazendo um loop em todos os círculos.
E para cada um, estamos adicionando um ao hewe e estamos multiplicando o tamanho da escala pelo ponto nove.
Então, estamos reduzindo isso apenas por um bit pequeno em cada quadro.
Mas há tantos quadros que realmente encolhe muito rapidamente e podemos nos
livrar de nosso círculo animado agora que começa na página carregar.
Não queremos começar com uma tela preta.
E então, quando você acerta uma tecla, adicionamos um círculo.
Então vamos tentar.
Aqui vamos nós.
Então, isso é quase exatamente da mesma maneira.
Aqui está o som.
Uma grande diferença é que a cor diz que cada uma das chaves tem uma cor atribuída aqui, então Q é este azul
uma metade azul mais escura.
É cinza.
Então, no nosso, é um roxo agora, estamos estabelecendo que todos para começar é laranja e depois mudar
a tonalidade.
Então, precisamos corrigir isso, mas quero dizer, esperar para fazer isso até adicionar som.
Então estamos pronto por agora.
Há uma pequena otimização que o tornará o fim porque agora não estamos removendo
esses círculos da matriz do círculo.
Então, mesmo se você souber após 10 segundos esse círculo foi mesmo depois de três segundos, não o vemos.
Tecnicamente, ainda está nessa matriz.
Então, isso não é ideal.
que tivéssemos criado e não vejamos nenhum deles, não queremos fazer um loop sobre todos eles.
Se tivéssemos dez mil círculos
Então, no último vídeo, vou mostrar-lhe como podemos remover um círculo quando sabemos que ele se foi ou quando
sabemos que não é mais viável.
OK, então, depois, vamos trabalhar com som