docs-desktop/dotnet-desktop-guide/framework/wpf/graphics-multimedia/path-animations-overview.md

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid

title	ms.date	dev_langs	helpviewer_keywords	ms.assetid
Path Animations Overview	03/30/2017	csharp vb	animation [WPF], paths path animations [WPF]	979c732c-df74-47a6-be96-8e07b3707d53

Path Animations Overview

This topic introduces path animations, which enable you to use a geometric path to generate output values. Path animations are useful for moving and rotating objects along complex paths.

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 xref:System.Windows.Media.PathGeometry object to define a path animation, you should also be familiar with xref:System.Windows.Media.PathGeometry and the different types of xref:System.Windows.Media.PathSegment objects. For more information, see the Geometry Overview.

What Is a Path Animation?

A path animation is a type of xref:System.Windows.Media.Animation.AnimationTimeline that uses a xref:System.Windows.Media.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 xref:System.Windows.Media.MatrixTransform and a xref:System.Windows.Media.Animation.MatrixAnimationUsingPath to transform an object along a complex path. The following example demonstrates this technique by using the xref:System.Windows.Media.Animation.MatrixAnimationUsingPath object to animate the xref:System.Windows.Media.MatrixTransform.Matrix%2A property of a xref:System.Windows.Media.MatrixTransform. The xref:System.Windows.Media.MatrixTransform is applied to a button and causes it to move along a curved path. Because the xref:System.Windows.Media.Animation.MatrixAnimationUsingPath.DoesRotateWithTangent%2A property is set to true, the rectangle rotates along the tangent of the path.

[!code-xamlPathAnimationGallery_snippet#MatrixAnimationUsingPathDoesRotateWithTangentWholePage]

[!code-csharpPathAnimationGallery_procedural_snip#MatrixAnimationUsingPathDoesRotateWithTangentWholePage] [!code-vbPathAnimationGallery_procedural_snip#MatrixAnimationUsingPathDoesRotateWithTangentWholePage]

For more information about the path syntax that is used in the XAML example, see the Path Markup Syntax overview. For the complete sample, see Path Animation Sample.

You can apply a path animation to a property by using a xref:System.Windows.Media.Animation.Storyboard in XAML and code, or by using the xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A method in code. You can also use a path animation to create an xref:System.Windows.Media.Animation.AnimationClock and apply it to one or more properties. For more information about the different methods for applying animations, see Property Animation Techniques Overview.

Path Animation Types

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

Path animation classes belong to the xref:System.Windows.Media.Animation namespace and use the following naming convention:

<Type> AnimationUsingPath

Where <Type> is the type of value that the class animates.

WPF provides the following path animation classes.

Property type	Corresponding path animation class	Example
xref:System.Double	xref:System.Windows.Media.Animation.DoubleAnimationUsingPath	Animate an Object Along a Path (Double Animation)
xref:System.Windows.Media.Matrix	xref:System.Windows.Media.Animation.MatrixAnimationUsingPath	Animate an Object Along a Path (Matrix Animation)
xref:System.Windows.Point	xref:System.Windows.Media.Animation.PointAnimationUsingPath	Animate an Object Along a Path (Point Animation)

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

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

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

Path Animation Input

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

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

There are many types of segments.

Segment Type	Description
xref:System.Windows.Media.ArcSegment	Creates an elliptical arc between two points.
xref:System.Windows.Media.BezierSegment	Creates a cubic Bezier curve between two points.
xref:System.Windows.Media.LineSegment	Creates a line between two points.
xref:System.Windows.Media.PolyBezierSegment	Creates a series of cubic Bezier curves.
xref:System.Windows.Media.PolyLineSegment	Creates a series of lines.
xref:System.Windows.Media.PolyQuadraticBezierSegment	Creates a series of quadratic Bezier curves.
xref:System.Windows.Media.QuadraticBezierSegment	Creates a quadratic Bezier curve.

The segments in a xref:System.Windows.Media.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 xref:System.Windows.Media.PathFigure.StartPoint%2A property of a xref:System.Windows.Media.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 xref:System.Windows.Media.PathFigure.StartPoint%2A property to 10,50 and creating a xref:System.Windows.Media.LineSegment with a xref:System.Windows.Media.LineSegment.Point%2A property setting of 10,150.

For more information about xref:System.Windows.Media.PathGeometry objects, see the Geometry Overview.

In XAML, you can also use a special abbreviated syntax to set the xref:System.Windows.Media.PathGeometry.Figures%2A property of a xref:System.Windows.Media.PathGeometry. For more information, see Path Markup Syntax overview.

For more information about the path syntax that is used in the XAML example, see the Path Markup Syntax overview.

See also

• Path Animation Sample
• Path Markup Syntax
• Path Animation How-to Topics
• Animation Overview
• Property Animation Techniques Overview