[译]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.

 

这篇随笔是Silverlight系列随笔之一。其主要关注点在于一项使用计时器（Timer）来创建简单动画的技术。紧跟着这篇随笔，我会再额外发表至少一篇有关Silverlight动画的文章。

 

Silverlight有几种内置的技术使控件表现出动画效果。这些技术中大多数都对创建简单动画特别有用。这些动画意味着可以利用眼睛善于捕获运动的特点来修饰一个网页，从而引起读者的注意。在这篇随笔中，我将越过这些修饰性的技术，而展示一下如何使用与在很多游戏中使用的动画技术类似的技术来创建一个简单动画。

 

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.

 

尽管Silverlight是一项Web技术，但我将关注的技术与您在像C++或Dephi这样的标准编程语言中所使用的技术类似。虽然我将关注的动画技术通常被用于游戏编程，但您或许也有很多不同的理由想将其用于创建其他种类的动画，尤其是科学类的编程或者是试图演示复杂的数值数据的代码。

 

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动画的良好开端。然而，我想强调一下，如果您只是想对一个网页稍微润色一下，那么其他的使用Storyboard、DoubleAnimation和PointAnimation的Silverlight技术可能更符合您的需要。通过探索关键帧（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.

 

在这篇随笔所展示的例子中，我将创建两个简单的“小精灵”，并演示一个让它们平滑而快速斜穿过一个网页的动画，正如图1所示，在图1中，带有红色边框的蓝色矩形从绿色场地的接近右上角的位置开始了它的短暂而又辉煌的行程，朝着左下角移动而下。而具有蓝紫渐变颜色的图片则从左上角开始，朝着绿色Canvas控件的右下角斜穿而过。

 

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.

 

图1：两个简单的小精灵斜穿过一块绿色场地

 

下面你能够看到这个程序的真实运行版。因为动画非常短暂，所以你会需要按下刷新按钮来看到它的运行。

 

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:

 

Silverlight脱胎于WPF这一点，使开发者可以做出一种选择，是将他们的逻辑实现在XAML中还是在标准的C#代码中，或者是这两种形式的某种结合。或许因为我的背景是一名C#开发者，所以我倾向于只写少量的XAML代码，而以C#代码形式实现我的大部分逻辑。

 

这个例子的XAML代码非常简单：

<UserControl x:Class="SilverlightAnimatedTimer01.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://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:

 

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

 

UserControl和Grid的代码是当任何Silverlight项目被创建的时候都会由集成开发环境（IDE）生成的样板Silverlight代码。我只添加了三项：

l  一个被命名为myCanvas的Canvas，它有一个叫做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.

 

XAML代码将两个控件都放到了Canvas的左上角，也就是说，在设计模式下，其中一个控件将被隐藏到另外一个的后面。下一小节我展示的C#代码将矩形控件移动到了Canvas的右边，以便它在运行时有一个独立的位置。

 

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:

 

计时器（Timer）

这里展示的这种动画通常基于一个计时器（timer）运行，这个计时器以有规律的间隔调用一种小型程序循环，这种小型程序循环担当引擎来驱动动画向前播放。这个循环在Canvas被加载时启动：

 

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:

 

这段代码是从Silverlight文档中几乎一字不差地摘录下来的。它以创建一个计时器（timer）开始，随后让计时器每10毫秒触发一次。每次计时器被触发，一个叫做MoveShapes的方法就会被调用。

 

这是MoveShapes方法的代码，它每10毫秒就被计时器调用一次：

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.

 

这个方法被传递进两个参数。第一个参数是计时器（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.

 

MoveShapes方法的代码有好几行，但是它的结构却非常简单。我声明了一些值来跟踪图片控件和矩形控件左上角顶点的当前X和Y坐标值。注意，我将rectX字段的值初始化为275.0。这个值也正是在程序启动时矩形控件被移动到Canvas右边的初始位置，以便它不再被隐藏在图片控件之后。无需多说，在这个系列的下一篇文章，我将为每个精灵创建单独的对象。然而在现阶段，我将集中精力用尽可能少的代码向您展示基本的动画技术。

 

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.

 

最后几行代码演示了如何调用矩形控件和图片控件的SetValue方法来移动控件穿过Canvas表面。在这里Silverlight通过自动处理这种转换为我们提供了一个很棒的优秀特性。尤其是，它擦除控件的原有图像然后再在新位置重新绘制图像。在大部分计算机编程语言中，我通常都不得不手工编写代码来擦除原有的图像。

 

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.

 

注意，MoveShapes方法通过增加或减小指定控件位置的字段的值来开始运行的。这允许我们定义怎样移动控件穿过Canvas表面。然而，是对SetValue这个方法的调用实际变换了控件的位置。结果就是产生了这些控件平滑地穿过他们容器表面的动画效果。

 

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 2008的Silverlight集成扩展，正如Silverlight官方网站的入门（Get Started）部分中所描述的一样。

 

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:

 

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.

 

总结

我在这边文章中所叙述的控件动画技术非常易于使用。Silverlight提供了所有我们需要的工具来创建简单动画，而不需要我们这边付出太多努力。因此我们可以把精力集中在简单明了地描述我们想让控件运动的路径。尤其是，你只需：

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文件。