Animate an Object Along a Path

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>