Define Path animations in WPF and explain briefly?

Answer 1

Path animation can be used to move an object on a canvas by changing its position. This can be done by setting the Canvas.Left and Canvas.Top properties. Since these properties are of type double, we can use DoubleAnimationUsingPath to animate the object.

Following is the code which uses a path animation to move an ellipse on an elliptical path.

<Canvas>
    <Canvas.Resources>
        <PathGeometry x:Key="MyGeometry" 
          Figures="M 0,30 A 30,30 180 0 1 60,30 30,30 180 0 1 0,30"/>
    </Canvas.Resources>
    <Ellipse Width="50" Height="50" Fill="Green">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimationUsingPath Source="X" 
                          Storyboard.TargetProperty="(Canvas.Left)" 
                          PathGeometry="{StaticResource MyGeometry}"/>
                        <DoubleAnimationUsingPath Source="Y" 
                          Storyboard.TargetProperty="(Canvas.Top)" 
                          PathGeometry="{StaticResource MyGeometry}"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>

The above code creates a PathGeometry object as a canvas resource. Then it uses the PathGeometry attribute of DoubleAnimationUsingPath to change the position of the ellipse on the path. To understand the syntax of PathGeometry,