다음을 통해 공유

의 사용자 지정 애니메이션 Xamarin.Forms

  • 아티클

Animation 클래스는 ViewExtensions 클래스의 확장 메서드가 하나 이상의 애니메이션 개체를 만드는 모든 Xamarin.Forms 애니메이션의 구성 요소입니다. 이 문서에서는 애니메이션 클래스를 사용하여 애니메이션을 만들고 취소하고, 여러 애니메이션을 동기화하고, 기존 애니메이션 메서드에 의해 애니메이션되지 않은 속성에 애니메이션 효과를 주는 사용자 지정 애니메이션을 만드는 방법을 보여 줍니다.

애니메이션 효과를 주는 속성의 시작 및 끝 값과 속성 값을 변경하는 콜백을 포함하여 개체를 만들 Animation 때 많은 매개 변수를 지정해야 합니다. 개체는 Animation 실행 및 동기화할 수 있는 자식 애니메이션 컬렉션을 유지할 수도 있습니다. 자세한 내용은 자식 애니메이션을 참조 하세요.

자식 애니메이션을 Animation 포함하거나 포함하지 않을 수 있는 클래스를 사용하여 만든 애니메이션을 실행하는 작업은 메서드를 Commit 호출하여 수행됩니다. 이 메서드는 애니메이션의 지속 시간 및 다른 항목 중에서 애니메이션을 반복할지 여부를 제어하는 콜백을 지정합니다.

또한 Animation 클래스에는 IsEnabled 절전 모드가 활성화되는 경우와 같이 운영 체제에서 애니메이션을 사용하지 않도록 설정했는지 여부를 확인하기 위해 검사할 수 있는 속성이 있습니다.

애니메이션 만들기

개체를 Animation 만들 때 일반적으로 다음 코드 예제와 같이 최소 3개의 매개 변수가 필요합니다.

var animation = new Animation (v => image.Scale = v, 1, 2);

이 코드는 인스턴스 속성의 Scale 애니메이션을 Image 1 값에서 2 값으로 정의합니다. 파생 Xamarin.Forms된 애니메이션 값은 속성 값을 변경하는 Scale 데 사용되는 첫 번째 인수로 지정된 콜백에 전달됩니다.

애니메이션은 다음 코드 예제에 Commit 설명된 대로 메서드 호출로 시작됩니다.

animation.Commit (this, "SimpleAnimation", 16, 2000, Easing.Linear, (v, c) => image.Scale = 1, () => true);

메서드는 Commit 개체를 Task 반환하지 않습니다. 대신 콜백 메서드를 통해 알림이 제공됩니다.

메서드에 Commit 지정된 인수는 다음과 같습니다.

  • 첫 번째 인수(소유자)는 애니메이션의 소유자를 식별합니다. 애니메이션이 적용되는 시각적 요소 또는 페이지와 같은 다른 시각적 요소일 수 있습니다.
  • 두 번째 인수(이름)는 이름을 사용하여 애니메이션을 식별합니다. 이름은 소유자와 결합하여 애니메이션을 고유하게 식별합니다. 그런 다음, 이 고유 식별을 사용하여 애니메이션이 실행 중인지(AnimationIsRunning또는) 취소할지를 결정할 수 있습니다AbortAnimation.
  • 세 번째 인수(속도)는 생성자에 정의된 Animation 콜백 메서드에 대한 각 호출 사이의 밀리초 수를 나타냅니다.
  • 네 번째 인수(길이)는 애니메이션의 지속 시간(밀리초)을 나타냅니다.
  • 다섯 번째 인수(감속)는 애니메이션에 사용할 감속/가속 함수를 정의합니다. 또는 감속/가속 함수를 생성자에 대한 인수 Animation 로 지정할 수 있습니다. 감속/가속 함수에 대한 자세한 내용은 감속/가속 함수를 참조 하세요.
  • 여섯 번째 인수(완료)는 애니메이션이 완료될 때 실행되는 콜백입니다. 이 콜백은 두 개의 인수를 사용합니다. 첫 번째 인수는 최종 값을 나타내고 두 번째 인수는 애니메이션이 취소된 경우 설정된 true 인수 bool 입니다. 또는 완성된 콜백을 생성자에 대한 인수 Animation 로 지정할 수 있습니다. 그러나 단일 애니메이션을 사용하면 완료된 콜백이 생성자와 Commit 메서드 모두에서 Animation 지정되면 메서드에 Commit 지정된 콜백만 실행됩니다.
  • 일곱 번째 인수(반복)는 애니메이션을 반복할 수 있는 콜백입니다. 애니메이션의 끝에서 호출되고 반환은 true 애니메이션을 반복해야 임을 나타냅니다.

전체적인 효과는 감속/가속 함수를 사용하여 2초(2000밀리초)를 초과하여 1에서 2로 속성을 Image 늘리는 Scale 애니메이션을 Linear 만드는 것입니다. 애니메이션이 완료 될 때마다 해당 Scale 속성이 1로 다시 설정되고 애니메이션이 반복됩니다.

참고 항목

서로 독립적으로 실행되는 동시 애니메이션은 각 애니메이션에 대한 개체를 Animation 만든 다음 각 애니메이션에서 메서드를 Commit 호출하여 생성할 수 있습니다.

자식 애니메이션

클래스는 Animation 다른 Animation 개체가 추가되는 개체를 Animation 만드는 자식 애니메이션도 지원합니다. 이렇게 하면 일련의 애니메이션을 실행하고 동기화할 수 있습니다. 다음 코드 예제에서는 자식 애니메이션을 만들고 실행하는 방법을 보여 줍니다.

var parentAnimation = new Animation ();
var scaleUpAnimation = new Animation (v => image.Scale = v, 1, 2, Easing.SpringIn);
var rotateAnimation = new Animation (v => image.Rotation = v, 0, 360);
var scaleDownAnimation = new Animation (v => image.Scale = v, 2, 1, Easing.SpringOut);

parentAnimation.Add (0, 0.5, scaleUpAnimation);
parentAnimation.Add (0, 1, rotateAnimation);
parentAnimation.Add (0.5, 1, scaleDownAnimation);

parentAnimation.Commit (this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState (true, false));

또는 다음 코드 예제와 같이 코드 예제를 보다 간결하게 작성할 수 있습니다.

new Animation {
    { 0, 0.5, new Animation (v => image.Scale = v, 1, 2) },
    { 0, 1, new Animation (v => image.Rotation = v, 0, 360) },
    { 0.5, 1, new Animation (v => image.Scale = v, 2, 1) }
    }.Commit (this, "ChildAnimations", 16, 4000, null, (v, c) => SetIsEnabledButtonState (true, false));

두 코드 예제에서 부모 Animation 개체가 만들어지고 추가 Animation 개체가 추가됩니다. 메서드의 Add 처음 두 인수는 자식 애니메이션을 시작하고 완료할 시기를 지정합니다. 인수 값은 0에서 1 사이여야 하며, 부모 애니메이션 내에서 지정된 자식 애니메이션이 활성화될 상대 기간을 나타냅니다. 따라서 이 예제 scaleUpAnimation 에서는 애니메이션의 전반부에 대해 활성화되고, scaleDownAnimation 애니메이션의 후반부에 대해 활성화되고 rotateAnimation , 전체 기간 동안 활성화됩니다.

전체적인 효과는 애니메이션이 4초(4,000밀리초)에 걸쳐 발생한다는 것입니다. 이 속성은 scaleUpAnimation 2초 동안 1에서 2까지 애니메이션 Scale 효과를 집니다. 그런 scaleDownAnimation 다음 2초 동안 2에서 1까지 속성에 애니메이션 효과를 주세요 Scale . 두 배율 애니메이션이 모두 발생하는 rotateAnimation 동안 4초 동안 0에서 360까지 속성에 애니메이션 Rotation 효과를 줍니다. 크기 조정 애니메이션은 감속/가속 함수도 사용합니다. 감속/가속 함수 Image 는 SpringIn 크기가 커지기 전에 처음에 축소되고 SpringOut 감속/가속 함수는 Image 전체 애니메이션이 끝날 때 실제 크기보다 작아집니다.

자식 애니메이션을 사용하는 개체와 그렇지 않은 개체 간에 Animation 는 여러 가지 차이점이 있습니다.

  • 자식 애니메이션을 사용하는 경우 자식 애니메이션의 완성된 콜백은 자식이 완료된 시기를 나타내고 메서드에 Commit 전달된 완료된 콜백은 전체 애니메이션이 완료된 시기를 나타냅니다.
  • 자식 애니메이션을 사용할 때 메서드의 반복 콜백 Commit 에서 반환 true 해도 애니메이션이 반복되지는 않지만 애니메이션은 새 값 없이 계속 실행됩니다.
  • 감속/가속 함수를 Commit 메서드에 포함하고 감속/가속 함수가 1보다 큰 값을 반환하면 애니메이션이 종료됩니다. 감속/가속 함수가 0보다 작은 값을 반환하면 값이 0으로 고정됩니다. 0보다 작거나 1보다 큰 값을 반환하는 감속/가속 함수를 사용하려면 메서드가 아닌 Commit 자식 애니메이션 중 하나에 지정해야 합니다.

클래스에는 Animation 부모 Animation 개체에 자식 애니메이션을 추가하는 데 사용할 수 있는 메서드도 포함되어 WithConcurrent 있습니다. 그러나 시작 및 완료 인수 값은 0에서 1로 제한되지 않지만 0~1 범위에 해당하는 자식 애니메이션의 해당 부분만 활성화됩니다. 예를 들어 메서드 호출이 1에서 6까지의 속성을 대상으로 Scale 하지만 시작 및 완료 값이 -2와 3인 자식 애니메이션을 정의하는 경우 WithConcurrent 시작 값 -2는 값 1에 해당 Scale 하고 완료 값 3은 6 값에 Scale 해당합니다. 0과 1 범위를 벗어난 값은 애니메이션 Scale 에서 아무런 역할을 하지 않으므로 속성은 3에서 6까지만 애니메이션됩니다.

애니메이션 취소

애플리케이션은 다음 코드 예제와 같이 확장 메서드를 호출하여 AbortAnimation 애니메이션을 취소할 수 있습니다.

this.AbortAnimation ("SimpleAnimation");

애니메이션은 애니메이션 소유자와 애니메이션 이름의 조합으로 고유하게 식별됩니다. 따라서 애니메이션을 실행할 때 지정된 소유자와 이름을 지정하여 애니메이션을 취소해야 합니다. 따라서 코드 예제는 페이지에서 소유한 애니메이션 SimpleAnimation 을 즉시 취소합니다.

사용자 지정 애니메이션 만들기

지금까지 여기에 표시된 예제에서는 클래스의 메서드를 사용하여 동일하게 달성할 수 있는 애니메이션을 ViewExtensions 보여 줍니다. 그러나 클래스의 Animation 장점은 애니메이션 값이 변경될 때 실행되는 콜백 메서드에 액세스할 수 있다는 것입니다. 이렇게 하면 콜백에서 원하는 애니메이션을 구현할 수 있습니다. 예를 들어 다음 코드 예제에서는 0에서 1 사이의 색조 값을 사용하여 Color 메서드에서 Color.FromHsla 만든 값으로 설정하여 페이지의 속성에 애니메이션 BackgroundColor 효과를 낸다.

new Animation (callback: v => BackgroundColor = Color.FromHsla (v, 1, 0.5),
  start: 0,
  end: 1).Commit (this, "Animation", 16, 4000, Easing.Linear, (v, c) => BackgroundColor = Color.Default);

결과 애니메이션은 무지개 색을 통해 페이지 배경을 진행하는 모양을 제공합니다.

Bezier 곡선 애니메이션을 포함하여 복잡한 애니메이션을 만드는 방법에 대한 자세한 예는 Mobile Apps Xamarin.Forms만들기의 22장을 참조하세요.

사용자 지정 애니메이션 확장 메서드 만들기

클래스의 ViewExtensions 확장 메서드는 현재 값에서 지정된 값으로 속성에 애니메이션 효과를 줍니다. 이렇게 하면 다음과 같은 ColorTo 이유로 한 값에서 다른 값으로 색에 애니메이션 효과를 주는 데 사용할 수 있는 애니메이션 메서드를 만들기가 어렵습니다.

  • 클래스에서 정의한 유일한 Color 속성은 BackgroundColor애니메이션 효과를 주려는 속성이 아닙니다Color.VisualElement
  • 속성의 Color 현재 값은 실제 색이 Color.Default아니며 보간 계산에 사용할 수 없는 경우가 많습니다.

이 문제에 대한 해결 방법은 메서드가 ColorTo 특정 Color 속성을 대상으로 하지 않는 것입니다. 대신 보간된 Color 값을 호출자에게 다시 전달하는 콜백 메서드를 사용하여 작성할 수 있습니다. 또한 메서드는 시작 및 끝 Color 인수를 사용합니다.

이 메서드는 ColorTo 클래스의 Animate 메서드를 사용하여 해당 기능을 제공하는 확장 메서드 AnimationExtensions 로 구현할 수 있습니다. 다음 코드 예제에 Animate 설명된 대로 메서드를 사용하여 형식 double이 아닌 속성을 대상으로 지정할 수 있기 때문입니다.

public static class ViewExtensions
{
  public static Task<bool> ColorTo(this VisualElement self, Color fromColor, Color toColor, Action<Color> callback, uint length = 250, Easing easing = null)
  {
    Func<double, Color> transform = (t) =>
      Color.FromRgba(fromColor.R + t * (toColor.R - fromColor.R),
                     fromColor.G + t * (toColor.G - fromColor.G),
                     fromColor.B + t * (toColor.B - fromColor.B),
                     fromColor.A + t * (toColor.A - fromColor.A));
    return ColorAnimation(self, "ColorTo", transform, callback, length, easing);
  }

  public static void CancelAnimation(this VisualElement self)
  {
    self.AbortAnimation("ColorTo");
  }

  static Task<bool> ColorAnimation(VisualElement element, string name, Func<double, Color> transform, Action<Color> callback, uint length, Easing easing)
  {
    easing = easing ?? Easing.Linear;
    var taskCompletionSource = new TaskCompletionSource<bool>();

    element.Animate<Color>(name, transform, callback, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));
    return taskCompletionSource.Task;
  }
}

이 메서드에는 Animate 콜백 메서드인 변환 인수가 필요합니다. 이 콜백에 대한 입력은 항상 double 0에서 1 사이의 범위입니다. 따라서 메서드는 ColorTo 0에서 1 사이의 범위가 허용 double 되고 해당 값에 해당하는 값을 반환 Color 하는 자체 변환 Func 을 정의합니다. 이 값은 Color 제공된 두 인수의 R, G및 BA 값을 보간하여 계산됩니다Color. Color 그런 다음 값이 특정 속성에 애플리케이션에 대한 콜백 메서드로 전달됩니다.

이 방법을 사용하면 ColorTo 다음 코드 예제에 설명된 대로 메서드가 모든 Color 속성에 애니메이션 효과를 줍니다.

await Task.WhenAll(
  label.ColorTo(Color.Red, Color.Blue, c => label.TextColor = c, 5000),
  label.ColorTo(Color.Blue, Color.Red, c => label.BackgroundColor = c, 5000));
await this.ColorTo(Color.FromRgb(0, 0, 0), Color.FromRgb(255, 255, 255), c => BackgroundColor = c, 5000);
await boxView.ColorTo(Color.Blue, Color.Red, c => boxView.Color = c, 4000);

이 코드 예제에서 메서드는 ColorTo 페이지의 속성 및 BackgroundColor 속성LabelBackgroundColor, 페이지의 속성BoxView에 Color 애니메이션 TextColor 을 적용합니다.