Blog
Windows 8 Using XAML: Using the PointAnimation Class
By Ken Getz | February 15, 2013
Much like the animation class we discussed in a previous article, the PointAnimation class allows you to animate a property that represents a point. For this example, AnimatePoint.xaml, uses a Path element whose Path.Data element contains an EllipseGeometry element. But using this technique, ratherthan using an Ellipse object, the markup can specify a Center property for the path which is a point:
<Path Fill="Green" Stroke="Black" StrokeThickness="2"Margin="0,0,200,200"><Path.Data> <EllipseGeometry x:Name="circle"Center="100,100"RadiusX="50"RadiusY="50" /></Path.Data></Path>The parent Canvas.Resources element contains the following markup:
<Storyboard x:Name="demoStoryboard"><PointAnimation EnableDependentAnimation="True"Storyboard.TargetProperty="Center"Storyboard.TargetName="circle"Duration="0:0:3"From="100,100"To="300,300"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard>This animation moves the shape from its start location (100, 100) to its endinglocation (300, 300) over the course of three seconds. The Figure below shows the moving ball, diagonally bouncing back and forth across the application's window. Note that the animation goes back and forth, and repeats forever-those are artifacts of the AutoReverse and RepeatBehavior properties of the animation, which you'll learn about soon.
Figure 1. It's hard to tell, but the circle is moving!
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
