How to: Animate an Object Along a Path (Point Animation)
.NET Framework 3.5
This example shows how to use a PointAnimationUsingPath object to animate a Point along a curved path.
The following example moves an EllipseGeometry along a path defined by a PathGeometry. The ellipse geometry's Center property, which takes a Point value, specifies its position; to move the ellipse geometry, you animate its Center property. The example uses a PointAnimationUsingPath to animate the EllipseGeometry object's Center property.
<Page xmlns="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"> <Canvas Width="400" Height="400"> <Path Fill="Blue" Margin="15,15,15,15"> <Path.Data> <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The Center property is animated, causing the Ellipse to animate across the screen--> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="10,100" RadiusX="15" RadiusY="15" /> </Path.Data> <Path.Triggers> <EventTrigger RoutedEvent="Path.Loaded"> <BeginStoryboard Name="MyBeginStoryboard"> <Storyboard> <!-- Animates the ellipse along the path. --> <PointAnimationUsingPath Storyboard.TargetName="MyAnimatedEllipseGeometry" Storyboard.TargetProperty="Center" Duration="0:0:5" RepeatBehavior="Forever" > <PointAnimationUsingPath.PathGeometry> <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" PresentationOptions:Freeze="True" /> </PointAnimationUsingPath.PathGeometry> </PointAnimationUsingPath> </Storyboard> </BeginStoryboard> </EventTrigger> </Path.Triggers> </Path> </Canvas> </Page>
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Navigation; using System.Windows.Shapes; namespace SDKSample { public class PointAnimationUsingPathExample : Page { public PointAnimationUsingPathExample() { // Create a NameScope for the page so that // we can use Storyboards. NameScope.SetNameScope(this, new NameScope()); // Create the EllipseGeometry to animate. EllipseGeometry animatedEllipseGeometry = new EllipseGeometry(new Point(10, 100), 15, 15); // Register the EllipseGeometry's name with // the page so that it can be targeted by a // storyboard. this.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry); // Create a Path element to display the geometry. Path ellipsePath = new Path(); ellipsePath.Data = animatedEllipseGeometry; ellipsePath.Fill = Brushes.Blue; ellipsePath.Margin = new Thickness(15); // Create a Canvas to contain ellipsePath // and add it to the page. Canvas mainPanel = new Canvas(); mainPanel.Width = 400; mainPanel.Height = 400; mainPanel.Children.Add(ellipsePath); this.Content = mainPanel; // Create the animation path. PathGeometry animationPath = new PathGeometry(); PathFigure pFigure = new PathFigure(); pFigure.StartPoint = new Point(10, 100); PolyBezierSegment pBezierSegment = new PolyBezierSegment(); pBezierSegment.Points.Add(new Point(35, 0)); pBezierSegment.Points.Add(new Point(135, 0)); pBezierSegment.Points.Add(new Point(160, 100)); pBezierSegment.Points.Add(new Point(180, 190)); pBezierSegment.Points.Add(new Point(285, 200)); pBezierSegment.Points.Add(new Point(310, 100)); pFigure.Segments.Add(pBezierSegment); animationPath.Figures.Add(pFigure); // Freeze the PathGeometry for performance benefits. animationPath.Freeze(); // Create a PointAnimationgUsingPath to move // the EllipseGeometry along the animation path. PointAnimationUsingPath centerPointAnimation = new PointAnimationUsingPath(); centerPointAnimation.PathGeometry = animationPath; centerPointAnimation.Duration = TimeSpan.FromSeconds(5); centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever; // Set the animation to target the Center property // of the EllipseGeometry named "AnimatedEllipseGeometry". Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry"); Storyboard.SetTargetProperty(centerPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty)); // Create a Storyboard to contain and apply the animation. Storyboard pathAnimationStoryboard = new Storyboard(); pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever; pathAnimationStoryboard.AutoReverse = true; pathAnimationStoryboard.Children.Add(centerPointAnimation); // Start the Storyboard when ellipsePath is loaded. ellipsePath.Loaded += delegate(object sender, RoutedEventArgs e) { // Start the storyboard. pathAnimationStoryboard.Begin(this); }; } } }
For the complete sample, see Path Animation Sample.
The code version of the preceding sample used a Storyboard to animate the EllipseGeometry, even though only one animation was applied. A Storyboard is often the easiest way to apply multiple animations because these animations can be controlled by the same Storyboard. However, an easier way to apply a single animation to a property when using code is to use the BeginAnimation method. For an example, see How to: Animate a Property Without Using a Storyboard.
