Prerequisites

To understand this topic, you should be familiar with WPF animations features. For an introduction to animation features, see the Animation Overview.

Because you use a PathGeometry object to define a path animation, you should also be familiar with PathGeometry and the different types of PathSegment objects. For more information, see the Geometry Overview.

What Is a Path Animation?

A path animation is a type of AnimationTimeline that uses a PathGeometry as its input. Instead of setting a From, To, or By property (as you do for a From/To/By animation) or using key frames (as you use for a key-frame animation), you define a geometric path and use it to set the PathGeometry property of the path animation. As the path animation progresses, it reads the x, y, and angle information from the path and uses that information to generate its output.

Path animations are very useful for animating an object along a complex path. One way to move an object along a path is to use a MatrixTransform and a MatrixAnimationUsingPath to transform an object along a complex path. The following example demonstrates this technique by using the MatrixAnimationUsingPath object to animate the Matrix property of a MatrixTransform. The MatrixTransform is applied to a button and causes it to move along a curved path. Because the DoesRotateWithTangent property is set to true, the rectangle rotates along the tangent of the path.

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="PresentationOptions"Margin="20"><CanvasWidth="400"Height="400"><!-- The Button that is animated across the screen by animating
the MatrixTransform applied to the button. --><ButtonMinWidth="100"Content="A Button"><Button.RenderTransform><MatrixTransformx:Name="ButtonMatrixTransform"><MatrixTransform.Matrix><Matrix/></MatrixTransform.Matrix></MatrixTransform></Button.RenderTransform><Button.Triggers><EventTriggerRoutedEvent="Button.Loaded"><BeginStoryboard><Storyboard><MatrixAnimationUsingPathStoryboard.TargetName="ButtonMatrixTransform"Storyboard.TargetProperty="Matrix"DoesRotateWithTangent="True"Duration="0:0:5"RepeatBehavior="Forever"><MatrixAnimationUsingPath.PathGeometry><PathGeometryFigures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"PresentationOptions:Freeze="True"/></MatrixAnimationUsingPath.PathGeometry></MatrixAnimationUsingPath></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button></Canvas></Page>

Path Animation Types

Because animations generate property values, there are different animation types for different property types. To animate a property that takes a Double (such as the X property of a TranslateTransform), you use an animation that produces Double values. To animate a property that takes a Point, you use an animation that produces Point values, and so on.

A MatrixAnimationUsingPath generates Matrix values from its PathGeometry. When used with a MatrixTransform, a MatrixAnimationUsingPath can move an object along a path. If you set the DoesRotateWithTangent property of the MatrixAnimationUsingPath to true, it also rotates the object along the curves of the path.

A PointAnimationUsingPath generates Point values from the x- and y-coordinates of its PathGeometry. By using a PointAnimationUsingPath to animate a property that takes Point values, you can move an object along a path. A PointAnimationUsingPath cannot rotate objects.

A DoubleAnimationUsingPath generates Double values from its PathGeometry. By setting the Source property, you can specify whether the DoubleAnimationUsingPath uses the x-coordinate, y-coordinate, or angle of the path as its output. You can use a DoubleAnimationUsingPath to rotate an object or move it along the x-axis or y-axis.

Path Animation Input

Each path animation class provides a PathGeometry property for specifying its input. The path animation uses the PathGeometry to generate its output values. The PathGeometry class lets you describe multiple complex figures that are composed of arcs, curves, and lines.

At the heart of a PathGeometry is a collection of PathFigure objects; these objects are so named because each figure describes a discrete shape in the PathGeometry. Each PathFigure consists of one or more PathSegment objects, each of which describes a segment of the figure.

The segments in a PathFigure are combined into a single geometric shape, which uses the end point of a segment as the start point of the next segment. The StartPoint property of a PathFigure specifies the point from which the first segment is drawn. Each subsequent segment starts at the end point of the previous segment. For example, a vertical line from 10,50 to 10,150 can be defined by setting the StartPoint property to 10,50 and creating a LineSegment with a Point property setting of 10,150.