Анимация пути

Еще один вид анимаций - это анимация пути (path-based animation). Она также анимирует определенное свойство. Ее особенность в том, что для анимации свойства используется объект PathGeometry.

Анимации пути представлены тремя классами: DoubleAnimationUsingPath, MatrixAnimationUsingPath, PointAnimationUsingPath.

Каждый объект анимации с помощью свойства PathGeometry устанавливает ссылку на объект PathGeometry, а свойство Source получает или задает аспект объекта анимации PathGeometry, определяющий ее выходное значение.

Особенно полезны такие анимации при позиционировании объекта в окне приложения:

<Window x:Class="AnimationApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AnimationApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="300">
    <Window.Resources>
        <PathGeometry x:Key="geometryPath">
            <PathFigure IsClosed="True" StartPoint="10, 10">
                <PolyLineSegment Points="220,10 220,175 10,175" />
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Canvas Background="Black">
        <Path Stroke="Red" Data="{StaticResource geometryPath}" Canvas.Top="10" Canvas.Left="10" />
        <Ellipse Width="15" Height="15" Canvas.Top="177" Canvas.Left="120">
            <Ellipse.Fill>
                <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.3, 0.3">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Black" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
  Duration="0:0:5" RepeatBehavior="Forever"
  PathGeometry="{StaticResource geometryPath}" Source="Y" >
                            </DoubleAnimationUsingPath>
                            <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
  Duration="0:0:5" RepeatBehavior="Forever"
  PathGeometry="{StaticResource geometryPath}" Source="X" >
                            </DoubleAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>
</Window>

При запуске мы увидим, как небольшой шарик бегает по прямоугольному контуру:

Здесь одна из применяемых анимаций имеет следующую форму:

<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
        Duration="0:0:5" RepeatBehavior="Forever"
        PathGeometry="{StaticResource geometryPath}" Source="X" >

В данном случае анимация применяется к свойству Canvas.Left объекта Ellipse. Длится 5 секунд и бесконечно повторяется.

PathGeometry устанавливает ссылку на ресурс, а атрибут Source указывает, что для нового значения свойства Canvas.Left будет использоваться параметр X (координата по оси X) у точек, которые составляют PathGeometry.