[译]Charlie Calvert: Silverlight Simple Animation

原作者:Charlie Calvert
原文地址: http://blogs.msdn.com/charlie/archive/2009/04/14/silverlight-simple-animation.aspx


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.


您会发现Silverlight使我想关注的那种动画类型实现起来很简单。因此,这是一个探索Silverlight动画的良好开端。然而,我想强调一下,如果您只是想对一个网页稍微润色一下,那么其他的使用StoryboardDoubleAnimationPointAnimationSilverlight技术可能更符合您的需要。通过探索关键帧(Key Frame)的使用,您能够为这些技术再增加一点复杂度。您可以以DoubleAnimationUsingKeyFrames控制为例参考一下关键帧的使用。


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.




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.






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"
    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" />

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:


l  A Canvas called myCanvas which has an event called StartTimer that is called when the Canvas is first loaded

l  A blue and red Rectangle control that is 25 pixels square

l  An Image control which is also 25 pixels square. It is referenced inside the program as myImage



l  一个被命名为myCanvasCanvas,它有一个叫做StartTimer的事件处理方法,这个方法将在Canvas被第一次加载时调用。

l  一个25像素大小、红色边框、蓝色背景的正方形的矩形控件。

l  一个同样25像素大小的正方形的图片控件,它在程序中以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);

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.


查看这段代码的实际动画效果最好的方式是您下载代码并亲自试试。记住,您首先需要安装Visual Studio 2008Silverlight集成扩展,正如Silverlight官方网站的入门(Get Started)部分中所描述的一样。



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:


l  Set up a timer that calls a method you define at discreet intervals.

l  Define the method called by the timer, and ensure that it contains logic for moving your controls.




l  设置一个计时器,以谨慎设定的时间间隔调用您预先定义的一个方法。

l  实现被计时器调用的那个方法,确保它包含移动你的控件的逻辑。


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.


Download the SilverlightAnimatedTimer01.zip file containing the sample code from the LINQ Farm.




可以从LINQ Farm上下载包含示例代码SilverlightAnimatedTimer01.zip文件。

posted on 2009-06-05 15:55  零度的火  阅读(510)  评论(0编辑  收藏  举报