Animate an Object Along a Path - wpf

Question

I strted to play around with shapes in wpf, I need the following: I have an image and I draw some shape, I want the the image would walk on the lines of this shape.
I mean like:
For example with the shape:
<Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="100,50" IsClosed="True">
<LineSegment Point="140,60"/>
<LineSegment Point="150,100"/>
<LineSegment Point="125,120"/>
<LineSegment Point="90,110"/>
<LineSegment Point="80,80"/>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
And here is the moving image:
<UserControl ...
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" ..>
<UserControl.Resources>
<PathGeometry x:Key="AnimationPath"
Figures="M 10,100 C 40,0 300,0 300,300 0,300 285,200 300,300 "
PresentationOptions:Freeze="True" />
</UserControl.Resources>
<Image
Source="/Resources/Myimage.png"
Width="200" >
<Image.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<!-- Animates the rectangle horizotally along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource AnimationPath}"
Source="X"
Duration="0:0:5"
AutoReverse="True"
/>
<!-- Animates the rectangle vertically along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource AnimationPath}"
Source="Y"
Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Related links: link1, link2
I have tried like:
Figures="M 10,100 C 100,50 140,60 150,100 125,120 90,110 80,80 "
i.e start at point 100,50 --> 140,60 and so on...
but it doesnt go exactly on this path

Answer 1

Your sketch seems to indicate that you want to animate kind of a red arrow along the path, including a rotation to the tangent angle of the current path segment.
You could achieve this by animating the Matrix property of a MatrixTransform with a MatrixAnimationUsingPath. The example below uses an additional TranslateTransform to center the image. As there is a DrawingImage in the Source property of the Image element, you may as well use another Path instead of an Image.
<Window.Resources>
<PathGeometry x:Key="AnimationPath"
Figures="M100,50 L140,60 150,100 125,120 90,110 80,80Z"/>
</Window.Resources>
<Canvas>
<Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod"
Data="{StaticResource AnimationPath}"/>
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Geometry="M0,0 L10,8 0,16">
<GeometryDrawing.Pen>
<Pen Thickness="3" Brush="Red"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform X="-5" Y="-8"/>
<MatrixTransform x:Name="AnimatedTransform"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<MatrixAnimationUsingPath
Storyboard.TargetName="AnimatedTransform"
Storyboard.TargetProperty="Matrix"
Duration="0:0:5"
DoesRotateWithTangent="True"
PathGeometry="{StaticResource AnimationPath}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>