Programming WPF, 2nd Edition

Path Animations

A path animation lets you animate an object so that its position follows a path defined by a PathGeometry. This is often a more convenient way of defining the motion of an object than using keyframe animations.

DoubleAnimationUsingPath, MatrixAnimationUsingPath, and PointAnimationUsingPath are the three path animation types. As their names suggest, they can target properties of type Double, Matrix, and Point, respectively.

PointAnimationUsingPath is the most straightforward type. It targets a property of type Point, and it will move the location of that point along the path described by the animation's PathGeometry property. Example 16-29 shows this technique being used to animate one end of a LineGeometry.

Example 16-29. Point path animation

<Path Stroke="Black" StrokeThickness="4">
  <Path.Data>
    <LineGeometry StartPoint="50,50" EndPoint="0,0" />
  </Path.Data>
  <Path.Triggers>
    <EventTrigger RoutedEvent="Path.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimationUsingPath AutoReverse="True"
                RepeatBehavior="Forever" Duration="0:0:2"
                Storyboard.TargetProperty="(Path.Data).(LineGeometry.EndPoint)">
            <PointAnimationUsingPath.PathGeometry>
              <PathGeometry Figures="M 14.64,14.64 A 50,50 90, 0 1 85.36,14.64" />
            </PointAnimationUsingPath.PathGeometry>
         </PointAnimationUsingPath>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Path.Triggers>
</Path>

The PathGeometry describing the animation path contains a single elliptical arc segment. This sweeps out a 90 degree angle, and ...