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

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.

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#代码形式实现我的大部分逻辑。

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

<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

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

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.

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:

private void StartTimer(object sender, RoutedEventArgs e)
{
// 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.

MoveShapes方法的代码有好几行，但是它的结构却非常简单。我声明了一些值来跟踪图片控件和矩形控件左上角顶点的当前XY坐标值。注意，我将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.

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:

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.

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