Animation

卡通

動畫是透過快速連續顯示一系列靜態圖像來創造運動幻覺的藝術。

在我們的應用程式中，我們使用動畫使其看起來好像我們的矩形向右移動。

框架無關

為了確保我們的動畫在所有設備上順利運行，我們將其設計為與幀無關。

這意味著我們的動畫不會受到幀速率變化的影響，從而確保所有用戶獲得一致且無縫的體驗。

基於時間的運動

為了實現基於時間的運動，我們使用。

德爾塔時間

 Private DeltaTime As TimeSpan

DeltaTime 是自繪製最後一幀以來的時間。

 DeltaTime = CurrentFrame - LastFrame

速度

 Private Velocity As Single = 250.0F

速度是我們希望矩形移動的速度，以每秒像素為單位。

我們可以調整這個值來改變矩形的速度。

距離

我們根據矩形的速度乘以 deltaTime 來計算矩形應移動的距離。

距離 = 速度 * DeltaTime

這確保了無論幀速率如何，我們的矩形都以一致的速度移動。

例如，如果幀速率較低，則 deltaTime 會較大，並且我們的矩形會在該幀中移動較大的距離以進行補償。

每秒影格數	德爾塔時間	距離
428.1 高	0.0023366 秒	0.58415 像素
38.8 低	0.0257694 秒	6.44235 像素

矩形位置.X

RectPosition 是 Vector2，表示矩形的位置。

 Private RectPostion As New Vector2(Rect.X, Rect.Y)

我們使用 Vector2 是因為它可以儲存單精度浮點值，從而可以更精確地定位矩形。

例子：

69.7753143 是一個單精確度浮點數（Single）。

這對於我們的動畫很重要，因為我們的矩形的位置會快速且高精度地更新。

 RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt

我們使用向量算術根據矩形的當前位置和速度計算矩形的新位置。

+= 運​​算子用於就地更新 RectPostion.X 的值，將速度 * deltaTime 的結果加到其目前值。

矩形X

 Private Rect As New Rectangle(0, 100, 300, 300)

當將矩形繪製到螢幕上時，我們使用其位置的整數表示形式而不是 Vector2 表示形式。

這確保了矩形的位置始終與螢幕上的像素對齊。

我們這樣做是為了避免視覺偽影，例如模糊或鋸齒狀邊緣。

我們使用 Math.Round 將 RectPosition 的 X 分量四捨五入到最接近的整數值。

 Rect.X = Math.Round(RectPostion.X)

例子：

RectPostion.X 的值為 69.7753143

最接近的整數值為 70

所以我們將 Rect.X 設定為 70

 FillRectangle(Brushes.Purple, Rect)

然後使用該整數值使用 FillRectangle 函數在表單上繪製矩形。