기본 애니메이션

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

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

• CancelAnimations 애니메이션을 취소합니다.
• FadeTo가 VisualElement의 Opacity 속성을 애니메이션 처리합니다.
• RelScaleTo VisualElement Scale 속성에 애니메이션 증분 증가 또는 감소를 적용합니다.
• RotateTo은 VisualElement의 Rotation 속성에 애니메이션 효과를 줍니다.
• RelRotateTo은(는) VisualElement의 Rotation 속성에 증분 애니메이션 증가 또는 감소를 적용합니다.
• RotateXTo은 VisualElement의 RotationX 속성을 애니메이션합니다.
• RotateYTo가 VisualElement의 RotationY 속성을 애니메이션 처리합니다.
• ScaleTo은 VisualElement의 Scale 속성을 애니메이션화합니다.
• ScaleXTo는 VisualElement의 ScaleX 속성을 애니메이션화합니다.
• ScaleYTo는 VisualElement의 ScaleY 속성에 애니메이션 효과를 줍니다.
• TranslateTo는 VisualElement의 TranslationX 및 TranslationY 속성을 애니메이션합니다.

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

메모

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

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

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

Android에서 애니메이션은 시스템 애니메이션 설정을 준수합니다.

• 접근성 기능 또는 개발자 기능으로 시스템 애니메이션을 사용하지 않도록 설정하면 새 애니메이션이 즉시 완료된 상태로 이동합니다.
• 애니메이션이 진행되는 동안 디바이스의 절전 모드가 활성화되면 애니메이션이 즉시 완료된 상태로 이동합니다.
• 애니메이션이 진행 중이고 API 버전이 33 이상인 동안 디바이스의 애니메이션 기간이 0(사용 안 함)으로 설정된 경우 애니메이션은 즉시 완료된 상태로 이동합니다.

단일 애니메이션

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

회전

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

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

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

메모

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

상대 회전

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

await image.RelRotateTo(360, 2000);

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

스케일링

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

await image.ScaleTo(2, 2000);

이 예제에서 Image 인스턴스는 2초(2,000밀리초)에 걸쳐 크기가 두 배로 증가합니다. ScaleTo 메서드는 애니메이션 시작 시점에서 요소의 현재 Scale 속성 값을 가져온 후, 그 값에서 첫 번째 인수까지 확장됩니다. 이렇게 하면 이미지 크기를 두 배 크기로 확장할 수 있습니다.

메모

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

상대 크기 조정

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

await image.RelScaleTo(2, 2000);

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

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

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

레이아웃의 중앙에 배치된 Image가 있을 때, 다음 코드 예제는 AnchorY 속성을 설정하여 레이아웃의 중앙을 기준으로 이미지를 회전하는 방법을 보여줍니다.

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

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

번역

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

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

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

중요하다

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

희미해짐

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

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

이 예제에서는 Image 인스턴스가 4초(4,000밀리초) 넘게 페이드됩니다. 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 애니메이션이 시작됩니다. 첫 번째 ScaleTo 메서드의 await 연산자는 첫 번째 ScaleTo 메서드가 완료될 때까지 두 번째 ScaleTo 메서드를 지연합니다. 이 시점에서 RotateTo 애니메이션이 절반으로 완료되고 Image 180도 회전됩니다. 마지막 2초(2000밀리초) 동안 두 번째 ScaleTo 애니메이션과 RotateTo 애니메이션이 모두 완료됩니다.

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

Task.WhenAny 및 Task.WhenAll 메서드를 사용하여 여러 비동기 메서드를 동시에 실행할 수 있으므로 복합 애니메이션을 만들 수 있습니다. 두 메서드 모두 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초(4000밀리초)에 걸쳐 회전하고 두 번째 작업은 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도 회전을 만듭니다. 즉, RotateTo307회 회전, RotateXTo251회 회전, RotateYTo199회 회전입니다. 이러한 값은 소수이므로 회전이 동기화되지 않으므로 반복 패턴이 발생하지 않습니다.

애니메이션 취소

CancelAnimations 확장 메서드는 특정 VisualElement에서 실행 중인 회전, 크기 조정, 변환, 페이딩 등의 애니메이션을 취소하는 데 사용됩니다.

image.CancelAnimations();

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