Simple Animation using MS Expression Blend

In this blog we will we learn “How to Rotate an Ellipse”. To create this project please open a New project in Microsoft Expression Blend. Choose a WPF project with Framework 3.5.

You will get a New Window. Add an Ellipse from the Assets tab on the right >> Shapes to the New Window. After you add ellipse on the form, color the Ellipse with the color you want by selecting the ellipse control first and color from the properties windows. Your ellipse will look like Ellipse below on the Window (Refer the Steps from image to get a clear view).

 

Add a new StoryBoard. A StoryBoard is like a timeline to create animation. To add a StoryBoard click on the Add button which is shown in the image below. After you click on the Add button a dialog appears, asking you the name of the StoryBoard write down name as ‘RotateEllipse’, press OK button.

Now to animate the Ellipse, we will add keyframes. Keyframes are added on a particular time. Select the ellipse from the window and press the button ‘Keyframe’ as labelled in the image below. This keyframe is added to record how ellipse will look at 0 second.

As shown in the image below, click on the ‘Render Transform’ Tab in the transform b0x and set X and Y value to 1.

Now click on 2 sec from timeline (Refer the arrow below).

After clicking on 2 from above click on ‘Keyframe’ again, a new keyframe should be added for 2 second. Again change ‘RenderTransform’ properties change X value to -1. As in the image below.

Now you should have two ‘keyframes’ as in the image below. Click on ‘RotateEllipse’ and from the properties of the Story board, select RepeatBehaviour to ‘Forever’ (refer image below for steps). Now ‘Stop Recording’ the Story board and build the project and run it.

You will get a Rotating Ellipse. I will get back to you soon with more simple animations. Till then Happy Coding