Windows Phone 7, Animations Part I

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

Most of us the developers didn’t know how to create graphically nice applications. and by nice i don’t mean good looking and using themes and skins but i mean animations and some objects animations, My self included!

It was very difficult to create graphically nice animations that utilizes the GPU and ensures smooth animations so we found our selves trying to learn OpenGL/ES or any other SDKs like Fluid or SilverMoon which all are complicated enough and can waste a lot of time learning them.

Luckily, this is all from the past now. The new Windows phone 7 is now based on Silverlight, which is built to give the developers the ability to create great graphics and animations with ease.

Let’s get to work and see how to animate these objects on these devices. Ready, Set, Go!

You will need Visual Studio 2010 Express for Windows Phone which is free for download from http://developer.windowsphone.com

Start a new Project,

In the MainPage.xaml we will need few controls, so start by dropping an Image, 3 Sliders and change the Orientation property of one of them to Vertical as below.

Set the Maximum and Minimum of the Sliders to 360 and 0 respectively and we are done from the layout, all we have to do now is to Animate the Image when a Slider changes it’s value. We have Axis 3 ways to animate objects in 3D. X, Y and Z. the three of them are the same in implementation, the only difference is how the projection is going to happen and what is the final result.

We have one important object which is PlaneProjection object, the role of this object is to make these transformations. You can declare the projection object in 2 ways, either from the Code directly or from the Xaml file. I tend to use the Xaml file way as the Projection object will be bound to our image and will live throughout our demo. Go ahead and put the following code inside the image tags

This will define the Projection object of the image named Projector, we will need to use this object in our code.

Next, Click on the Top Slider and register to the ValueChanged Event. When this slider value is changed we want to rotate (project) our image over the Z Axis which is simple rotation if you want.

Now what we need to do is to specify the location where the Phone will rotate the image, in our case we want it to be rotated right from the Center. The property CenterOfRotationZ is NOT a point on the image, it is a relative “percentage” of the image. The value of this property varies from 0 (Zero) to 0.9. Then we want to set the RotationZ property of the Projector to the value of our slider. Code Below.

PlaneProjection pp = (PlaneProjection)image1.Projection; // Casting the Projection to PlaneProjection
pp.CenterOfRotationZ = 0.5;
pp.RotationZ = slider1.Value;

This will result in rotating the image right from the center n degrees depending on the slider value as the image below.

Same Applies to the other Axis (X and Y)

Register to the second horizontal slider, and put the following code in

PlaneProjection pp = (PlaneProjection)image1.Projection; // Casting the Projection to PlaneProjection
pp.CenterOfRotationY = 0.9;
pp.RotationY = slider1.Value;

For the CenterOfRotationY, instead of the default 0.5 value i set it to 0.9 which is the right end of the image, this will result in the following animation.

And the Vertical Slider with the following code

PlaneProjection pp = (PlaneProjection)image1.Projection; // Casting the Projection to PlaneProjection
pp.CenterOfRotationY = 0.5;
pp.RotationY = slider1.Value;

so we get this

Notice that the 3 sliders work together, go ahead and play with it a bit.

Next we will see how to programmatically animate objects.