기본 애니메이션

  • 아티클
  • 읽는 데 16분 걸림

.NET 다중 플랫폼 앱 UI(.NET MAUI) 애니메이션 클래스는 시각적 요소의 다양한 속성을 대상으로 하며, 일반적인 기본 애니메이션은 일정 기간 동안 속성을 한 값에서 다른 값으로 점진적으로 변경합니다.

기본 애니메이션은 개체에서 작동하는 VisualElement 네임스페이스에서 클래스에서 Microsoft.Maui.Controls 제공하는 ViewExtensions 확장 메서드를 사용하여 만들 수 있습니다.

  • CancelAnimations 는 애니메이션을 취소합니다.
  • FadeTo 의 속성에 Opacity 애니메이션 효과를 시킵 VisualElement니다.
  • RelScaleTo는 애니메이션된 증분 증가 또는 감소를 해당 VisualElement속성에 Scale 적용합니다.
  • RotateTo 의 속성에 Rotation 애니메이션 효과를 시킵 VisualElement니다.
  • RelRotateTo는 애니메이션된 증분 증가 또는 감소를 해당 VisualElement속성에 Rotation 적용합니다.
  • RotateXTo 의 속성에 RotationX 애니메이션 효과를 시킵 VisualElement니다.
  • RotateYTo 의 속성에 RotationY 애니메이션 효과를 시킵 VisualElement니다.
  • ScaleTo 의 속성에 Scale 애니메이션 효과를 시킵 VisualElement니다.
  • ScaleXTo 의 속성에 ScaleX 애니메이션 효과를 시킵 VisualElement니다.
  • ScaleYTo 의 속성에 ScaleY 애니메이션 효과를 시킵 VisualElement니다.
  • TranslateTo의 속성과 TranslationY 애니메이션 효과를 시킵VisualElement니다TranslationX.

기본적으로 각 애니메이션에는 250밀리초가 걸립니다. 그러나 애니메이션을 만들 때 각 애니메이션에 대한 기간을 지정할 수 있습니다.

참고

클래스는 ViewExtensions 확장 메서드도 제공합니다 LayoutTo . 그러나 이 메서드는 레이아웃에서 크기와 위치 변경 내용을 포함하는 레이아웃 상태 간의 전환에 애니메이션 효과를 주는 데 사용됩니다.

클래스의 ViewExtensions 애니메이션 확장 메서드는 모두 비동기이며 개체를 Task<bool> 반환합니다. 반환 값은 false 애니메이션이 완료되고 true 애니메이션이 취소된 경우입니다. 따라서 애니메이션 연산을 연산자와 await 결합하면 이전 메서드가 완료된 후 실행되는 후속 애니메이션 메서드를 사용하여 순차적 애니메이션을 만들 수 있습니다. 자세한 내용은 복합 애니메이션을 참조하세요.

백그라운드에서 애니메이션을 완료하도록 해야 하는 요구 사항이 있는 경우 연산자를 await 생략할 수 있습니다. 이 시나리오에서는 애니메이션 확장 메서드가 애니메이션을 시작한 후 신속하게 반환되며 애니메이션이 백그라운드에서 발생합니다. 이 작업은 복합 애니메이션을 만들 때 활용할 수 있습니다. 자세한 내용은 복합 애니메이션을 참조하세요.

단일 애니메이션

클래스의 ViewExtensions 각 확장 메서드는 일정 기간 동안 속성을 한 값에서 다른 값으로 점진적으로 변경하는 단일 애니메이션 작업을 구현합니다.

회전

회전은 요소의 RotateTo 속성을 점진적으로 변경하는 메서드를 Rotation 사용하여 수행됩니다.

await image.RotateTo(360, 2000);
image.Rotation = 0;

이 예제 Image 에서는 인스턴스가 2초(2000밀리초)에 걸쳐 최대 360도 회전됩니다. 이 메서드는 RotateTo 애니메이션의 시작 부분에 대한 요소의 현재 Rotation 속성 값을 가져온 다음 해당 값에서 첫 번째 인수(360)로 회전합니다. 애니메이션이 완료되면 이미지의 Rotation 속성이 0으로 다시 설정됩니다. 이렇게 하면 애니메이션이 Rotation 종료된 후 속성이 360으로 유지되지 않으므로 추가 회전을 방지할 수 있습니다.

참고

메서드 외에도 RotateTo 각각 및 RotateYTo 속성에 애니메이션 효과를 RotationX 주는 메서드도 RotationYRotateXTo 있습니다.

상대 회전

상대 회전은 요소의 RelRotateTo 속성을 점진적으로 변경하는 메서드를 Rotation 사용하여 수행됩니다.

await image.RelRotateTo(360, 2000);

이 예제 Image 에서는 인스턴스가 시작 위치에서 2초(2000밀리초)를 초과하여 360도 회전됩니다. 이 메서드는 RelRotateTo 애니메이션의 시작 부분에 대한 요소의 현재 Rotation 속성 값을 가져온 다음 해당 값에서 첫 번째 인수(360)를 더한 값으로 회전합니다. 이렇게 하면 각 애니메이션이 항상 시작 위치에서 360도 회전됩니다. 따라서 애니메이션이 이미 진행 중인 동안 새 애니메이션이 호출되면 현재 위치에서 시작하여 360도 증가하지 않는 위치에서 끝날 수 있습니다.

크기 조정

크기 조정은 요소의 ScaleTo 속성을 점진적으로 변경하는 메서드를 Scale 사용하여 수행됩니다.

await image.ScaleTo(2, 2000);

이 예제 Image 에서 인스턴스는 2초(2000밀리초)를 초과하여 크기가 두 배까지 확장됩니다. 이 메서드는 ScaleTo 애니메이션의 시작 부분에 대한 요소의 현재 Scale 속성 값을 가져온 다음 해당 값에서 첫 번째 인수로 크기가 조정됩니다. 이미지 크기를 두 배 크기로 확장하는 효과가 있습니다.

참고

메서드 외에도 ScaleTo 각각 및 ScaleYTo 속성에 애니메이션 효과를 ScaleX 주는 메서드도 ScaleYScaleXTo 있습니다.

상대 크기 조정

상대 크기 조정은 요소의 RelScaleTo 속성을 점진적으로 변경하는 메서드를 Scale 사용하여 수행됩니다.

await image.RelScaleTo(2, 2000);

이 예제 Image 에서 인스턴스는 2초(2000밀리초)를 초과하여 크기가 두 배까지 확장됩니다. 이 메서드는 RelScaleTo 애니메이션의 시작 부분에 대한 요소의 현재 Scale 속성 값을 가져온 다음 해당 값에서 첫 번째 인수를 더한 값으로 크기를 조정합니다. 이렇게 하면 각 애니메이션이 항상 시작 위치에서 2의 크기 조정이 됩니다.

앵커를 사용하여 크기 조정 및 회전

시각적 요소의 속성 및 AnchorY 속성은 AnchorX 및 속성에 대한 크기 조정 또는 회전의 중심을 ScaleRotation 설정합니다. 따라서 해당 값은 및 ScaleTo 메서드에도 RotateTo 영향을 줍니다.

Image 레이아웃의 중앙에 배치된 경우 다음 코드 예제에서는 해당 AnchorY 속성을 설정하여 레이아웃의 중심을 중심으로 이미지를 회전하는 방법을 보여 줍니다.

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

레이아웃 AnchorX 의 중심을 중심으로 인스턴스를 회전 Image 하려면 해당 값과 속성을 너비와 AnchorY 높이Image를 기준으로 하는 값으로 설정해야 합니다. 이 예제에서 중심은 레이아웃의 Image 가운데에 정의되므로 기본값 AnchorX 0.5는 변경할 필요가 없습니다. 그러나 AnchorY 속성은 레이아웃의 위쪽에서 가운데 지점까지 값 Image 으로 다시 정의됩니다. 이렇게 하면 Image 레이아웃의 중심점 주위에 360도의 전체 회전이 수행됩니다.

Translation

변환은 요소의 TranslateTo 속성 및 TranslationY 속성을 점진적으로 변경하는 TranslationX 메서드를 사용하여 수행됩니다.

await image.TranslateTo(-100, -100, 1000);

이 예제에서는 인스턴스가 Image 1초(1000밀리초)를 초과하여 가로 및 세로로 변환됩니다. 이 메서드는 TranslateTo 동시에 이미지 100개의 디바이스 독립적 단위를 왼쪽으로 변환하고 100개의 디바이스 독립적 단위를 위쪽으로 변환합니다. 첫 번째 인수와 두 번째 인수가 모두 음수이기 때문입니다. 양수를 제공하면 이미지가 오른쪽 및 아래로 변환됩니다.

중요

요소가 처음에 화면에서 배치된 다음 화면으로 변환된 경우 변환 후 요소의 입력 레이아웃이 화면 외부에 유지되고 사용자가 상호 작용할 수 없습니다. 따라서 뷰를 최종 위치에 배치한 다음 필요한 번역을 수행하는 것이 좋습니다.

페이딩

페이딩은 요소의 FadeTo 속성을 점진적으로 변경하는 메서드를 Opacity 사용하여 수행됩니다.

image.Opacity = 0;
await image.FadeTo(1, 4000);

이 예제에서는 인스턴스가 Image 4초(4000밀리초) 이상 페이드됩니다. 이 메서드는 FadeTo 애니메이션의 시작 부분에 대한 요소의 현재 Opacity 속성 값을 가져온 다음 해당 값에서 첫 번째 인수로 페이드 인합니다.

복합 애니메이션

복합 애니메이션은 애니메이션의 순차적 조합이며 연산자를 await 사용하여 만들 수 있습니다.

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

이 예제에서는 인스턴스가 Image 6초(6000밀리초)를 초과하여 변환됩니다. 변환 Image 은 5개의 애니메이션을 사용하며 await , 연산자는 각 애니메이션이 순차적으로 실행된다는 것을 나타냅니다. 따라서 이전 메서드가 완료된 후 후속 애니메이션 메서드가 실행됩니다.

복합 애니메이션

복합 애니메이션은 둘 이상의 애니메이션이 동시에 실행되는 애니메이션의 조합입니다. 대기 중인 애니메이션과 대기되지 않은 애니메이션을 결합하여 복합 애니메이션을 만들 수 있습니다.

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

이 예제에서는 인스턴스의 Image 크기를 조정하고 4초(4000밀리초)에 걸쳐 동시에 회전합니다. 크기 조정 Image 은 회전과 동시에 발생하는 두 개의 순차적 애니메이션을 사용합니다. 메서드는 RotateTo 연산자 await 없이 실행되고 첫 번째 ScaleTo 애니메이션이 시작된 후 즉시 반환됩니다. await 첫 번째 메서드의 연산자는 첫 ScaleTo 번째 메서드가 완료될 때까지 두 번째 ScaleTo 메서드를 ScaleTo 지연합니다. 이 시점에서 RotateTo 애니메이션이 절반으로 완료되고 Image 180도 회전됩니다. 마지막 2초(2000밀리초) 동안 두 번째 ScaleTo 애니메이션과 애니메이션이 RotateTo 모두 완료됩니다.

여러 애니메이션을 동시에 실행

및 Task.WhenAll 메서드를 Task.WhenAny 사용하여 여러 비동기 메서드를 동시에 실행할 수 있으므로 복합 애니메이션을 만들 수 있습니다. 두 메서드 모두 개체를 Task 반환하고 각각 개체를 반환 Task 하는 메서드 컬렉션을 수락합니다. 다음 Task.WhenAny 코드 예제와 같이 컬렉션의 메서드가 실행을 완료하면 메서드가 완료됩니다.

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

이 예제에서 메서드는 Task.WhenAny 두 개의 작업을 포함합니다. 첫 번째 작업은 인스턴스를 Image 4초(4,000밀리초)에 걸쳐 회전하고, 두 번째 작업은 2초(2000밀리초)를 초과하여 이미지의 크기를 조정합니다. 두 번째 작업이 완료되면 메서드 호출이 Task.WhenAny 완료됩니다. 그러나 메서드가 RotateTo 계속 실행되고 있더라도 두 번째 ScaleTo 메서드를 시작할 수 있습니다.

다음 Task.WhenAll 코드 예제와 같이 컬렉션의 모든 메서드가 완료되면 메서드가 완료됩니다.

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

이 예제에서 메서드는 Task.WhenAll 각각 10분 이상 실행되는 세 가지 태스크를 포함합니다. 각각 Task 은 360도 회전의 다른 수를 만듭니다 - 307 RotateTo회전, 251 회전 RotateXTo및 199 회전.RotateYTo 이러한 값은 소수이므로 회전이 동기화되지 않으므로 반복 패턴이 발생하지 않습니다.

애니메이션 취소

앱은 확장 메서드를 호출하여 하나 이상의 애니메이션을 CancelAnimations 취소할 수 있습니다.

image.CancelAnimations();

이 예제에서는 인스턴스에서 실행되는 모든 애니메이션이 Image 즉시 취소됩니다.