[Xamarin] Animation

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

Predefined animations

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

//매개변수
//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도 지원합니다.

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는 실제로 다음과 같은 다양한 매개변수를 지원합니다.

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의 생성자는 다음과 같습니다.

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() 메서드를 통해서 진행하실 수 있습니다.

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을 추가하실 수 있습니다.

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를 구현하기에 다음과 같이 코드를 작성하실 수 도 있습니다.

(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/