[.NET MAUI] CommunityToolkit.Maui - AnimationBehavior

AnimationBehavior 를 이용하면 각 컨트롤 특정 이벤트에 Animation 처리를 할수 있습니다.

먼저 사용할 Animation 을 정의합니다. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using CommunityToolkit.Maui.Animations;

namespace Maui.ToolKitMaui.Animations
{
    class SampleScaleAnimation : BaseAnimation
    {
        public override async Task Animate(VisualElement view)
        {
            await view.ScaleTo(1.2, Length, Easing);
            await view.ScaleTo(1, Length, Easing);
        }
    }
}

XAML 단에서는 Toolkit 과 위 Animation 을 정의한 곳을 정의합니다.

    xmlns:animations="clr-namespace:Maui.ToolKitMaui.Animations"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Button 클릭시 확대되었다 줄어드는 Animation 을 처리한 내용입니다.

            <Button Text="Animate Button">
                <Button.Behaviors>
                    <mct:AnimationBehavior EventName="Clicked">
                        <mct:AnimationBehavior.AnimationType>
                            <animations:SampleScaleAnimation 
                            Easing="{x:Static Easing.Linear}"
                            Length="100"/>
                        </mct:AnimationBehavior.AnimationType>
                    </mct:AnimationBehavior>
                </Button.Behaviors>
            </Button>

실행결과

 

아래 처럼하면 Fade Animation 이 적용됩니다. (FadeAnimation 은 Toolkit 에 포함되어 있음)

            <Frame
                Margin="16,0"
                Padding="0"
                BackgroundColor="SkyBlue"
                HeightRequest="50">
                <Frame.Behaviors>
                    <mct:AnimationBehavior Command="{Binding AnimationCommand}">
                        <mct:AnimationBehavior.AnimationType>
                            <mct:FadeAnimation Opacity="0.2" />
                        </mct:AnimationBehavior.AnimationType>
                    </mct:AnimationBehavior>
                </Frame.Behaviors>
                <Label
                    HorizontalOptions="Center"
                    Text="Fade Frame"
                    VerticalOptions="Center" />
            </Frame>

실행결과

 

 

[Source]
https://github.com/kei-soft/KJunBlog/tree/master/Maui.ToolKitMaui