사용자 지정 애니메이션
.NET 다중 플랫폼 앱 UI(.NET MAUI) Animation 클래스는 클래스의 확장 메서드가 하나 이상의 Animation 개체를 만드는 모든 .NET MAUI 애니메이션의 ViewExtensions 구성 요소입니다.
애니메이션 효과를 주는 속성의 시작 및 끝 값과 속성 값을 변경하는 콜백을 포함하여 개체를 만들 Animation 때 많은 매개 변수를 지정해야 합니다. 개체는 Animation 실행 및 동기화할 수 있는 자식 애니메이션 컬렉션을 기본 수 있습니다. 자세한 내용은 자식 애니메이션을 참조 하세요.
자식 애니메이션을 Animation 포함하거나 포함하지 않을 수 있는 클래스를 사용하여 만든 애니메이션을 실행하는 작업은 메서드를 Commit 호출하여 수행됩니다. 이 메서드는 애니메이션의 지속 시간 및 다른 항목 중에서 애니메이션을 반복할지 여부를 제어하는 콜백을 지정합니다.
참고 항목
클래스에는 Animation IsEnabled 절전 모드가 활성화되는 경우와 같이 운영 체제에서 애니메이션을 사용하지 않도록 설정했는지 여부를 확인하기 위해 검사할 수 있는 속성이 있습니다.
Android에서 애니메이션은 시스템 애니메이션 설정을 준수합니다.
- 접근성 기능 또는 개발자 기능으로 시스템 애니메이션을 사용하지 않도록 설정하면 새 애니메이션이 즉시 완료된 상태로 이동합니다.
- 애니메이션이 진행되는 동안 디바이스의 절전 모드가 활성화되면 애니메이션이 즉시 완료된 상태로 이동합니다.
- 애니메이션이 진행 중이고 API 버전이 33 이상인 동안 디바이스의 애니메이션 기간이 0(사용 안 함)으로 설정된 경우 애니메이션은 즉시 완료된 상태로 이동합니다.
애니메이션 만들기
개체를 Animation 만들 때 일반적으로 다음 코드 예제와 같이 최소 3개의 매개 변수가 필요합니다.
var animation = new Animation(v => image.Scale = v, 1, 2);
이 예제에서는 인스턴스 속성의 Scale Image 애니메이션이 값 1에서 2 값으로 정의됩니다. 애니메이션된 값은 속성 값을 변경하는 데 사용되는 첫 번째 인수로 지정된 콜백에 Scale 전달됩니다.
애니메이션은 메서드 호출로 시작됩니다 Commit .
animation.Commit(this, "SimpleAnimation", 16, 2000, Easing.Linear, (v, c) => image.Scale = 1, () => true);
참고 항목
메서드는 Commit 개체를 Task 반환하지 않습니다. 대신 콜백 메서드를 통해 알림이 제공됩니다.
메서드에 Commit 지정된 인수는 다음과 같습니다.
- 첫 번째 인수(
owner)는 애니메이션의 소유자를 식별합니다. 애니메이션이 적용되는 시각적 요소 또는 페이지와 같은 다른 시각적 요소일 수 있습니다. - 두 번째 인수(
name)는 애니메이션을 이름으로 식별합니다. 이름은 소유자와 결합하여 애니메이션을 고유하게 식별합니다. 그런 다음, 이 고유 식별을 사용하여 애니메이션이 실행 중인지(AnimationIsRunning또는) 취소할지를 결정할 수 있습니다AbortAnimation. - 세 번째 인수(
rate)는 생성자에 정의된 Animation 콜백 메서드에 대한 각 호출 사이의 밀리초 수를 나타냅니다. - 네 번째 인수(
length)는 애니메이션의 지속 시간(밀리초)을 나타냅니다. - 다섯 번째 인수(Easing)는 애니메이션에 사용할 감속/가속 함수를 정의합니다. 또는 감속/가속 함수를 생성자에 대한 인수 Animation 로 지정할 수 있습니다. 감속/가속 함수에 대한 자세한 내용은 감속/가속 함수를 참조 하세요.
- 여섯 번째 인수(
finished)는 애니메이션이 완료될 때 실행되는 콜백입니다. 이 콜백은 두 개의 인수를 사용합니다. 첫 번째 인수는 최종 값을 나타내고 두 번째 인수는 애니메이션이 취소된 경우 설정된true인수bool입니다. 또는 콜백을finished생성자에 대한 인수 Animation 로 지정할 수 있습니다. 그러나 단일 애니메이션을 사용하여 생성자와 Commit 메서드 모두에서 Animation 콜백을 지정하면finished메서드에 Commit 지정된 콜백만 실행됩니다. - 일곱 번째 인수(
repeat)는 애니메이션을 반복할 수 있는 콜백입니다. 애니메이션의 끝에서 호출되고 반환은true애니메이션을 반복해야 임을 나타냅니다.
위의 예제에서는 감속/가속 함수를 사용하여 Linear 인스턴스의 Image 속성을 2초(2000밀리초)에 걸쳐 1에서 2로 늘리는 Scale 애니메이션을 만드는 것이 전체적인 효과입니다. 애니메이션이 완료 될 때마다 해당 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초(4000밀리초)에 걸쳐 발생한다는 것입니다. 이 속성은 scaleUpAnimation 2초 동안 1에서 2까지 애니메이션 Scale 효과를 집니다. 그런 scaleDownAnimation 다음 2초 동안 2에서 1까지 속성에 애니메이션 효과를 주세요 Scale . 두 배율 애니메이션이 모두 발생하는 rotateAnimation 동안 4초 동안 0에서 360까지 속성에 애니메이션 Rotation 효과를 줍니다. 두 크기 조정 애니메이션 모두 감속/가속 함수를 사용합니다. 감속/가속 함수는 SpringIn 인스턴스가 Image 커지기 전에 처음에 축소되도록 SpringOut 하고, 감속/가속 함수는 Image 전체 애니메이션의 끝부분에 있는 실제 크기보다 작아집니다.
자식 애니메이션을 사용하는 개체와 그렇지 않은 개체 간에 Animation 는 여러 가지 차이점이 있습니다.
- 자식 애니메이션을 사용하는 경우 자식 애니메이션의
finished콜백은 자식이 완료된 시기를 나타내고finished메서드에 Commit 전달된 콜백은 전체 애니메이션이 완료된 시기를 나타냅니다. - 자식 애니메이션을 사용할 때 메서드의
repeat콜백 Commit 에서 반환true해도 애니메이션이 반복되지는 않지만 애니메이션은 새 값 없이 계속 실행됩니다. - 감속/가속 함수를 Commit 메서드에 포함하고 감속/가속 함수가 1보다 큰 값을 반환하면 애니메이션이 종료됩니다. 감속/가속 함수가 0보다 작은 값을 반환하면 값이 0으로 고정됩니다. 0보다 작거나 1보다 큰 값을 반환하는 감속/가속 함수를 사용하려면 메서드가 아닌 Commit 자식 애니메이션 중 하나에 지정해야 합니다.
클래스에는 Animation 부모 Animation 개체에 자식 애니메이션을 추가하는 데 사용할 수 있는 메서드도 포함되어 WithConcurrent 있습니다. 그러나 해당 begin 값과 finish 인수 값은 0에서 1로 제한되지 않지만 0~1 범위에 해당하는 자식 애니메이션의 해당 부분만 활성화됩니다. 예를 들어 메서드 호출이 1에서 6 begin 까지의 속성을 대상으로 Scale 하지만 값이 -2와 finish 3 begin 인 자식 애니메이션을 정의하는 경우 WithConcurrent -2 값은 1 값에 해당 Scale 하고 finish 값 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 = Colors.Black);
결과 애니메이션은 무지개 색을 통해 페이지 배경을 진행하는 모양을 제공합니다.
사용자 지정 애니메이션 확장 메서드 만들기
클래스의 ViewExtensions 확장 메서드는 현재 값에서 지정된 값으로 속성에 애니메이션 효과를 줍니다. 이렇게 하면 한 ColorTo 값에서 다른 값으로 색에 애니메이션 효과를 주는 데 사용할 수 있는 애니메이션 메서드를 만들기가 어렵습니다. 컨트롤의 속성이 다르기 때문입니다 Color. 클래스는 VisualElement 속성을 정의하지만 BackgroundColor 애니메이션 효과를 주려는 속성이 항상 Color 필요한 것은 아닙니다.
이 문제에 대한 해결 방법은 메서드가 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.Red + t * (toColor.Red - fromColor.Red),
fromColor.Green + t * (toColor.Green - fromColor.Green),
fromColor.Blue + t * (toColor.Blue - fromColor.Blue),
fromColor.Alpha + t * (toColor.Alpha - fromColor.Alpha));
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 transform 콜백 메서드인 인수가 필요합니다. 이 콜백에 대한 입력은 항상 double 0에서 1 사이의 범위입니다. 따라서 이 예제 ColorTo 에서 메서드는 0에서 1 사이의 범위가 허용 double 되고 해당 값에 해당하는 값을 반환 Color 하는 자체 변환 Func 을 정의합니다. 이 값은 Color 제공된 두 인수의 Red, Green및 BlueAlpha 값을 보간하여 계산됩니다Color. Color 그런 다음 속성에 적용할 콜백 메서드에 값이 전달됩니다. 이 방법을 사용하면 메서드가 ColorTo 지정된 Color 속성에 애니메이션 효과를 줍니다.
await Task.WhenAll(
label.ColorTo(Colors.Red, Colors.Blue, c => label.TextColor = c, 5000),
label.ColorTo(Colors.Blue, Colors.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(Colors.Blue, Colors.Red, c => boxView.Color = c, 4000);
이 코드 예제에서 메서드는 ColorTo 페이지의 속성 및 BackgroundColor 속성LabelBackgroundColor, 페이지의 속성BoxView에 Color 애니메이션 TextColor 을 적용합니다.
.NET MAUI