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

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