Animation
1.0.0
Анимация — это искусство создания иллюзии движения путем быстрого отображения серии статических изображений.
В нашем приложении мы используем анимацию, чтобы создать впечатление, будто наш прямоугольник движется вправо.
Чтобы наша анимация работала плавно на всех устройствах, мы сделали ее независимой от кадра.
Это означает, что на нашу анимацию не влияют изменения частоты кадров, что обеспечивает единообразие и бесперебойность работы для всех пользователей.
Для реализации движения, основанного на времени, мы используем.
Private DeltaTime As TimeSpan
DeltaTime — это время с момента отрисовки последнего кадра.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
Скорость — это скорость, с которой мы хотим, чтобы перемещался наш прямоугольник, измеряемая в пикселях в секунду.
Мы можем настроить это значение, чтобы изменить скорость нашего прямоугольника.
Мы вычисляем расстояние, на которое должен переместиться наш прямоугольник, на основе его скорости, умноженной на deltaTime.
Расстояние = Скорость * ДельтаВремя
Это гарантирует, что наш прямоугольник будет двигаться с постоянной скоростью независимо от частоты кадров.
Например, если частота кадров низкая, deltaTime будет больше, и наш прямоугольник переместится на большее расстояние в этом кадре для компенсации.
| Кадров в секунду | ДельтаВремя | Расстояние |
|---|---|---|
| 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 для округления компонента X RectPosition до ближайшего целочисленного значения.
Rect.X = Math.Round(RectPostion.X)
Пример:
Значение RectPostion.X — 69,7753143.
Ближайшее целое значение — 70.
Итак, мы установили Rect.X на 70.
FillRectangle(Brushes.Purple, Rect)
Целочисленное значение затем используется для рисования прямоугольника в форме с помощью функции FillRectangle.
