Windows Phone 7, Animations Part II

923 views	Print This Post
	(1 votes, average: 5.00 out of 5)  Loading ...

Previously in Part I of this article, you saw how to rotate objects over multiple axis. However, this approach only allows the user to see the end result. Here in the second part we will discuss how to make the objects on screen to animate and give the application user a smile.

What we need to understand is that we have multiple objects required to animate an object on the screen. It might seem complicated first but it will be really simple as you read on.

PlaneProjection

This object, as we have seen before, is responsible for rotating any object on the screen. RotationX, RotationY and RotationZ are the properties that are required to change dynamically in order to achieve animations. Adding it in a loop will not help, we need other way to do it.

DoubleAnimation

This is the object that is responsible for changing a property inside our PlaneProjection Object. There are multiple properties that we need to assign to get smooth and nice animations.

From, This property specifies that our RotationX, RotationY Or RotationZ will start from this Angle. Setting it to Zero will make the animation start from the normal position

To, This one specifies the end angle of the Rotation, setting it to 360 will make the object rotates until it reaches its initial place.

Duration, is the time between the beginning and the end of the animation. This property determines the speed of the animation. The smaller the value is, the faster the animation will be.

RepeatBehavior, Determines how many times this Animation will be repeated. it can Vary from 1 time to Forever.

StoryBoard

This object is responsible for creating your animation timeline, think of it as a master object which will control everything. Inside this object we will add all the DoubleAnimation objects as children and we can animate all of them at once.

Putting All things together

So, after all that talk, let’s do some demo. It is not complicated at all, what we will need is an object on the screen and then we will jump into the code.

Add a new Textbox to your application and keep the name textBox1 then add a new button with the name button1.

In the click event of the button, subscribe to the event Click.

What we need to do is to create an instance of all these objects we stated above.

PlaneProjection ppText = new PlaneProjection();
DoubleAnimation daTextRotateY = new DoubleAnimation
{
From = 0,
To = 360,
Duration = TimeSpan.FromSeconds(3)
};
Storyboard sbTextRotate = new Storyboard();

This will make our textbox rotate over the Y axis (vertical line from top center to the bottom center) a full rotation within 3 seconds.

Now we have to connect the objects together. simple!

textBox1.Projection = ppText;
Storyboard.SetTarget(daTextRotateY, ppText);
Storyboard.SetTargetProperty(daTextRotateY, new PropertyPath("RotationY"));
sbTextRotate.Children.Add(daTextRotateY);
sbTextRotate.Begin();

now let me explain it a bit.

the first line, we are setting the textBox projection property to our PlaneProjection object. now they are connected (as it is by reference not value) so when we change a property of the ppText, it will affect the textBox.

The second one is setting the Target of of the DoubleAnimation object. Meaning we are letting the DoubleAnimation Object know which is the object that it should change it’s property. In our case it is the PlaneProjection (ppText).

The Third line let’s the DoubleAnimation object know which specific property it have to change in our previously assigned object (ppText) in this case it is the RotationY property.

The Fourth and fifth ones are simply adding the DoubleAnimation object to our storyboard and then start it.

So to achieve a single Axis animation, we need to do the following

1. Create our objects.
2. Let our UI Element (the control which will be animated) Projection property be assigned to our PlaneProjection object
3. Let our DoubleAnimation object know the PlaneProjection instance it is going to target.
4. Let our DoubleAnimation object know the Exact Property that it is going to target inside our PlaneProjection object we specified earlier.
5. Add the DoubleAnimation to our StoryBoard.
6. Start the animation.

So, after connecting these pieces together, if you run your application and click the button, it will rotate once.

Inside the double animation, set the RepeatBehavior property to any number in order to repeat this animation this number of times or set it to RepeatBehavior.Forever to make it rotate forever.

I hope you find this helpful, Next we will make the UI Element perform multiple animations together at the same time. So wait for Part III.