Animating along a path

There is one further method of animating property values in WPF. Using PathFigure and PathSegment objects, we can construct a PathGeometry object and then animate a property value according to the X, Y and/or rotation angle values of the path.

As this method is primarily used for animating objects along a complex path and therefore not aimed at typical business applications, we will cover only the basics of this functionality here. As with the other kinds of animation classes, there are different path animation types that manipulate different CLR types. Path animation classes follow the naming convention <Type>AnimationUsingPath.

Each <Type>AnimationUsingPath class has a PathGeometry property that we can use to specify a path to animate along, using an object of type PathGeometry. In order to take advantage of the ability to animate the path X and Y values in addition to the rotation angle, we need to use a MatrixTransform element. Let's see an example of this:

<TextBlock Margin="100,125" Text="Hello World" FontSize="18"> 
  <TextBlock.RenderTransform> 
    <MatrixTransform x:Name="MatrixTransform"> 
      <MatrixTransform.Matrix> 
        <Matrix /> 
      </MatrixTransform.Matrix> 
    </MatrixTransform> 
  </TextBlock.RenderTransform> 
  <TextBlock.Triggers> 
    <EventTrigger RoutedEvent="TextBlock.Loaded"> 
      <BeginStoryboard> 
        <Storyboard> 
          <MatrixAnimationUsingPath  
            Storyboard.TargetName="MatrixTransform"  
            Storyboard.TargetProperty="Matrix" Duration="0:0:4"  
            RepeatBehavior="Forever" DoesRotateWithTangent="True"> 
            <MatrixAnimationUsingPath.PathGeometry> 
              <PathGeometry> 
                <PathFigure StartPoint="49.99,49.99">
                  <ArcSegment Point="50,50" Size="50,50"  
                    SweepDirection="Clockwise" IsLargeArc="True" /> 
                </PathFigure> 
              </PathGeometry> 
            </MatrixAnimationUsingPath.PathGeometry> 
          </MatrixAnimationUsingPath> 
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </TextBlock.Triggers> 
</TextBlock> 

In this example, we animate a TextBlock element around a circular path using a MatrixAnimationUsingPath element. The circular path is defined by a single ArcSegment element within a single PathFigure element. We set the PathFigure.StartPoint property value to almost match the ArcSegment.Point value so that the two ends of the ellipse meet.

In order to animate the rotation of the text element from the MatrixAnimationUsingPath element, we need to set its DoesRotateWithTangent property to true. If this property was set to false, or simply omitted, then the text element would still be animated in a circular motion, but it would no longer rotate in line with the tangent of the circular path, instead remaining upright.

In addition to the MatrixAnimationUsingPath class, we can also use either of the DoubleAnimationUsingPath or PointAnimationUsingPath classes to animate objects on a path. However, rather than providing examples for these alternative methods, let's now move on to find out how we can include every day animations in our application framework.