[Xamarin] Animation

Google의 새로운 Material Design의 핵심 정책 중 하나는 “Motion은 의미를 제공한다” 입니다. 그런 만큼 애니매이션을 사용자와의 커뮤니케이션 수단 중 하나로 활용하는 것은 중요해 졌습니다. Xamarin에서는 이러한 애니매이션을 다양한 방법으로 지원합니다. Xamarin.Froms에서는 사전정의된 애니매이션 기능 뿐만 아니라 사용자 정의 애니매이션 기능을 이용하실 수 있습니다.

Predefined animations

이동, 회전, 크기조정, 투명화 등의 정의된 애니매이션을 지원합니다. 아래는 샘플과 설명을 나타냅니다.

1 2 3 4 5

//매개변수 //1. scale: 대상 크기를 지정합니다. 1은 100%를 나타내며, 1.5는 150%를 말합니다. //2. length: 진행시간을 말합니다. 1500은 1.5초간 실행된다는 의미입니다. //3. easing: 애니매이션의 진행속도를 말합니다. CubincInOut은 처음엔 느리다가 점점 빨라집니다. button.ScaleTo(1.5, 1500, Easing.CubicInOut);

ScaleTo 외에도 다음과 같은 Animation을 지원합니다.

• ScaleTo : Sacle Property를 통해 크기를 조정합니다.
• FadeTo : Opacity Property를 통해 투명화를 지원합니다. Opacity를 사용합니다. 현재 (2016년 4월 23일, Xamarin.Forms.Core 2.0) 버그로 인해 검게 변하는 등의 버그가 있습니다.
• LayoutTo: Layout Method를 호출함으로써 Bound Poperty를 변경하여 Animation을 실행합니다.   Layout<T> View의 Subclass에 대해 지원합니다.
• RotateTo: Rotation Property를 통해 지정한 각도만금 회전합니다.
• TranslateTo: 지정한 TranslateX, TranslateY를 통해 위치로 이동합니다.
• RelScaleTo, RelRotateTo: Rel로 시작되는 것은 Relative의 약자로 현재 설정되어 있는 값부터 Animation을 시작하는 Method입니다.

Custom Animations

직접 Animation을 작성하 수 있는 Method도 지원합니다.

1 2 3 4 5 6

button.Animate("AnimationName", value => {     button.TextColor = Color.FromRgb(1, 1, 1, 1.0 - value);     button.Scale = 1 + 2 * value; }, length: 500);

length:500은 0.5초간 실행된다는 의미이며, Animation Method가 실행될 때마다 value 값이 전달되며 실행될 때마다 double로서 0에서 1까지 지속적으로 변화한다.

Animate Method는 실제로 다음과 같은 다양한 매개변수를 지원합니다.

1	public static void Animate(this IAnimatable self, string name, Action<double> callback, uint rate = 16, uint length = 250, Easing easing = null, Action<T, bool> finished = null, Func<bool> repeat = null);

1. self: 애니매이션이 실행하는 소유자를 말합니다.
2. name: 애니매이션의 이름을 지정합니다. 애니매이션을 식별할 수 있는 이름으로써 추후 Animation Extension Method들을 통해 Animation을 실행하거나 취소하기 위해 구분자로 사용됩니다. 해당 View에 대해서만 유일한 이름을 지정하시면 됩니다.
3. callback: 애니매이션이 진행되는 동안 반복적으로 호출되는 Method입니다. 매개변수는 0~1사이의 매개변수로 여기에 애니매이션에 관련된 코드를 작성하시면 됩니다.
4. length: 애니매이션이 지속될 시간을 말합니다.
5. rate: 각각의 transform 메서드가 호출되는 시점의 간격을 Millisecond로 나타냅니다. 기본값은 16인데 이는 60 frame을 나타냅니다.
6. easing: 애니매이션이 실행되는 속도의 패턴입니다. 예를들어 CubincInOut은 처음에는 점점 빨라지는 애니매이션을 실행합니다.
7. finished: 애니매이션이 종료될 때 호출되는 메서드 입니다.
8. repeat: 애니매이션의 마지막에 호출되며 true를 반환할 경우 애니매이션이 반복됩니다.

Animation class

모든 애니매이션은 Animation class를 통해서 구현하실 수 있습니다. Animation class의 생성자는 다음과 같습니다.

1 2 3 4 5 6

public Animation (    Action<double> callback, //애니매이션 동안 호출되는 메서드    double start = 0.0f,   //시작 값    double end = 1.0f,     //종료 값    Easing easing = null,  //Easing    Action finished = null)//종료 시 호출되는 이벤트

callback 메서드는 애니매이션 동안 지속적으로 호출되며 double값을 매개변수로 받습니다. 전달받는 double값은 start와 end사이의 값이 됩니다.

애니매이션의 실행은 Commit() 메서드를 통해서 진행하실 수 있습니다.

1 2 3 4 5 6 7 8

animation.Commit(    IAnimatable owner, //소유자 컨트롤    string name,       //애니매이션 식별자    uint rate = 16,    //callback이 호출되는 간격(milliesec)    uint length = 250, //애니매이션이 지속되는 초(milliesec)    Easing easing = null,//애니매이션 easing효과    Action<double, bool> finished = null,//종료이벤트    Func<bool> repeat = null); //반복여부 지정하는 이벤트

Animation은 IEnumerable Interface를 구현하고 있으며 따라서 Add, Insert Method를 가지고 있으며 동시에 실행될 다른 Animation을 추가하실 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12

Animation modalAnimation = new Animation(); modalAnimation.Add(0, 1,   new Animation(callback: t => ModalRoot.Scale = t,     start: 0.7,     end: 1.0,     easing: Easing.SinOut)); modalAnimation.Add(0, 1,   new Animation(callback: t => ModalRoot.BackgroundColor = Color.FromRgba(1,1,1,t),     start: 0.5,     end: 0.99,     easing: Easing.SinOut)); modalAnimation.Commit(ownerControl, "animationName", length: 150);

위의 Animation은 2개의 애니매이션을 동시에 실행하는 예제입니다. IEnumerable를 구현하기에 다음과 같이 코드를 작성하실 수 도 있습니다.

1 2 3 4 5 6 7 8

(new Animation {   //동시에 실행될 Animation   { 0, 0.5, new Animation (v => button.Scale = v, 1, 5) },   { 0.25, 0.75, new Animation(v => button.Rotation = v, 0, 360) },   { 0.5, 1, new Animation (v => button.Scale = v, 5, 1) } }) .Commit(button, "animationName", 16, 5000);

Easing

easing은 Animation이 실행되는 속도의 패턴을 말하며 다음에서 전체 리스트를 확인하실 수 있습니다.

https://developer.xamarin.com/api/type/Xamarin.Forms.Easing/