Share via

Silverlight Simple Animation

  • Article

This post is one of series on Silverlight. In this article the focus is on a technique that uses a timer to produce simple animations. I will follow this post with at least one additional article on Silverlight animation.

Silverlight has several built in techniques for animating controls. Many of these technologies are particularly useful for creating simple animations meant to decorate a web page with eye catching movement that draws the reader’s attention. In this post I will skip over these decorative technologies, and instead show how to create a simple animation using a technique similar to those used in many games.

Though Silverlight is a web technology, the technique I will focus on is very similar to the same technology you would use in most standard programming languages such as C++ or Delphi. Though the animation technology I will focus on is often used in game programming, there are many different reasons why you might want to create this kind animation, particular in scientific programming, or code that attempts to illustrate complex numeric data.

You will find that Silverlight makes the type of animation I want to focus on very simple. As such, it makes a good place to start an exploration of Silverlight animation. I want to emphasize, however, that there are other Silverlight techniques that use Storyboards and the DoubleAnimation and PointAnimation controls that might be more appropriate if you just want to add a bit of color to a web page. You can add a bit more complexity to those technologies by exploring key frames. See, for instance, the DoubleAnimationUsingKeyFrames control.

In the example shown in this post I will create two simple “sprites” that I will animate by moving them smoothly and rapidly at an angle across a web page, as shown in Figure 1. In Figure 1, the blue Rectangle with the red border started its brief but illustrious career near the upper right corner of the green field, and is moving down toward the bottom left corner. The purple and blue gradient image started at the upper left corner and is moving at an angle toward the bottom right of the green Canvas control.

Figure01

Figure 1: Two simple sprites moving at angles across a green field.

Below you can see a live version of this application. Because the animation is quite brief, you will need to press the refresh button to see it in action.

The sprites in this example move smoothly and at a reasonable pace across the green surface. This is very important, as users frequently denigrate applications that have jerky or overly slow animations.

In the next post in this series I will show how to get more control over the sprites, and how to get them to “bounce” off the edges of a window so that they stay confined in a defined space, such as the green field shown here.

Creating the XAML

Silverlight’s reliance on WPF frequently leaves developers with a choice between implementing their logic in XAML or in standard C# code, or in some combination of the two. Perhaps because my background is a C# developer, I tend to write only a minimal amount of XAML, and to implement most of my logic in C# code.

The XAML for this example is extremely simple:

 <UserControl x:Class="SilverlightAnimatedTimer01.Page"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">            
        
        <Canvas Background="Green" Name="myCanvas" Loaded="StartTimer">
            <Rectangle Fill="Blue" Stroke="Red" StrokeThickness="5" 
                       Width="25" Height="25"  Name="myRect" />
            
            <Image Source="Images/MrBlue.png" Name="myImage" />
        </Canvas>
    </Grid>
</UserControl>

The code for the UserControl and the Grid is boilerplate Silverlight code produced by the IDE when any new Silverlight project is created. I’ve added only three items:

  • A Canvas called myCanvas which has an event called StartTimer that is called when the Canvas is first loaded
  • A blue and red Rectangle control that is 25 pixels square
  • An Image control which is also 25 pixels square. It is referenced inside the program as myImage

The XAML puts both controls in the upper left corner of the Canvas, which means that in design mode one will be hidden behind the other. The C# code I show in the next section moves the Rectangle off to the right of the Canvas, so that it has a unique location at run time.

The Timer

Animations of the kind shown here are usually run off a timer which produces a kind of miniature application loop that is called at regular intervals and which acts as engine to drive the animation forward. The loop is started when the Canvas is loaded:

 private void StartTimer(object sender, RoutedEventArgs e)
{
    System.Windows.Threading.DispatcherTimer myDispatcherTimer = 
        new System.Windows.Threading.DispatcherTimer();
    // Call the timer once every 10 milliseconds
    myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 10); 
    myDispatcherTimer.Tick += new EventHandler(MoveShapes);
    myDispatcherTimer.Start();
}

This code is pulled nearly verbatim from the Silverlight documentation. It begins by creating a timer, then asks that the timer be fired once every ten milliseconds. A method called MoveShapes will be called whenever the timer is fired. Finally the code Starts the timer.

Here is the MoveShapes method, which is called by the timer once every ten milliseconds:

 Double imageX = 0.0;
Double imageY = 0.0;
Double rectX = 275.0;
Double rectY = 1.0;
Double incValue = 1.0;


 public void MoveShapes(object o, EventArgs sender)
{
    imageX += incValue;
    imageY += incValue;
    rectX -= incValue;
    rectY += incValue;            

    myRect.SetValue(Canvas.LeftProperty, rectX);
    myRect.SetValue(Canvas.TopProperty, rectY);

    myImage.SetValue(Canvas.LeftProperty, imageX);
    myImage.SetValue(Canvas.TopProperty, imageY);
}

This method is passed two parameters. The first is copy of the timer. You can use this object to disable or change the traits of the timer.

This code in the MoveShapes covers several lines, but its structure is very simple. I’ve declared values to track the current X and Y location of the upper left hand corner of the Image and Rectangle controls. Note that I initialize the rectX field to 275.0. It is this value that moves the Rectangle control over to he right of the Canvas at program start up, so that it is no longer hidden behind Image control. Needless to say, in the next article in this series I will create separate objects for each sprite. At this stage however, I’m focusing on showing you the basic animation techniques in the least possible amount of code.

The last lines show how to call the SetValue method of the Rectangle and Image control in order to move the control across the surface of the Canvas. Silverlight provides us with a nice bonus feature here by automatically handling this transformation. In particular, it erases the original image of the control and then repaints it in the new location. In most computer languages, I would have had to manually write the code to erase the old image.

Note that the MoveShapes method begins by incrementing or decrementing the fields that specify the location of the controls. This allows us to define how we move the controls across the surface of the Canvas. It is, however, the call to SetValue that actually transforms the location of the controls. The end result is a smooth animation of the controls across the surface of their container.

The best way to see this animation in action is to download the code and try it yourself. Remember that you need to first install the Silverlight integration for Visual Studio 2008, as described in the Get Started section of the Silverlight web site.

Summary

The technique for animating controls that I’ve described in this article is very easy to use. Silverlight provides all the tools we need to set up simple animation without requiring any real effort on our part. As a result we can focus our energy on simply describing the path that we want our controls to follow. In particular, you need only:

  • Set up a timer that calls a method you define at discreet intervals.
  • Define the method called by the timer, and ensure that it contains logic for moving your controls.

As mentioned above, I’ll follow this post with at least one additional article that describes additional techniques for animating sprites. Those techniques require us to write a bit more code than that shown here, but at heart they are also very simple and easy to understand.

kick it on DotNetKicks.com

Comments

  • Anonymous
    April 14, 2009
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    April 14, 2009
    The comment has been removed

  • Anonymous
    April 15, 2009
    Thank you for submitting this cool story - Trackback from DotNetShoutout

  • Anonymous
    April 15, 2009
    I’ve known Charlie for a long time…Who knew he’d be teaching Silverlight animation? ;-) Thanks Charlie

  • Anonymous
    April 16, 2009
    Ross, I haven't tried to build a control like that yet, so I don't have any specific recommendations. However, I do have two thoughts:

  1. I've seen controls like this in various Silverlight apps, and they seem to me to work smoothly. So what you are trying to do is feasible.
  2. I would imagine that third parties have already created controls like the one's you discuss. It is almost always many times easier and less expensive to go to a third party and buy these controls, rather than build one yourself. You should focus your energy on creating the new, original parts of your app, rather than on building relatively common tools that others have already created.
  • Charlie

  • Anonymous
    April 16, 2009
    Hi Charlie, Thanks for the response.  I had the same thought regarding 3rd party controls, and certainly I have more than enough to do beside the menus, but haven't managed to find what I am looking for.   The problem is that most of the 3rd party controls I found seem to fall into 2 categories, either LOB style controls or cartoonish / Mac looking controls.  My client is looking for a very specific minimalistic / aesthetic effect. I have a few 3rd party controls yet to evaluate, and I am hoping that I can skin them to change the default appearance.  eg supply my own controltemplate or style to achieve the look I am after.

  • Anonymous
    April 19, 2009
    This is the second part in a series of posts on Silverlight. So far, I’ve added the following posts to

  • Anonymous
    April 19, 2009
    This is the third part in a series of posts on Silverlight. In this post covers creating an interface

  • Anonymous
    April 21, 2009
    Ross, The UX is a bit different than what you describe (I think), but you may get some implementation hints looking at the CoolMenu control in SilverlightContrib on CodePlex.  Source code is available.   http://silverlightcontrib.codeplex.com/Wiki/View.aspx?title=Feature%20Overview&ANCHOR#CoolMenuControl

  • Anonymous
    April 22, 2009
    In the previous post in this series, you learned how to create a simple animation with Silverlight. The

  • Anonymous
    May 19, 2009
    Ross, You should be able to reskin those 3rd party controls to look anyway you want, as long as they behave the way you want (that's sort of the main selling point of Silverlight/WPF :-> ).

  • Anonymous
    June 04, 2009
    本文介绍了如何使用计时器来产生简单动画效果。这是系列文章的第一篇。