[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] StartAnimationActivity 엘리먼트 : Animation 속성을 사용해 애니메이션 시작하기

■ StartAnimationActivity 엘리먼트의 Animation 속성을 사용해 애니메이션을 시작하는 방법을 보여준다.

※ 이 예제 코드에서 사용된 StartAnimationActivity 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animation="using:CommunityToolkit.WinUI.Animations"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Spacing="30">
        <Button Name="startButton"
            HorizontalAlignment="Center"
            Padding="10"
            Content="Start">
            <animation:Explicit.Animations>
                <animation:AnimationSet x:Name="sequentialAnimation"
                    IsSequential="True">
                    <animation:AnimationScope>
                        <animation:ScaleAnimation
                            From="1"
                            To="1.2" />
                        <animation:TranslationAnimation
                            From="-20,0,0"
                            To="0" />
                        <animation:OpacityAnimation
                            From="0"
                            To="1 "/>
                    </animation:AnimationScope>
                    <animation:StartAnimationActivity Animation="{x:Bind anotherAnimation}" />
                    <animation:ScaleAnimation To="1" />
                </animation:AnimationSet>
            </animation:Explicit.Animations>
        </Button>
        <Rectangle
            Width="120"
            Height="120"
            Fill="Green">
            <animation:Explicit.Animations>
                <animation:AnimationSet x:Name="anotherAnimation">
                    <animation:TranslationAnimation
                        Duration="00:00:01"
                        From="0"
                        To="0">
                        <animation:Vector3KeyFrame Key="0.3" Value="-20,0,0" />
                        <animation:Vector3KeyFrame Key="0.6" Value=" 20,0,0" />
                    </animation:TranslationAnimation>
                </animation:AnimationSet>
            </animation:Explicit.Animations>
        </Rectangle>
    </StackPanel>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:animation="using:CommunityToolkit.WinUI.Animations"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="30">

<Button Name="startButton"

HorizontalAlignment="Center"

Padding="10"

Content="Start">

<animation:Explicit.Animations>

<animation:AnimationSet x:Name="sequentialAnimation"

IsSequential="True">

<animation:AnimationScope>

<animation:ScaleAnimation

From="1"

To="1.2" />

<animation:TranslationAnimation

From="-20,0,0"

To="0" />

<animation:OpacityAnimation

From="0"

To="1 "/>

</animation:AnimationScope>

<animation:StartAnimationActivity Animation="{x:Bind anotherAnimation}" />

<animation:ScaleAnimation To="1" />

</animation:AnimationSet>

</animation:Explicit.Animations>

</Button>

<Rectangle

Width="120"

Height="120"

Fill="Green">

<animation:Explicit.Animations>

<animation:AnimationSet x:Name="anotherAnimation">

<animation:TranslationAnimation

Duration="00:00:01"

From="0"

To="0">

<animation:Vector3KeyFrame Key="0.3" Value="-20,0,0" />

<animation:Vector3KeyFrame Key="0.6" Value=" 20,0,0" />

</animation:TranslationAnimation>

</animation:AnimationSet>

</animation:Explicit.Animations>

</Rectangle>

</StackPanel>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.startButton.Click += startButton_Click;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 버튼 클릭시 처리하기 - startButton_Click(sender, e)

    /// <summary>
    /// 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void startButton_Click(object sender, RoutedEventArgs e)
    {
        this.sequentialAnimation.StartAsync();
    }

    #endregion
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.startButton.Click += startButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 버튼 클릭시 처리하기 - startButton_Click(sender, e)

/// <summary>

/// 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void startButton_Click(object sender, RoutedEventArgs e)

{

this.sequentialAnimation.StartAsync();

}

#endregion

}

TestProject.zip