Animation
1.0.0
애니메이션은 일련의 정적 이미지를 빠르게 연속적으로 표시하여 움직이는 듯한 환상을 만드는 예술입니다.
우리 앱에서는 애니메이션을 사용하여 직사각형이 오른쪽으로 움직이는 것처럼 보이도록 합니다.
애니메이션이 모든 장치에서 원활하게 실행되도록 하기 위해 프레임 독립적으로 설계했습니다.
이는 애니메이션이 프레임 속도 변화의 영향을 받지 않아 모든 사용자에게 일관되고 원활한 경험을 보장한다는 것을 의미합니다.
시간 기반 모션을 구현하기 위해 다음을 사용합니다.
Private DeltaTime As TimeSpan
DeltaTime은 마지막 프레임이 그려진 이후의 시간입니다.
DeltaTime = CurrentFrame - LastFrame
Private Velocity As Single = 250.0F
속도(Velocity)는 직사각형이 움직이기를 원하는 속도로, 초당 픽셀 단위로 측정됩니다.
이 값을 조정하여 직사각형의 속도를 변경할 수 있습니다.
우리는 속도에 deltaTime을 곱한 값을 기준으로 직사각형이 이동해야 하는 거리를 계산합니다.
거리 = 속도 * 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은 단정밀도 부동 소수점 숫자(단일)입니다.
직사각형의 위치가 빠르고 정확하게 업데이트되므로 이는 애니메이션에 중요합니다.
RectPostion.X += Velocity * DeltaTime.TotalSeconds 'Δs = V * Δt
우리는 벡터 연산을 사용하여 현재 위치와 속도를 기반으로 직사각형의 새 위치를 계산합니다.
+= 연산자는 현재 값에 속도 * deltaTime의 결과를 추가하여 RectPostion.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 함수를 사용하여 양식에 직사각형을 그리는 데 사용됩니다.
