I the previous articles Your first animations using XAML and Silverlight - Color animation: Part I and Your first animations using XAML and Silverlight- Double animation: Part II, we discovered how to deal with ColorAnimation and DoubleAnimation classes. In this one we will show how to deal with PointAnimation class to perform a linear interpolation movement between two points of a given object. As a first step, we will perform this with xaml then we will do the same animation using the C# code.
If you have already developed Adobe Flash projects like me, you will observe that this kind of animation class helps to perform the same task as a given linear interpolation movement done with flash.
Ok, let's consider an ellipse that moves from a point to another as mentioned within this bellow presentation:
Figure 1
To perform this, I propose this xaml and C# code:
XAML Code:
<Window x:Class="myWpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="400" Width="400" Loaded="Window_Loaded">
<!--I used canvas this once as container to host child element -->
<Canvas>
<!--Don't confuse with System.IO.Path class
this one is System.Windows.Shapes.Path witch
is responsible to draw curves-->
<Path Fill="Beige" Margin="0,0,200,200">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="200,110" RadiusX="150" RadiusY="100" />
</Path.Data>
<Path.Triggers>
<!--The Loaded event of the path class will
trigger the point aniamtion-->
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<!-- Animate the Center property so that the ellipse animates from
one point on the screen to another. -->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:8" From="200,110" To="200,290" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Window>
In the xaml code editor copy and paste the above code instead of the existing code, then run the project and observe.
C# code:
To perform this task using C#, open a new WPF application and then add this code to the C# code editor, for instance, don't forget to include the both namespaces System.Windows.Media.Animation and System.Windows.Shapes if they aren't included yet.
//The shape container
Canvas myCanvas;
//The curve
Path myPath;
//The shape form
EllipseGeometry myEllipseGeometry;
//The PointAnimation instance
PointAnimation oPointAnimation;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
//Instantiate the canvas container
myCanvas = new Canvas();
//Instantiate the curve
myPath = new Path();
//The the fill color as beige
myPath.Fill = Brushes.Beige;
//Set the shape volume
myPath.Margin = new Thickness(0, 0, 200, 200);
/* instantiate the ellipse shape, you can make use of the ellipse
* class directly instead of using ellipse geometry and path classes
to draw an ellipse*/
myEllipseGeometry = new EllipseGeometry(new Point(200, 110), 150, 100);
//Set the path data to the given ellipse geometry
myPath.Data = myEllipseGeometry;
//Add the path to the canvas container
myCanvas.Children.Add(myPath);
//Finally, add the container to the form
this.AddChild(myCanvas);
myPath.Loaded+=new RoutedEventHandler(myPath_Loaded);
}
private void myPath_Loaded(object sender, RoutedEventArgs e)
{
oPointAnimation = new PointAnimation();
oPointAnimation.From = new Point(200, 110);
oPointAnimation.To = new Point(200, 290);
oPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
oPointAnimation.Duration = TimeSpan.FromSeconds(8);
myEllipseGeometry.BeginAnimation(EllipseGeometry.CenterProperty,oPointAnimation);
}
Now run the project and you will remark the same behaviour as the first. You can combine animations, I mean double animation, color animation and point animation to build a complex one.
Good Dotneting!!!