Animation
1.0.0
アニメーションは、一連の静止画像を素早く連続して表示することによって、動いているような錯覚を作り出す芸術です。
このアプリでは、アニメーションを使用して、長方形が右に向かって移動しているように見せます。
すべてのデバイスでアニメーションがスムーズに動作するように、フレームに依存しないように設計しました。
これは、アニメーションがフレーム レートの変化の影響を受けず、すべてのユーザーに一貫したシームレスなエクスペリエンスを保証することを意味します。
時間ベースのモーションを実装するには、 を使用します。
Private DeltaTime As TimeSpan
DeltaTime は、最後のフレームが描画されてからの時間です。
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
速度は、長方形を移動させる速度であり、1 秒あたりのピクセル単位で測定されます。
この値を調整して、長方形の速度を変更できます。
長方形の移動距離は、その速度とデルタ時間の積に基づいて計算されます。
距離 = 速度 * デルタ時間
これにより、フレーム レートに関係なく、長方形が一定の速度で移動することが保証されます。
たとえば、フレーム レートが低い場合、deltaTime は大きくなり、それを補うために四角形はそのフレーム内でより大きな距離を移動します。
| 1 秒あたりのフレーム数 | デルタタイム | 距離 |
|---|---|---|
| 428.1 高 | 0.0023366 秒 | 0.58415 ピクセル |
| 38.8 低 | 0.0257694 秒 | 6.44235 ピクセル |
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 の結果を現在の値に追加します。
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 関数を使用してフォーム上に四角形を描画します。
