Creating Killer Animations in Code - Page 1
       by kirupa  |  17 October 2009

In Silverlight and WPF, there are several ways you can create animations. One way that has been covered before on this site involves creating a storyboard and using Expression Blend to visually create your animation. This approach is great for majority of all animations you would ever want to create. There are exceptions where this solution doesn't work as well as you would like.

Animations that are more random or will have a certain degree of variability don't fit well inside the box defined by Storyboards. For example, here is an example of an animation where the circles move around a centerpoint with a random speed each time you refresh the page:

[ the circles...they are spinning! ]

Something similar to what you see above works best when created in code, and this tutorial will show you one way of going about doing that.

Drawing a Circle
Before we write some code and perform other acts of magic, we first need to create a new project and draw a circle. The following steps will help you to do that:

1. First, go ahead and launch Expression Blend and create a new Silverlight 3 Application + Website project. Give your application any name you want as well.
    
   If you don't have Expression Blend or Silverlight installed, jump over to my Getting Started page to get up and running.

2. Once your project has been created, you will see a blank design surface where you can draw and do all kinds of things. What we want to do is first draw a circle. From the Tools panel (usually found on the left), click on the Shapes menu (usually defined by a rectangle) and select the Ellipse tool:

[ expand the Shapes menu to select the Ellipse ]

3. Once you have selected the Ellipse tool, your Tools menu will display the Ellipse tool by default instead of the Rectangle you had earlier. Simply double click on the Ellipse tool to insert a circle into your design surface.

[ insert an Ellipse - by default, it will be a circle ]

4. The circle that you just inserted probably doesn't look very pretty, so feel free to make some tweaks as you wish using the properties found in the Propeties Panel's Brushes category:

[ my circle is blue and partially transparent ]

5. At the very least, make sure your circle is a blue-ish color so that it is visible and kinda matches the screenshots. As you can tell from the screenshot of my Brushes category, I made my circle a light blue with a 50% opacity and no Stroke. The final result is as follows:

[ what my circle looks like ]

Ok, now that our circle is finished, an important first step has been completed. The next step is to make our circle into something that can store some code, and we'll look at the savory details on the next page.

Onwards to the next page!

1 | 2 | 3 | 4 | 5