Animations in Windows Phone using Blend


In many Windows Phone apps i have seen cool animations which makes that app more colorful. for all WP Developers who wonder how to do that kinda animations, here is a simple guide to make your own animations.

Basically other than Visual Studio you need Blend to do the animation part.after you create the Windows Phone app save it and open the project with Blend. In Blend there are two types of workplaces, Design and Animation. To create any animation you need to select Animation workplace ( Windows -> Workplaces -> Animation )

Animation Workplace

Animation Workplace

In the Animations Workplace the ‘Objects and Timeline’ is the main part which is necessary for the animations. In ‘Objects and Timeline’ by pressing ‘+’ you can add a new timeline.

Adding Storyboard

Adding Storyboard timeline

It is necessary that keep in mind the name of the storyboard timeline that you add for later use. now with that you can see timeline recording is on, now we can add objects and make the the animation the way we want.

Animation

Animation

above image shows how it will look when your creating your animation.in my project the animation which i have done is moving a rectangle from one place to another. after your done with your animation, you need to stop the time line recording.

Recording Off

Recording Off

now your animation is created. now you need to call the name of the storyboard timeline from C# code, then the animation will work. for my project i’m calling the name of the storyboard for a button click. following is the C# code

Code

C# code

In the above code ‘ Testing ‘ is my name of the storyboard timeline. now every time the button is pressed my animation will start working.

so now you know how to make a animation for your Windows phone app. now you can make great animation with some practice and your wild imagination.

Happy Coding! 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s