Animation
1.0.0
Animation ist die Kunst, die Illusion von Bewegung zu erzeugen, indem eine Reihe statischer Bilder in schneller Folge angezeigt wird.
In unserer App verwenden wir Animationen, um den Eindruck zu erwecken, dass sich unser Rechteck nach rechts bewegt.
Damit unsere Animation auf allen Geräten reibungslos läuft, haben wir sie Frame-unabhängig konzipiert.
Dies bedeutet, dass unsere Animation nicht durch Änderungen der Bildrate beeinträchtigt wird, wodurch ein konsistentes und nahtloses Erlebnis für alle Benutzer gewährleistet wird.
Um zeitbasierte Bewegung zu implementieren, verwenden wir.
Private DeltaTime As TimeSpan
DeltaTime ist die Zeit seit dem Zeichnen des letzten Frames.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
Geschwindigkeit ist die Geschwindigkeit, mit der sich unser Rechteck bewegen soll, gemessen in Pixel pro Sekunde.
Wir können diesen Wert anpassen, um die Geschwindigkeit unseres Rechtecks zu ändern.
Wir berechnen die Distanz, die unser Rechteck zurücklegen soll, basierend auf seiner Geschwindigkeit multipliziert mit deltaTime.
Distanz = Geschwindigkeit * DeltaTime
Dadurch wird sichergestellt, dass sich unser Rechteck unabhängig von der Bildrate mit einer konstanten Geschwindigkeit bewegt.
Wenn beispielsweise die Bildrate niedrig ist, ist deltaTime größer und unser Rechteck bewegt sich zum Ausgleich um eine größere Strecke in diesem Bild.
| Bilder pro Sekunde | DeltaTime | Distanz |
|---|---|---|
| 428,1 Hoch | 0,0023366 Sekunden | 0,58415 Pixel |
| 38,8 Niedrig | 0,0257694 Sekunden | 6,44235 Pixel |
RectPosition ist ein Vector2, der die Position unseres Rechtecks darstellt.
Private RectPostion As New Vector2(Rect.X, Rect.Y)
Wir verwenden einen Vector2, da er Gleitkommawerte mit einfacher Genauigkeit speichern kann, was eine präzisere Positionierung unseres Rechtecks ermöglicht.
Beispiel:
69,7753143 ist eine Gleitkommazahl mit einfacher Genauigkeit (Single).
Dies ist für unsere Animation wichtig, da die Position unseres Rechtecks schnell und mit hoher Präzision aktualisiert wird.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
Wir verwenden Vektorarithmetik, um die neue Position unseres Rechtecks basierend auf seiner aktuellen Position und seiner Geschwindigkeit zu berechnen.
Der +=-Operator wird verwendet, um den Wert von RectPostion.X an Ort und Stelle zu aktualisieren, indem das Ergebnis von Velocity * deltaTime zu seinem aktuellen Wert addiert wird.
Private Rect As New Rectangle(0, 100, 300, 300)
Beim Zeichnen unseres Rechtecks auf dem Bildschirm verwenden wir die ganzzahlige Darstellung seiner Position und nicht die Vector2-Darstellung.
Dadurch wird sichergestellt, dass die Position unseres Rechtecks immer mit den Pixeln auf dem Bildschirm übereinstimmt.
Wir tun dies, um visuelle Artefakte wie Unschärfe oder gezackte Kanten zu vermeiden.
Wir verwenden Math.Round, um die X-Komponente von RectPosition auf den nächsten ganzzahligen Wert zu runden.
Rect.X = Math.Round(RectPostion.X)
Beispiel:
Der Wert von RectPostion.X ist 69,7753143
Der nächste ganzzahlige Wert ist 70
Also setzen wir Rect.X auf 70
FillRectangle(Brushes.Purple, Rect)
Der ganzzahlige Wert wird dann verwendet, um mithilfe der FillRectangle-Funktion unser Rechteck auf unserem Formular zu zeichnen.
