Animation
1.0.0
Animação é a arte de criar a ilusão de movimento exibindo uma série de imagens estáticas em rápida sucessão.
Em nosso aplicativo, usamos animação para fazer parecer que nosso retângulo está se movendo para a direita.
Para garantir que nossa animação funcione perfeitamente em todos os dispositivos, nós a projetamos para ser independente de quadro.
Isso significa que nossa animação não é afetada por alterações na taxa de quadros, garantindo uma experiência consistente e perfeita para todos os usuários.
Para implementar o movimento baseado no tempo, usamos.
Private DeltaTime As TimeSpan
DeltaTime é o tempo desde que o último quadro foi desenhado.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
Velocidade é a velocidade com que queremos que nosso retângulo se mova, medida em pixels por segundo.
Podemos ajustar este valor para alterar a velocidade do nosso retângulo.
Calculamos a distância que nosso retângulo deve se mover com base em sua velocidade multiplicada por deltaTime.
Distância = Velocidade * DeltaTime
Isso garante que nosso retângulo se mova a uma velocidade consistente, independentemente da taxa de quadros.
Por exemplo, se a taxa de quadros for baixa, deltaTime será maior e nosso retângulo se moverá uma distância maior nesse quadro para compensar.
| Quadros por segundo | DeltaTime | Distância |
|---|---|---|
| 428,1 Alto | 0,0023366 segundos | 0,58415 pixels |
| 38,8 Baixo | 0,0257694 segundos | 6,44235 pixels |
RectPosition é um Vector2 que representa a posição do nosso retângulo.
Private RectPostion As New Vector2(Rect.X, Rect.Y)
Estamos usando um Vector2 porque ele pode armazenar valores de ponto flutuante de precisão simples, o que permite um posicionamento mais preciso do nosso retângulo.
Exemplo:
69.7753143 é um número de ponto flutuante de precisão simples (Single).
Isto é importante para a nossa animação, pois a posição do nosso retângulo é atualizada rapidamente e com alta precisão.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
Usamos aritmética vetorial para calcular a nova posição do nosso retângulo com base na sua posição atual e na sua velocidade.
O operador += é usado para atualizar o valor de RectPostion.X no local, adicionando o resultado de velocidade * deltaTime ao seu valor atual.
Private Rect As New Rectangle(0, 100, 300, 300)
Ao desenhar nosso retângulo na tela usamos a representação inteira de sua posição em vez da representação Vector2.
Isso garante que a posição do nosso retângulo esteja sempre alinhada com os pixels da tela.
Fazemos isso para evitar artefatos visuais, como borrões ou bordas irregulares.
Usamos Math.Round para arredondar o componente X de RectPosition para o valor inteiro mais próximo.
Rect.X = Math.Round(RectPostion.X)
Exemplo:
O valor de RectPostion.X é 69,7753143
O valor inteiro mais próximo é 70
Então definimos Rect.X para 70
FillRectangle(Brushes.Purple, Rect)
O valor inteiro é então usado para desenhar nosso retângulo em nosso formulário usando a função FillRectangle.
