[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : 경로를 따라 버튼 움직이기

■ MatrixAnimationUsingPath 엘리먼트를 사용해 경로를 따라 버튼을 움직이는 애니메이션을 만드는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="버튼">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix >
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                DoesRotateWithTangent="True"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 150 C 35 50 135 50 160 150 180 240 285 250 310 150"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="버튼">

<Button.RenderTransform>

<MatrixTransform.Matrix >

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

DoesRotateWithTangent="True"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 150 C 35 50 135 50 160 150 180 240 285 250 310 150"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip