Animation
1.0.0
L'animation est l'art de créer l'illusion du mouvement en affichant une série d'images statiques en succession rapide.
Dans notre application, nous utilisons l'animation pour donner l'impression que notre rectangle se déplace vers la droite.
Pour garantir que notre animation fonctionne correctement sur tous les appareils, nous l'avons conçue pour être indépendante des images.
Cela signifie que notre animation n'est pas affectée par les changements de fréquence d'images, garantissant une expérience cohérente et transparente pour tous les utilisateurs.
Pour implémenter un mouvement basé sur le temps, nous utilisons.
Private DeltaTime As TimeSpan
DeltaTime est le temps écoulé depuis le dessin de la dernière image.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
La vitesse est la vitesse à laquelle nous voulons que notre rectangle se déplace, mesurée en pixels par seconde.
Nous pouvons ajuster cette valeur pour changer la vitesse de notre rectangle.
Nous calculons la distance que notre rectangle doit parcourir en fonction de sa vitesse multipliée par deltaTime.
Distance = Vitesse * DeltaTime
Cela garantit que notre rectangle se déplace à une vitesse constante quelle que soit la fréquence d'images.
Par exemple, si la fréquence d'images est faible, deltaTime sera plus grand et notre rectangle se déplacera sur une plus grande distance dans cette image pour compenser.
| Images par seconde | DeltaHeure | Distance |
|---|---|---|
| 428,1 Élevé | 0,0023366 Secondes | 0,58415 pixels |
| 38,8 Faible | 0,0257694 secondes | 6,44235 pixels |
RectPosition est un Vector2 qui représente la position de notre rectangle.
Private RectPostion As New Vector2(Rect.X, Rect.Y)
Nous utilisons un Vector2 car il peut stocker des valeurs à virgule flottante simple précision, ce qui permet un positionnement plus précis de notre rectangle.
Exemple:
69.7753143 est un nombre à virgule flottante simple précision (Single).
Ceci est important pour notre animation car la position de notre rectangle est mise à jour rapidement et avec une grande précision.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
Nous utilisons l'arithmétique vectorielle pour calculer la nouvelle position de notre rectangle en fonction de sa position actuelle et de sa vitesse.
L'opérateur += est utilisé pour mettre à jour la valeur de RectPostion.X en place, en ajoutant le résultat de la vitesse * deltaTime à sa valeur actuelle.
Private Rect As New Rectangle(0, 100, 300, 300)
Lorsque nous dessinons notre rectangle à l'écran, nous utilisons la représentation entière de sa position plutôt que la représentation Vector2.
Cela garantit que la position de notre rectangle est toujours alignée avec les pixels de l'écran.
Nous faisons cela pour éviter les artefacts visuels tels que le flou ou les bords irréguliers.
Nous utilisons Math.Round pour arrondir le composant X de RectPosition à la valeur entière la plus proche.
Rect.X = Math.Round(RectPostion.X)
Exemple:
La valeur de RectPostion.X est 69,7753143
La valeur entière la plus proche est 70
Nous définissons donc Rect.X à 70
FillRectangle(Brushes.Purple, Rect)
La valeur entière est ensuite utilisée pour dessiner notre rectangle sur notre formulaire à l'aide de la fonction FillRectangle.
