【IT168 技术】在silverlight 3中，想到一个动态将Rectangle的Fill属性设置为动画每一帧的图形。完全用代码的形式来实现动画。 这里先放出一个原型。
首先准备好素材，我准备做一个4帧的飞机小动画。这个比之前采用storyboard做动画的好处是不用对坐标(一张长的图片做起来太累了)。
图1 四帧小飞机
这个飞机的大小为35*45，所以在舞台上就先放置一个同样大小的Rectangle，(这里只是一个原型的想法，后期可以再封装)为这里Rectangle起名“myShip”。
图2 舞台设置
将素材图片放入项目中
图3 装入素材
下来就是动态的设置Rectangle的Fill属性了.
做过flash开发的朋友对flash中的enterFrame应该很是熟悉了. 在silverlight中作为enterFrame的替代有"CompositionTarget.Rendering"这个事件.
接下来就要从程序集中取出图片赋到Rectangle上了。
其完整代码如下
在这里完善了一下算法，加入了fps的机制进去。
private string[] shippics = new string[] { "Ship1/1.png", "Ship1/2.png", "Ship1/3.png", "Ship1/4.png" };
protected DateTime lastTick;
protected TimeSpan elapsed;
private double lasrFrameTime = 0;
private int currentFrame = 0;
private double fps = 15;
public MainPage()
{
InitializeComponent();
lastTick = DateTime.Now;
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
DateTime now = DateTime.Now;
elapsed = now - lastTick;
lastTick = DateTime.Now;
lasrFrameTime += elapsed.TotalSeconds;
if (lasrFrameTime >( 1 / fps))
{
lasrFrameTime = 0;
currentFrame++;
currentFrame %= shippics.Length;
RenderShip();
}
}
private void RenderShip()
{
var imageBrush = new ImageBrush();
imageBrush.Stretch = Stretch.None;
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Top;
imageBrush.ImageSource = new BitmapImage(new Uri("/slShipAnimate;component/" + shippics[currentFrame], UriKind.Relative));
myShip.Fill = imageBrush;
}
protected DateTime lastTick;
protected TimeSpan elapsed;
private double lasrFrameTime = 0;
private int currentFrame = 0;
private double fps = 15;
public MainPage()
{
InitializeComponent();
lastTick = DateTime.Now;
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}
void CompositionTarget_Rendering(object sender, EventArgs e)
{
DateTime now = DateTime.Now;
elapsed = now - lastTick;
lastTick = DateTime.Now;
lasrFrameTime += elapsed.TotalSeconds;
if (lasrFrameTime >( 1 / fps))
{
lasrFrameTime = 0;
currentFrame++;
currentFrame %= shippics.Length;
RenderShip();
}
}
private void RenderShip()
{
var imageBrush = new ImageBrush();
imageBrush.Stretch = Stretch.None;
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Top;
imageBrush.ImageSource = new BitmapImage(new Uri("/slShipAnimate;component/" + shippics[currentFrame], UriKind.Relative));
myShip.Fill = imageBrush;
}
这里把代码归纳整理，做了一些封装，动画全部的又代码进行创建，脱离了Blend这个工具。这样对于做游戏时在动画的控制管理方面会更加的方便一些。
整个项目结构如下，关键的代码封装到了Core下
图4 关键代码封装到Core
创建动画的方式就很简单了，可以再做一个管理类，我这里就简单的加一个
图5 添加管理类
