의 간단한 애니메이션 Xamarin.Forms
ViewExtensions 클래스는 간단한 애니메이션을 생성하는 데 사용할 수 있는 확장 메서드를 제공합니다. 이 문서에서는 ViewExtensions 클래스를 사용하여 애니메이션을 만들고 취소하는 방법을 보여 줍니다.
이 클래스는 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.TranslateToTranslationX의 속성과TranslationY애니메이션 효과를 니다VisualElement.
기본적으로 각 애니메이션에는 250밀리초가 소요됩니다. 그러나 애니메이션을 만들 때 각 애니메이션에 대한 기간을 지정할 수 있습니다.
참고 항목
클래스는 ViewExtensions 확장 메서드를 LayoutTo 제공합니다. 그러나 이 메서드는 레이아웃에서 크기와 위치 변경 내용을 포함하는 레이아웃 상태 간의 전환에 애니메이션 효과를 주는 데 사용됩니다. 따라서 서브클래스만 사용해야 Layout 합니다.
클래스의 ViewExtensions 애니메이션 확장 메서드는 모두 비동기이며 개체를 Task<bool> 반환합니다. 반환 값은 false 애니메이션이 완료되고 true 애니메이션이 취소된 경우입니다. 따라서 애니메이션 메서드는 일반적으로 연산자에 await 사용되어야 하므로 애니메이션이 완료된 시기를 쉽게 확인할 수 있습니다. 또한 이전 메서드가 완료된 후 후속 애니메이션 메서드를 실행하여 순차 애니메이션을 만들 수 있습니다. 자세한 내용은 복합 애니메이션을 참조 하세요.
백그라운드에서 애니메이션을 완료하도록 해야 하는 요구 사항이 있는 경우 연산자를 await 생략할 수 있습니다. 이 시나리오에서는 애니메이션을 시작한 후 애니메이션 확장 메서드가 빠르게 반환되며 애니메이션이 백그라운드에서 발생합니다. 이 작업은 복합 애니메이션을 만들 때 활용할 수 있습니다. 자세한 내용은 복합 애니메이션을 참조 하세요.
운영자에 대한 await 자세한 내용은 비동기 지원 개요를 참조 하세요.
단일 애니메이션
각 확장 메서드는 ViewExtensions 일정 기간 동안 속성을 한 값에서 다른 값으로 점진적으로 변경하는 단일 애니메이션 작업을 구현합니다. 이 섹션에서는 각 애니메이션 작업을 살펴봅니다.
회전
다음 코드 예제에서는 메서드를 RotateTo 사용하여 다음과 같은 속성에 애니메이션 효과를 Rotation Image주는 방법을 보여 줍니다.
await image.RotateTo (360, 2000);
image.Rotation = 0;
이 코드는 2초(2000밀리초)에 걸쳐 최대 360도 회전하여 인스턴스에 애니메이션 Image 효과를 줍니다. 이 메서드는 RotateTo 애니메이션의 시작 부분에 대한 현재 Rotation 속성 값을 가져온 다음 해당 값에서 첫 번째 인수(360)로 회전합니다. 애니메이션이 완료되면 이미지의 Rotation 속성이 0으로 다시 설정됩니다. 이렇게 하면 애니메이션이 Rotation 종료된 후 속성이 360으로 유지되지 않으므로 추가 회전을 방지할 수 있습니다.
다음 스크린샷은 각 플랫폼에서 진행 중인 회전을 보여 줍니다.
상대 회전
다음 코드 예제에서는 메서드를 RelRotateTo 사용하여 다음과 같은 속성을 증분 방식으로 늘리거나 줄이는 Rotation 방법을 Image보여 줍니다.
await image.RelRotateTo (360, 2000);
이 코드는 시작 위치에서 2초(2000밀리초)를 통해 360도 회전하여 인스턴스에 애니메이션 Image 효과를 줍니다. 이 메서드는 RelRotateTo 애니메이션의 시작 부분에 대한 현재 Rotation 속성 값을 가져온 다음 해당 값에서 첫 번째 인수(360)를 더한 값으로 회전합니다. 이렇게 하면 각 애니메이션이 항상 시작 위치에서 360도 회전됩니다. 따라서 애니메이션이 이미 진행 중인 동안 새 애니메이션이 호출되면 현재 위치에서 시작하여 360도 증가하지 않는 위치에서 끝날 수 있습니다.
다음 스크린샷은 각 플랫폼에서 진행 중인 상대 회전을 보여 줍니다.
크기 조정
다음 코드 예제에서는 메서드를 ScaleTo 사용하여 다음과 같은 속성에 애니메이션 효과를 Scale Image주는 방법을 보여 줍니다.
await image.ScaleTo (2, 2000);
이 코드는 2초(2,000밀리초)에 걸쳐 크기가 최대 두 배까지 확장되어 인스턴스에 애니메이션 Image 효과를 줍니다. 메서드는 ScaleTo 애니메이션의 시작 부분에 대한 현재 Scale 속성 값(기본값 1)을 가져온 다음 해당 값에서 첫 번째 인수(2)로 배율을 조정합니다. 이렇게 하면 이미지 크기를 두 배 크기로 확장할 수 있습니다.
다음 스크린샷은 각 플랫폼에서 진행 중인 크기 조정을 보여 줍니다.
상대 크기 조정
다음 코드 예제에서는 메서드를 RelScaleTo 사용하여 다음과 같은 속성에 애니메이션 효과를 Scale Image주는 방법을 보여 줍니다.
await image.RelScaleTo (2, 2000);
이 코드는 2초(2,000밀리초)에 걸쳐 크기가 최대 두 배까지 확장되어 인스턴스에 애니메이션 Image 효과를 줍니다. 이 메서드는 RelScaleTo 애니메이션의 시작 부분에 대한 현재 Scale 속성 값을 가져온 다음 해당 값에서 값과 첫 번째 인수(2)로 배율을 조정합니다. 이렇게 하면 각 애니메이션이 항상 시작 위치에서 2의 크기 조정이 됩니다.
앵커를 사용하여 크기 조정 및 회전
및 AnchorY 속성은 AnchorX 및 속성에 대한 크기 조정 또는 회전의 중심을 Scale Rotation 설정합니다. 따라서 해당 값은 및 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 사용하여 다음과 같은 속성에 TranslationX TranslationY 애니메이션 효과를 Image주는 방법을 보여 줍니다.
await image.TranslateTo (-100, -100, 1000);
이 코드는 1초(1000밀리초)를 초과하여 수평 및 세로로 변환하여 인스턴스에 애니메이션 Image 효과를 줍니다. 이 메서드는 TranslateTo 이미지를 100픽셀에서 왼쪽으로, 100픽셀 위로 동시에 변환합니다. 첫 번째 인수와 두 번째 인수가 모두 음수이기 때문입니다. 양수를 제공하면 이미지가 오른쪽 및 아래쪽으로 변환됩니다.
다음 스크린샷은 각 플랫폼에서 진행 중인 번역을 보여 줍니다.
참고 항목
요소가 처음에 화면에서 배치된 다음 화면으로 변환된 경우 변환 후 요소의 입력 레이아웃이 화면 외부에 유지되고 사용자가 해당 요소와 상호 작용할 수 없습니다. 따라서 뷰를 최종 위치에 배치한 다음 필요한 번역을 수행하는 것이 좋습니다.
페이딩
다음 코드 예제에서는 메서드를 FadeTo 사용하여 다음과 같은 속성에 애니메이션 효과를 Opacity Image주는 방법을 보여 줍니다.
image.Opacity = 0;
await image.FadeTo (1, 4000);
이 코드는 4초(4000밀리초)를 초과하여 인스턴스에 애니메이션 Image 효과를 줍니다. 이 메서드는 FadeTo 애니메이션의 시작 부분에 대한 현재 Opacity 속성 값을 가져온 다음 해당 값에서 첫 번째 인수(1)로 페이드 인합니다.
다음 스크린샷은 각 플랫폼에서 페이드 진행 중인 페이드를 보여 줍니다.
복합 애니메이션
복합 애니메이션은 애니메이션의 순차적 조합이며 다음 코드 예제에 설명된 대로 연산자를 사용하여 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 메서드는 static 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 메서드 호출에는 두 개의 작업이 포함됩니다. 첫 번째 작업은 이미지를 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 회전 및 RotateXTo199 회전에 대한 RotateYTo. 이러한 값은 소수이므로 회전이 동기화되지 않으므로 반복 패턴이 발생하지 않습니다.
다음 스크린샷은 각 플랫폼에서 진행 중인 여러 회전을 보여 줍니다.
애니메이션 취소
애플리케이션은 다음 코드 예제와 같이 확장 메서드를 호출하여 CancelAnimations 하나 이상의 애니메이션을 취소할 수 있습니다.
image.CancelAnimations();
그러면 인스턴스에서 Image 현재 실행 중인 모든 애니메이션이 즉시 취소됩니다.
요약
이 문서에서는 클래스를 사용하여 애니메이션을 만들고 취소하는 것을 보여 줍니다 ViewExtensions . 이 클래스는 인스턴스를 회전, 크기 조정, 변환 및 페이드하는 VisualElement 간단한 애니메이션을 생성하는 데 사용할 수 있는 확장 메서드를 제공합니다.