The following example uses three DoubleAnimationUsingPath objects to move a rectangle along a geometric path.
The first DoubleAnimationUsingPath animates a RotateTransform that is applied to the rectangle. The animation generates angle values. It makes the rectangle rotate (pivot) along the contours of the path.
The other two objects animate the X and Y values of a TranslateTransform that is applied to the rectangle. They make the rectangle move horizontally and vertically along the path.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions">
<Page.Resources>
<!-- This is the geometry creates the animation path. Because
this example uses it multiple times, it's declared as a resource and
frozen to improve performance. -->
<PathGeometry x:Key="AnimationPath"
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</Page.Resources>
<Canvas Width="400" Height="400">
<!-- The object to animate. -->
<Rectangle
Width="30" Height="30" Fill="Blue">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="AnimatedRotateTransform" />
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" AutoReverse="True" >
<!-- Generates angle values (in degrees) from
the path. This animation is used to
rotate the rectangle. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
PathGeometry="{StaticResource AnimationPath}"
Source="Angle"
Duration="0:0:5" />
<!-- Generates horizontal offset values from
the path. This animation is used to
animate the rectangle horizontally. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource AnimationPath}"
Source="X"
Duration="0:0:5" />
<!-- Generates vertical offset values from
the path. This animation is used to move
the rectangle vertically. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource AnimationPath}"
Source="Y"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Page>
Another way to rotate an object by using a geometric path is to use a MatrixAnimationUsingPath object and set its DoesRotateWithTangent property to true. For more information and an example, see How to: Rotate an Object by Using a Geometric Path (Matrix Animation).
For the complete sample, see Path Animation Sample.