[C#/WPF] PointAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ PointAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다.

▶ 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">
        <Path
            Margin="15 15 15 15"
            Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="10 100"
                    RadiusX="15"
                    RadiusY="15" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimationUsingPath
                                Storyboard.TargetName="ellipseGeometry"
                                Storyboard.TargetProperty="Center"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </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">

<Path

Margin="15 15 15 15"

Fill="Blue">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="10 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

<Path.Triggers>

<PointAnimationUsingPath

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<PointAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</PointAnimationUsingPath.PathGeometry>

</PointAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Canvas>

</Window>

TestProject.zip