다음을 통해 공유

22장의 요약 정보입니다. 애니메이션

  • 아티클

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

Xamarin.Forms 타이머 또는 Task.Delay를 사용하여 사용자 고유의 애니메이션을 만들 수 있지만 일반적으로 Xamarin.Forms에서 제공하는 애니메이션 기능을 사용하는 것이 더 쉽습니다. 세 클래스는 다음과 같은 애니메이션을 구현합니다.

일반적으로 애니메이션은 바인딩 가능한 속성을 통해 지원되는 속성을 대상으로 합니다. 이것은 요구 사항이 아니지만 동적으로 변경 사항에 대응하는 유일한 속성입니다.

이러한 애니메이션에 대한 XAML 인터페이스는 없지만 23장에서 설명한 기술을 사용하여 XAML에 애니메이션을 통합할 수 있습니다. 트리거 및 동작.

기본 애니메이션 살펴보기

기본 애니메이션 함수는 ViewExtensions 클래스에 있는 확장 메서드입니다. 해당 메서드는 VisualElement에서 파생되는 모든 개체에 적용됩니다. 가장 간단한 애니메이션은 Chapter 21. Transforms에 설명된 변환 속성을 대상으로 합니다.

AnimationTryout은 Button에 대한 Clicked 이벤트 처리기가 RotateTo 확장 메서드를 호출하여 원의 단추를 회전하는 방법을 보여 줍니다.

RotateTo 메서드는 1/4초 주기(기본값)로 Button의 Rotation 속성을 0에서 360까지 변경합니다. 그러나 Button을 다시 탭하면 Rotation 속성이 이미 360도이므로 아무 작업도 수행되지 않습니다.

애니메이션 기간 설정

RotateTo에 대한 두 번째 인수는 시간(밀리초)입니다. 이 인수를 큰 값으로 설정하고 애니메이션 중에 Button을 누르면 현재 각도부터 새 애니메이션이 시작됩니다.

상대 애니메이션

RelRotateTo 메서드는 지정된 값을 기존 값에 추가하여 상대 회전을 수행합니다. 이 메서드를 사용하면 Button을 여러 번 탭할 수 있으며, 매번 Rotation 속성이 360도까지 늘어납니다.

대기 애니메이션

ViewExtensions의 모든 애니메이션 메서드는 Task<bool> 개체를 반환합니다. 즉, ContinueWith 또는 await를 사용하여 일련의 순차 애니메이션을 정의할 수 있습니다. bool 완료 반환 값은 애니메이션이 중단 없이 완료되면 false이고, CancelAnimation 메서드에 의해 취소되어 동일한 요소에 설정된 ViewExtensions의 다른 메서드에서 시작된 모든 애니메이션이 취소되면 true입니다.

복합 애니메이션

대기 및 비대기 애니메이션을 조합하여 복합 애니메이션을 만들 수 있습니다. TranslationX, TranslationY및 Scale 변환 속성을 대상으로 하는 ViewExtensions의 애니메이션이 여기에 해당합니다.

TranslateTo는 TranslationX 및 TranslationY 속성에 잠재적으로 영향을 줄 수 있습니다.

Task.WhenAll 및 Task.WhenAny

또한 여러 작업을 모두 완료되었을 때 신호를 보내는 Task.WhenAll를 사용하거나 처음 몇 개 작업이 완료되었을 때 신호를 보내는 Task.WhenAny를 사용하여 동시 애니메이션을 관리할 수도 있습니다.

회전 및 앵커

ScaleTo, RelScaleTo, RotateTo 및 RelRotateTo 메서드를 호출하는 경우 AnchorX 및 AnchorY 속성을 설정하여 크기 조정 및 회전의 중심을 나타낼 수 있습니다.

CircleButton은 페이지의 중심을 기준으로 Button을 회전하여 이 기술을 보여 줍니다.

감속/가속 함수

일반적으로 애니메이션은 시작 값부터 끝 값까지 선형입니다. 감속/가속 함수를 통해 코스에서 애니메이션을 가속 또는 감속할 수 있습니다. 애니메이션 메서드에 대한 마지막 선택적 인수는 Easing 형식으로, Easing 형식의 11가지 정적 읽기 전용 필드를 정의하는 클래스입니다.

In 접미사는 해당 효과가 애니메이션의 시작 부분에 있음을 나타내고, Out은 끝 부분에 있음을 나타내고, InOut는 애니메이션의 시작과 끝 부분에 있음을 나타냅니다.

BounceButton 샘플에서는 감속/가속 함수를 사용하는 방법을 보여 줍니다.

사용자 고유의 감속/가속 함수

Easing 생성자에 Func<double, double>을 전달하여 사용자 고유의 감속/가속 함수를 정의할 수도 있습니다. 또한 Easing은 Func<double, double>에서 Easing으로의 묵시적 변환을 정의합니다. 감속/가속 함수에 대한 인수는 애니메이션이 시작부터 끝까지 선형으로 진행되므로 항상 0에서 1 사이입니다. 이 함수는 일반적으로 0에서 1 사이의 값을 반환하지만, 음수이거나 1보다 클 수도 있고(SpringIn 및 SpringOut 함수를 사용하는 경우) 수행 중인 작업을 잘 알고 있다면 규칙과 다를 수도 있습니다.

UneasyScale 샘플에서는 사용자 지정 감속/가속 함수를 보여 주고 CustomCubicEase는 다른 함수를 보여 줍니다.

SwingButton 샘플은 사용자 지정 감속/가속 함수를 보여 주고 회전 애니메이션 시퀀스 내에서 AnchorX 및 AnchorY 속성을 변경하는 기술도 보여 줍니다.

Xamarin.FormsBook.Toolkit 라이브러리에는 사용자 지정 감속/가속 함수를 사용하여 단추를 클릭할 때 위아래로 빠르게 움직이는 JiggleButton 클래스가 있습니다. JiggleButtonDemo 샘플은 이 작업을 보여 줍니다.

나타내기 애니메이션

한 가지 인기 있는 애니메이션 유형은 페이지가 처음 표시될 때 나타납니다. 해당 애니메이션은 페이지의 OnAppearing 재정의 시 시작될 수 있습니다. 해당 애니메이션의 경우 해당 페이지를 애니메이션을 뒤에 표시하는 방법을 XAML로 설정한 다음, 코드에서 레이아웃을 초기화하고 애니메이션 효과를 주는 것이 가장 좋습니다.

FadingEntrance 샘플은 FadeTo 확장 메서드를 사용하여 페이지 내용을 페이드 인합니다.

SlidingEntrance 샘플은 TranslateTo 확장 메서드를 사용하여 슬라이드에서 페이지 내용을 슬라이드 인합니다.

SwingingEntrance 샘플은 RotateYTo 확장 메서드를 사용하여 RotationY 속성에 애니메이션 효과를 적용합니다. RotateXTo 메서드를 사용할 수도 있습니다.

영구 애니메이션

다른 극단적인 경우에 "영구" 애니메이션은 프로그램이 종료될 때까지 실행됩니다. 해당 기능은 일반적으로 데모용입니다.

FadingTextAnimation 샘플은 FadeTo 애니메이션을 사용하여 텍스트의 두 부분을 페이드 인 및 페이드 아웃합니다.

PalindromeAnimation은 회문을 표시한 다음, 개별 문자를 180도씩 순서대로 회전하여 모두 거꾸로 표시합니다. 그런 다음, 전체 문자열을 원래 문자열과 동일하게 180도로 대칭 이동합니다.

CopterAnimation 샘플은 화면을 중심으로 회전하면서 간단한 BoxView 헬리콥터를 회전합니다.

RotatingSpokes는 화면을 중심으로 BoxView 스포크를 회전한 다음, 각 스포크 자체를 회전하여 흥미로운 패턴을 만듭니다.

회전하는 스포크의 3중 스크린샷

그러나 RotationBreakdown 샘플이 나타내는 것처럼, 요소의 Rotation 속성을 점진적으로 늘려도 장기간 작동하지 않을 수 있습니다.

SpinningImage 샘플은 RotateTo, RotateXTo 및 RotateYTo을 사용하여 3D 공간에서 비트맵을 회전하는 것처럼 보이게 합니다.

범위 속성에 애니메이션 적용

아직 설명되지 않은 ViewExtensions의 유일한 확장 메서드는 Layout 메서드를 호출하여 읽기 전용 Bounds 속성에 효과적으로 애니메이션 효과를 주는 LayoutTo입니다. 이 메서드는 일반적으로 26장에서 설명한 대로 파생상품에 의해 Layout 호출됩니다. CustomLayouts.

LayoutTo 메서드는 특별한 용도로만 제한해야 합니다. BouncingBox 프로그램은 이 메서드를 사용하여 페이지의 측면에 닿을 대 BoxView를 압축했다가 확장합니다.

XamagonXuzzle 샘플은 LayoutTo를 사용하여 클래식 15-16 퍼즐 구현에서 타일을 이동하여 번호가 매겨진 타일이 아닌 스크램블된 이미지를 표시합니다.

Xamarin Xuzzle의 3중 스크린샷

사용자 고유의 대기 가능 애니메이션

TryAwaitableAnimation 샘플은 대기 가능 애니메이션을 만듭니다. 메서드에서 Task 개체를 반환하고 애니메이션이 완료될 때 신호할 수 있는 중요한 클래스는 TaskCompletionSource입니다.

애니메이션에 대해 자세히 알아보기

Xamarin.Forms 애니메이션 시스템은 약간 혼동을 줄 수 있습니다. 애니메이션 시스템은 Easing 클래스 외에, ViewExtensions, Animation및 AnimationExtension 클래스를 구성합니다.

ViewExtensions 클래스

ViewExtensions를 이미 살펴보았을 것입니다. 이 클래스는 Task<bool> 및 CancelAnimations를 반환하는 9개의 메서드를 정의합니다. 9개의 메서드 중 7개는 변환 속성을 대상으로 합니다. 다른 두 메서드는 Opacity 속성을 대상으로 하는 FadeTo와, Layout 메서드를 호출하는 LayoutTo입니다.

Animation 클래스

Animation 클래스에는 콜백 및 완료된 메서드와 애니메이션의 매개 변수를 정의하기 위해 5개의 인수를 사용하는 생성자가 있습니다.

자식 애니메이션은 Add, Insert, WithConcurrent와 WithConcurrent의 오버로드를 사용하여 추가할 수 있습니다.

그런 다음, Commit 메서드를 호출하여 애니메이션 개체를 시작합니다.

AnimationExtensions 클래스

AnimationExtensions 클래스에는 주로 확장 메서드가 포함되어 있습니다. Animate 메서드의 버전은 여러 가지이며 제네릭 Animate 메서드가 다양한 기능을 제공하므로 실제로는 이 애니메이션 함수만 있으면 됩니다.

Animation 클래스 작업

ConcurrentAnimations 샘플은 여러 가지 애니메이션을 사용하여 Animation 클래스를 보여 줍니다.

자식 애니메이션

ConcurrentAnimations 샘플도(매우 유사한) Add 및 Insert 메서드를 사용하는 자식 애니메이션을 보여 줍니다.

상위 수준 애니메이션 메서드 이외의 메서드

또한 ConcurrentAnimations 샘플은 ViewExtensions 메서드의 대상이 되는 속성을 벗어나는 애니메이션 수행 방법을 보여 줍니다. 한 예에서는 일련의 기간이 더 길어지지만 다른 예에서는 BackgroundColor 속성에 애니메이션을 적용합니다.

사용자 고유의 대기 가능 메서드에 대한 추가 정보

ViewExtensions의 TranslateTo 메서드는 Easing.SpringOut 함수에서 작동하지 않습니다. 감속/가속 출력이 1을 초과하면 중지됩니다.

Xamarin.FormsBook.Toolkit 라이브러리에는 이 문제가 없는 TranslateXTo 및 TranslateYTo 확장 메서드와 해당 애니메이션을 취소하기 위한 CancelTranslateXTo 및 CancelTranslateYTo 메서드가 있는 MoreViewExtensions 클래스가 포함됩니다.

SpringSlidingEntrance는 TranslateXTo 메서드를 보여 줍니다.

클래스에는 MoreExtensions X 및 Y 번역을 결합하는 확장 메서드와 메서드도 포함되어 TranslateXYTo 있습니다 CancelTranslateXYTo .

베지어 애니메이션 구현

베지어 스플라인의 경로를 따라 요소를 이동하는 애니메이션을 개발할 수도 있습니다. Xamarin.FormsBook.Toolkit 라이브러리에는 베지어 스플라인 및 BezierTangent 열거형을 캡슐화하여 방향을 제어하는 BezierSpline 구조가 포함되어 있습니다.

MoreViewExtensions 클래스에는 BezierPathTo 확장 메서드와 CancelBezierPathTo 메서드가 있습니다.

BezierLoop 샘플은 베지어 경로를 따라 요소에 애니메이션 효과를 주는 방법을 보여 줍니다.

AnimationExtensions 작업

표준 컬렉션에서 누락된 애니메이션의 한 가지 유형은 색 애니메이션입니다. 문제는 두 Color 값 사이를 보간하는 적절한 방법이 없다는 것입니다. 개별 RGB 값을 보간하는 것이 가능하지만 HSL 값을 보간하는 것도 가능합니다.

이런 이유로 Xamarin.FormsBook.Toolkit 라이브러리의 MoreViewExtensions 클래스에는 두 가지 Color 애니메이션 메서드인 RgbColorAnimation 및 HslColorAnimation이 포함되어 있습니다. CancelRgbColorAnimation 및 CancelHslColorAnimation의 2가지 취소 메서드도 있습니다.

두 메서드는 AnimationExtensions에서 광범위한 제네릭 Animate 메서드를 호출하여 애니메이션을 수행하는 ColorAnimation를 사용합니다.

ColorAnimations 샘플은 해당 두 가지 유형의 색 애니메이션을 사용하는 방법을 보여 줍니다.

애니메이션 구조화

XAML에서 애니메이션을 표현하고 MVVM과 함께 사용하는 것이 유용한 경우도 있습니다. 이 내용은 다음 챕터 23에서 다룹니다. 트리거 및 동작.