Animation
1.0.0
La animación es el arte de crear la ilusión de movimiento mostrando una serie de imágenes estáticas en rápida sucesión.
En nuestra aplicación, usamos animación para que parezca que nuestro rectángulo se mueve hacia la derecha.
Para garantizar que nuestra animación se ejecute sin problemas en todos los dispositivos, la hemos diseñado para que sea independiente del cuadro.
Esto significa que nuestra animación no se ve afectada por los cambios en la velocidad de fotogramas, lo que garantiza una experiencia uniforme y fluida para todos los usuarios.
Para implementar el movimiento basado en el tiempo, utilizamos.
Private DeltaTime As TimeSpan
DeltaTime es el tiempo desde que se dibujó el último fotograma.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
La velocidad es la velocidad a la que queremos que se mueva nuestro rectángulo, medida en píxeles por segundo.
Podemos ajustar este valor para cambiar la velocidad de nuestro rectángulo.
Calculamos la distancia que debe moverse nuestro rectángulo en función de su velocidad multiplicada por deltaTime.
Distancia = Velocidad * DeltaTime
Esto asegura que nuestro rectángulo se mueva a una velocidad constante independientemente de la velocidad de fotogramas.
Por ejemplo, si la velocidad de fotogramas es baja, deltaTime será mayor y nuestro rectángulo se moverá una distancia mayor en ese fotograma para compensar.
| Fotogramas por segundo | Hora Delta | Distancia |
|---|---|---|
| 428.1 Alto | 0.0023366 Segundos | 0,58415 píxeles |
| 38,8 bajo | 0,0257694 segundos | 6,44235 píxeles |
RectPosition es un Vector2 que representa la posición de nuestro rectángulo.
Private RectPostion As New Vector2(Rect.X, Rect.Y)
Estamos usando Vector2 porque puede almacenar valores de punto flotante de precisión simple, lo que permite un posicionamiento más preciso de nuestro rectángulo.
Ejemplo:
69.7753143 es un número de punto flotante de precisión simple (Single).
Esto es importante para nuestra animación ya que la posición de nuestro rectángulo se actualiza rápidamente y con alta precisión.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
Usamos aritmética vectorial para calcular la nueva posición de nuestro rectángulo en función de su posición actual y su velocidad.
El operador += se utiliza para actualizar el valor de RectPostion.X en su lugar, agregando el resultado de velocidad * deltaTime a su valor actual.
Private Rect As New Rectangle(0, 100, 300, 300)
Al dibujar nuestro rectángulo en la pantalla usamos la representación entera de su posición en lugar de la representación Vector2.
Esto asegura que la posición de nuestro rectángulo esté siempre alineada con los píxeles de la pantalla.
Hacemos esto para evitar artefactos visuales como bordes borrosos o irregulares.
Usamos Math.Round para redondear el componente X de RectPosition al valor entero más cercano.
Rect.X = Math.Round(RectPostion.X)
Ejemplo:
El valor de RectPostion.X es 69.7753143
El valor entero más cercano es 70.
Entonces configuramos Rect.X a 70
FillRectangle(Brushes.Purple, Rect)
Luego, el valor entero se usa para dibujar nuestro rectángulo en nuestro formulario usando la función FillRectangle.
