--- title: "Path Animations Overview" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "animation [WPF], paths" - "path animations [WPF]" ms.assetid: 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 [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations features. For an introduction to animation features, see the [Animation Overview](animation-overview.md). Because you use a object to define a path animation, you should also be familiar with and the different types of objects. For more information, see the [Geometry Overview](geometry-overview.md). ## What Is a Path Animation? A path animation is a type of that uses a 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 and a to transform an object along a complex path. The following example demonstrates this technique by using the object to animate the property of a . The is applied to a button and causes it to move along a curved path. Because the property is set to `true`, the rectangle rotates along the tangent of the path. [!code-xaml[PathAnimationGallery_snippet#MatrixAnimationUsingPathDoesRotateWithTangentWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_snippet/CS/matrixanimationusingpathdoesrotatewithtangentexample.xaml#matrixanimationusingpathdoesrotatewithtangentwholepage)] [!code-csharp[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathDoesRotateWithTangentWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/CSharp/MatrixAnimationUsingPathDoesRotateWithTangentExample.cs#matrixanimationusingpathdoesrotatewithtangentwholepage)] [!code-vb[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathDoesRotateWithTangentWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/VisualBasic/MatrixAnimationUsingPathDoesRotateWithTangentExample.vb#matrixanimationusingpathdoesrotatewithtangentwholepage)] For more information about the path syntax that is used in the [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example, see the [Path Markup Syntax](path-markup-syntax.md) overview. For the complete sample, see [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations). You can apply a path animation to a property by using a in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] and code, or by using the method in code. You can also use a path animation to create an and apply it to one or more properties. For more information about the different methods for applying animations, see [Property Animation Techniques Overview](property-animation-techniques-overview.md). ## Path Animation Types Because animations generate property values, there are different animation types for different property types. To animate a property that takes a (such as the property of a ), you use an animation that produces values. To animate a property that takes a , you use an animation that produces values, and so on. Path animation classes belong to the namespace and use the following naming convention: *\* `AnimationUsingPath` Where *\* is the type of value that the class animates. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides the following path animation classes. |Property type|Corresponding path animation class|Example| |-------------------|----------------------------------------|-------------| |||[Animate an Object Along a Path (Double Animation)](how-to-animate-an-object-along-a-path-double-animation.md)| |||[Animate an Object Along a Path (Matrix Animation)](how-to-animate-an-object-along-a-path-matrix-animation.md)| |||[Animate an Object Along a Path (Point Animation)](how-to-animate-an-object-along-a-path-point-animation.md)| A generates values from its . When used with a , a can move an object along a path. If you set the property of the to `true`, it also rotates the object along the curves of the path. A generates values from the x- and y-coordinates of its . By using a to animate a property that takes values, you can move an object along a path. A cannot rotate objects. A generates values from its . By setting the property, you can specify whether the uses the x-coordinate, y-coordinate, or angle of the path as its output. You can use a to rotate an object or move it along the x-axis or y-axis. ## Path Animation Input Each path animation class provides a property for specifying its input. The path animation uses the to generate its output values. The class lets you describe multiple complex figures that are composed of arcs, curves, and lines. At the heart of a is a collection of objects; these objects are so named because each figure describes a discrete shape in the . Each consists of one or more objects, each of which describes a segment of the figure. There are many types of segments. |Segment Type|Description| |------------------|-----------------| ||Creates an elliptical arc between two points.| ||Creates a cubic Bezier curve between two points.| ||Creates a line between two points.| ||Creates a series of cubic Bezier curves.| ||Creates a series of lines.| ||Creates a series of quadratic Bezier curves.| ||Creates a quadratic Bezier curve.| The segments in a are combined into a single geometric shape, which uses the end point of a segment as the start point of the next segment. The property of a 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 property to `10,50` and creating a with a property setting of `10,150`. For more information about objects, see the [Geometry Overview](geometry-overview.md). In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you can also use a special abbreviated syntax to set the property of a . For more information, see [Path Markup Syntax](path-markup-syntax.md) overview. For more information about the path syntax that is used in the [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example, see the [Path Markup Syntax](path-markup-syntax.md) overview. ## See also - [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations) - [Path Markup Syntax](path-markup-syntax.md) - [Path Animation How-to Topics](path-animation-how-to-topics.md) - [Animation Overview](animation-overview.md) - [Property Animation Techniques Overview](property-animation-techniques-overview.md)