No último artigo, compartilhamos como usar o canvas para desenhar gráficos, mas os desenhos eram todos gráficos estáticos. Esta semana aprenderemos como usar o canvas para desenhar gráficos dinâmicos.
O que é animação?Antes de desenharmos uma animação, devemos entender o que é animação. Quais são as condições básicas mínimas exigidas para uma animação?
O que podemos usar como ferramenta para mostrar animação?
Este é um efeito de animação desenhado usando PPT
De acordo com o efeito de animação desenhado pelo PPT acima, podemos ver que ao alternar rapidamente entre várias páginas PPT, você verá um efeito de animação.
Este é o elemento básico da implementação da animação:
Reproduza várias imagens continuamente por unidade de tempo. Este tempo unitário é geralmente medido em segundos. Para obter um vídeo suficientemente suave em gráficos renderizados por computador, o número de imagens por segundo deve ser maior ou igual à taxa de atualização do monitor (esta taxa de atualização geralmente é de 60 Hz).
O estado dos objetos em cada imagem (tamanho, forma, cor, posição, ângulo, etc.) deve mudar
Então, como implementamos essas duas condições no canvas?
Como desenhar 60 gráficos em 1 segundoPodemos transformar isso no desenho de um gráfico a cada 1/60. Em JavaScript, se quisermos fazer algo de vez em quando, o método que usamos é usar o timer setinterval.
O que é um cronômetro? setinerval(function f(){},t),
dois parâmetros podem ser passados para o temporizador, um é a função e o outro é o tempo. O significado deste código é executar a função f a cada t ms.
Então usamos isso para conseguir o que precisamos para desenhar um gráfico a cada 1/60
setInterval(function(){canCon.fillStyle=black;//canCon.fill significa pegar uma caneta para desenhar gráficos sólidos neste papel de arroz, //style=black significa mergulhá-lo em tinta preta //continuamente Para olhar Para isso, basta pegar uma caneta para desenhar gráficos sólidos e colá-la com tinta preta canCon.arc(233,233,66,0,Math.PI*2); //Considere desenhar um círculo no papel de arroz (a posição X do centro, a posição Y, o raio do círculo, onde começar a desenhar o círculo e onde terminar canCon.fill()); traço para desenhar},1000/60)
efeito final
Mas ainda não há efeito de animação, porque os 60 gráficos desenhados em 1 segundo são todos exatamente iguais, então o estado do elemento deve ser alterado quando cada gráfico é desenhado.
Aliás, gostaria de recomendar uma saia para vocês. A frente é 537, a do meio é 631 e a última é 707. Amigos que desejam aprender front-end podem se juntar a nós para aprender juntos e ajudar uns aos outros. Há mestres no grupo dando aulas gratuitas ao vivo todas as noites. Se você não quer aprender, não entre.
(537-631-707)
Como alterar o estado de um elemento?
A posição de um círculo é determinada pelas coordenadas do centro do círculo, portanto podemos alterar a posição do elemento toda vez que desenhamos a tela.
variar=100;//Forneça uma posição central inicial do círculo, e a posição y do centro do círculo se moverá para baixo uma distância cada vez que for desenhado setInterval(function(){canCon.fillStyle=black;// canCon.fill significa pegar uma caneta para desenhar formas sólidas neste papel de arroz, //style=black significa mergulhá-lo Uma tinta preta //Para conectá-la, basta pegar uma caneta para desenhar gráficos sólidos e colá-la com tinta preta canCon.arc(233,y++,66,0,Math.PI*2);//em papel de arroz Conceber e desenhe um círculo (a posição X do centro do círculo, a posição Y, o raio do círculo, onde começar a desenhar o círculo e onde terminar canCon.fill();//Último traço a desenhar}); ,1000/60)
O que vemos neste momento não é um círculo em movimento, mas sim uma barra de progresso extensa. A razão é realmente muito simples. Não apagamos os gráficos originais toda vez que desenhamos um novo gráfico. Essa imagem é o resultado de n vários gráficos sobrepostos. Então, toda vez que desenhamos um novo gráfico, temos que apagar o original. Então, como fazer isso?
variar=100;//Dê uma posição central inicial do círculo, e a posição y do centro do círculo se moverá para baixo uma distância cada vez que for desenhado setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Apagar as coordenadas do canto superior esquerdo de uma área retangular e a largura e altura do retângulo canCon.fillStyle=black;//O significado de canCon.fill é pegar uma pintura neste arroz papel Uma caneta com gráficos sólidos, //style=black significa mergulhá-la em tinta preta //Para montá-la, significa pegar uma caneta que desenha gráficos sólidos e colá-la com tinta preta canCon.arc(233,y++,66 , 0,M ath.PI*2);//Considere desenhar um círculo em papel de arroz (posição X do centro do círculo, posição Y, raio do círculo, onde começar a desenhar o círculo e onde terminar canCon.fill(); );// Começar a pintar},1000/60)
Mas ainda não tem efeito neste momento, então o que exatamente está acontecendo? Podemos pensar na cena de quando éramos crianças, quando pintávamos. Quando apagamos uma determinada área do papel de desenho, precisamos primeiro levantar o pincel para podermos usar a borracha para apagar certas áreas do papel. , então você tem que levantar a caneta antes de apagar uma área da tela.
variar=100;//Dê uma posição central inicial do círculo, e a posição y do centro do círculo se moverá para baixo uma distância cada vez que for desenhado setInterval(function(){canCon.beginPath();// Levante a caneta canCon. clearRect(0, 0, 500, 500);//Apaga as coordenadas do canto superior esquerdo de uma área retangular e as coordenadas do retângulo Largura e altura canCon.fillStyle=black;//canCon.fill significa pegar uma caneta para desenhar gráficos sólidos neste papel de arroz, //style=black significa mergulhá-lo em tinta preta //Se você conectá-los, é Pegue uma caneta para desenhar formas sólidas e cole-a com tinta preta canCon.arc(233,y++,66,0,Math.PI*2); //Considere desenhar um círculo no papel de arroz (a posição X do centro, a posição Y, o raio do círculo, onde começar a desenhar o círculo e onde terminar canCon.fill()); traço para desenhar},1000/60)
Desta forma, podemos obter um círculo em movimento
ResumirO texto acima é a introdução do editor à interface mais forte do H5, a tela, para implementar funções gráficas dinâmicas. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!