Share via

AnimationBehavior

  • 아티클

Behavior 연결된 AnimationBehavior 모든 VisualElement 항목에 애니메이션 효과를 주는 기능을 제공하는 것입니다. 기본적으로 A TapGestureRecognizer 는 연결 VisualElement 되고 해당 인식기가 사용자가 탭하거나 클릭한 것을 감지할 때 연결된 애니메이션을 VisualElement트리거합니다.

속성을 AnimationType 설정해야 하며, 이에 대한 가능한 옵션은 애니메이션에서 찾을 수 있습니다.

Important

동작을 공유하고 스타일을 통해 여러 컨트롤에 적용할 수 있으므로 .NET MAUI 커뮤니티 도구 키트 동작은 동작을 설정 BindingContext 하지 않습니다. 자세한 내용은 .NET MAUI 동작을 참조 하세요.

구문

다음 예제에서는 a에 LabelFadeAnimation 추가하고 AnimationBehavior 불투명도 변경에 애니메이션 효과를 적용하는 방법을 보여 줍니다.

XAML

XAML 네임스페이스 포함

XAML에서 도구 키트를 사용하려면 페이지 또는 보기에 다음 xmlns 을 추가해야 합니다.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

따라서 다음을 수행합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

다음과 같이 포함 xmlns 하도록 수정됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

AnimationBehavior 사용

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.AnimationBehaviorPage"
    x:Name="Page">

    <Label Text="Click this Label">
        <Label.Behaviors>
            <toolkit:AnimationBehavior>
                <toolkit:AnimationBehavior.AnimationType>
                    <toolkit:FadeAnimation Opacity="0.5" />
                </toolkit:AnimationBehavior.AnimationType>
            </toolkit:AnimationBehavior>
        </Label.Behaviors>
    </Label>

</ContentPage>

C#

AnimationBehavior C#에서 다음과 같이 사용할 수 있습니다.

class AnimationBehaviorPage : ContentPage
{
    public AnimationBehaviorPage()
    {
        var label = new Label
        {
            Text = "Click this Label"
        };

        var animationBehavior = new AnimationBehavior
        {
            AnimationType = new FadeAnimation
            {
                Opacity = 0.5
            }
        };

        label.Behaviors.Add(animationBehavior);

        Content = label;
    }
}

C# 태그

이 CommunityToolkit.Maui.Markup 패키지는 C#에서 이를 Behavior 사용하는 훨씬 더 간결한 방법을 제공합니다.

using CommunityToolkit.Maui.Markup;

class AnimationBehaviorPage : ContentPage
{
    public AnimationBehaviorPage()
    {
        Content = new Label()
            .Text("Click this label")
            .Behaviors(new AnimationBehavior
            {
                AnimationType = new FadeAnimation
                {
                    Opacity = 0.5
                }
            });
    }
}

다음 스크린샷은 Android의 결과 AnimationBehavior를 보여줍니다. Android의 AnimationBehavior 스크린샷

추가 예제

사용자 상호 작용 처리

AnimationBehavior 탭에 응답 하 고 사용자가 클릭, 동작에 속성을 통해이 상호 작용을 Command 처리할 수 있습니다.

다음 예제에서는 뷰 모델의 속성에 속성을 연결 AnimationBehaviorImage 하고 바인딩 Command 하는 방법을 보여 있습니다.

보기

<Image Source="thumbs-up.png">
    <Image.Behaviors>
        <toolkit:AnimationBehavior Command="{Binding ThumbsUpCommand}">
            <toolkit:AnimationBehavior.AnimationType>
                <toolkit:FadeAnimation />
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Image.Behaviors>
</Image>

뷰 모델


public ICommand ThumbsUpCommand { get; }

public MyViewModel()
{
    ThumbsUpCommand = new Command(() => OnThumbsUp())
}

public void OnThumbsUp()
{
    // perform the thumbs up logic.
}

프로그래밍 방식으로 애니메이션 트리거

프로그래밍 AnimationBehavior 방식으로 애니메이션을 트리거하는 기능을 제공합니다. AnimateCommand 연결된 애니메이션 형식을 트리거하기 위해 실행할 수 있습니다.

다음 예제에서는 뷰 모델에 추가하고 AnimationBehaviorEntry, 바인딩 AnimatedCommand 한 다음, 뷰 모델에서 명령을 실행하는 방법을 보여줍니다.

보기

<Entry Placeholder="First name (Required)"
       Text="{Binding FirstName}">
    <Entry.Behaviors>
        <toolkit:AnimationBehavior AnimateCommand="{Binding TriggerAnimationCommand}">
            <toolkit:AnimationBehavior.AnimationType>
                <toolkit:FadeAnimation />
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Entry.Behaviors>
</Entry>

뷰 모델

private string firstName;

public string FirstName
{
    get => firstName;
    set => SetProperty(ref firstName, value);
}

public ICommand TriggerAnimationCommand { get; set; }

public void Save()
{
    if (string.IsNullOrEmpty(FirstName))
    {
        TriggerAnimationCommand.Execute(CancellationToken.None);
        return;
    }

    // save code.
}

참고 항목

이 속성은 AnimateCommand 읽기 전용이며 바인딩 모드 BindingMode.OneWayToSource를 예상합니다. 또한 뷰 모델(TriggerAnimationCommand 위 예제)의 명령 속성에 값을 할당할 필요가 없습니다. 이는 바인딩에서 만든 AnimationBehavior값에서 속성에 값을 할당하기 때문입니다.

이렇게 하면 보기 모델 내에서 애니메이션을 트리거할 수 있습니다.

컨트롤 이벤트에서 애니메이션 트리거

는 AnimationBehavior .와 동일한 기본 기능을 EventToCommandBehavior제공합니다. 속성을 사용하면 EventName 제공된 이름과 일치하는 이벤트가 발생할 때 연결된 애니메이션 형식을 트리거할 수 있습니다.

다음 예제 애니메이션 구현 사용:

class SampleScaleToAnimation : BaseAnimation
{
    public double Scale { get; set; }

    public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}

다음 예제에서는 두 개의 AnimationBehavior 인스턴스를 할당하는 Entry방법을 보여 줍니다. 하나는 중요 이벤트가 발생할 때 애니메이션을 트리거하고 다른 인스턴스는 할당되지 않은 이벤트가 발생할 때 다른 애니메이션을 트리거하는 방법을 보여 줍니다.

<Entry Placeholder="Animate on Focused and Unfocused">
    <Entry.Behaviors>
        <toolkit:AnimationBehavior EventName="Focused">
            <toolkit:AnimationBehavior.AnimationType>
                <behaviorPages:SampleScaleToAnimation 
                    Easing="{x:Static Easing.Linear}"
                    Length="100"
                    Scale="1.05"/>
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>

        <toolkit:AnimationBehavior EventName="Unfocused">
            <toolkit:AnimationBehavior.AnimationType>
                <behaviorPages:SampleScaleToAnimation 
                    Easing="{x:Static Easing.Linear}"
                    Length="100"
                    Scale="1"/>
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Entry.Behaviors>
</Entry>

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 이 동작의 예를 찾을 수 있습니다.

API

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 AnimationBehavior 소스 코드를 찾을 수 있습니다.