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 函数在表单上绘制矩形。