XAML animation in Silverlight for Windows Phone 7

A step by step tutorial to create a XAML animation in Silverlight for WP7. Expression Blend is used to draw and create the animation.

1. Draw the path or shape or object to be animated in Expression Blend 4.

2. Create a new storyboard

3. Add keyframes and you can use the direct select tool to manipulate individual vertices of your path or shap at the various keyframes.

You can also use the animation workspace while doing the animation for a larger timeline region.

4. Select the PhoneApplicationPage

5. Go to events

6. Double Click on the loaded event box

7. Add this statement within the loaded event. Ensure that you change <storyboardname> to the name of your storyboard. E.g. birdanimation.Begin();

<storyboardname>.Begin();

8. The animation should now run when the page loads.

I achieved the same effect in Visual Studio 2010 too, its just that its easier to work on the animation in blend.