Your first Animation using XAML and Silverlight - Point Animation class: Part III

Bechir Bejaoui
Sep 04, 2014
21.4k
0
0
Article

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">

<!--Don't confuse with System.IO.Path class

this one is System.Windows.Shapes.Path witch

is responsible to draw curves-->

<Path.Data>

<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-->

<!-- 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!!!