[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] TranslationAnimation 엘리먼트 : KeyFrames 속성에서 Vector3KeyFrame 엘리먼트 사용하기

■ TranslationAnimation 엘리먼트의 KeyFrames 속성에서 Vector3KeyFrame 엘리먼트를 사용하는 방법을 보여준다.

※ 비주얼 스튜디오에서 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:mxic="using:Microsoft.Xaml.Interactions.Core"
    xmlns:mxi="using:Microsoft.Xaml.Interactivity"
    xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"
    xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Spacing="30">
        <Button Name="startButton"
            HorizontalAlignment="Center"
            Padding="10"
            Content="Start">
            <ctwa:Explicit.Animations>
                <ctwa:AnimationSet x:Name="animationSet1"
                    IsSequential="True">
                    <ctwa:AnimationScope>
                        <ctwa:ScaleAnimation
                            From="1"
                            To="1.2" />
                        <ctwa:TranslationAnimation
                            From="-20,0,0"
                            To="0" />
                        <ctwa:OpacityAnimation
                            From="0"
                            To="1 "/>
                    </ctwa:AnimationScope>
                    <ctwa:StartAnimationActivity Animation="{x:Bind animationSet2}" />
                    <ctwa:ScaleAnimation To="1" />
                </ctwa:AnimationSet>
            </ctwa:Explicit.Animations>
            <mxi:Interaction.Behaviors>
                <mxic:EventTriggerBehavior EventName="Click">
                    <mxic:ChangePropertyAction
                        TargetObject="{Binding ElementName=textBlock}"
                        PropertyName="Foreground"
                        Value="White" />
                    <ctwb:StartAnimationAction Animation="{Binding ElementName=animationSet1}" />
                </mxic:EventTriggerBehavior>
            </mxi:Interaction.Behaviors>
        </Button>
        <Rectangle
            Width="120"
            Height="120"
            Fill="Green">
            <ctwa:Explicit.Animations>
                <ctwa:AnimationSet x:Name="animationSet2">
                    <ctwa:TranslationAnimation
                        Duration="00:00:01"
                        From="0"
                        To="0">
                        <ctwa:TranslationAnimation.KeyFrames>
                            <ctwa:Vector3KeyFrame Key="0.3" Value="-20,0,0" />
                            <ctwa:Vector3KeyFrame Key="0.6" Value=" 20,0,0" />
                        </ctwa:TranslationAnimation.KeyFrames>
                    </ctwa:TranslationAnimation>
                </ctwa:AnimationSet>
            </ctwa: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:mxic="using:Microsoft.Xaml.Interactions.Core"

xmlns:mxi="using:Microsoft.Xaml.Interactivity"

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

xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="30">

<Button Name="startButton"

HorizontalAlignment="Center"

Padding="10"

Content="Start">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet1"

IsSequential="True">

<ctwa:AnimationScope>

<ctwa:ScaleAnimation

From="1"

To="1.2" />

<ctwa:TranslationAnimation

From="-20,0,0"

To="0" />

<ctwa:OpacityAnimation

From="0"

To="1 "/>

</ctwa:AnimationScope>

<ctwa:StartAnimationActivity Animation="{x:Bind animationSet2}" />

<ctwa:ScaleAnimation To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=animationSet1}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

<Rectangle

Width="120"

Height="120"

Fill="Green">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet2">

<ctwa:TranslationAnimation

Duration="00:00:01"

From="0"

To="0">

<ctwa:TranslationAnimation.KeyFrames>

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

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

</ctwa:TranslationAnimation.KeyFrames>

</ctwa:TranslationAnimation>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Rectangle>

</StackPanel>

</Page>

TestProject.zip