C#开发WPFSilverlight动画及游戏系列教程(Game-Tutorial)：(一)让物体动

C#开发WPF/Silverlight动画及游戏系列教程(GameTutorial)：(一)让物体动起来①序：自从QXGame(WPFGAMEENGINE)游戏引擎公布以来，受到很多朋友的热切关注，于是乎有了写教程的想法。那么从今天开始，我将带领大家一步一步的学会如何使用纯C#开发WPF/Silverlight游戏引擎，过程中我会尽量的开源，并对相关小技巧进行解释和介绍，比较复杂的算法原理我会给大家一条绝对可行的思路，至于如何处理这些复杂的算法，那是仁者见仁，智者见智了，或许您写的算法比我的更好呢。多余的话不多说了，最后来句发自肺腑的话吧：本系列教程的书写编辑花费作者很多心血，没有功劳也有苦劳哇，所以请需要转载的朋友们用突出的字体或颜色标明在您的文章开头，您的大力支持是鼓励我不断写下去的动力。前言：WPF/Silverlight矢量动画的描述我就不多说了，关于WPF/Silverlight与Flash的比较网上也是一堆一堆的，这里只想客观的告诉读者下面两点：一、WPF开发的是桌面应用程序，自包括Vista在内以后的Windows系列操作系统均大量以之为主流图形工具，即将全面取代Winform，并且Windows7将集成.NET3.5+框架，在当今Windows系列操作系统占据90%同类市场的现状下，这意味着什么呢？二、Silverlight基于一个约4M左右的MINI型.NET框架，目前版本2.0，3.0的beta英文版，从发展趋势看是绝对有与Flash抗衡并且在未来超越它的可能性。Silverlight的优势更表现在它可以用一切.NET语言例如C#，VB.NET，F#等开发，拓展度与可以参与开发的人群远远高于只能用AS开发的FLASH。转入正题，网上已经有很多关于如何创建WPF/Silverlight动画的教程，但是均为使用Blend工具制作，或直接写在xaml代码内的动画，这样往往造成很多朋友误以为其实WPF/Silverlight不就是MS的Flash？诚然，如果您真的像那些教程里说的去开发WPF/Silverlight程序，我个人觉得一点意义都没有。这样开发出来的东西根本就超越不了Flash，那何苦还要投入如此多的精力来学习它？所以本系列教程将全方位的以纯C#程序语言进行动态创建一切可视化对象，从而构建出一个如QXGame(WPFGAMEENGINE)游戏引擎，这才是我本系列教程希望达到的目的。另外，还有一个Silverlight移植的Demo：（注：本教程使用的开发工具为Visualstudio2008版本sp1）好了，那么我首先介绍第一种动态创建动画的方法，这也是官方推荐的Storyboard动画。该类型动画您可以在网络上查阅相关资料进行了解，这里不累述了，那么我们直接进入主题：首先我们新建一个WPF项目，接下来打开Window1.xaml进入视图代码编辑器，这里我们这样写：Windowx:Class=WpfApplication1.Window1xmlns=:x==WPFGameCanvasx:Name=CarrierWidth=800Height=600Background=SilverMouseLeftButtonDown=Carrier_MouseLeftButtonDown//Window这段代码我创建了一个名叫Carrier的Canvas(画布)容器布局控件，并设置它的尺寸为800*600，背景银色(这里请不要将背景色去掉，否则在Canvas中无内容时，无背景色将影响Fill填充宽高从而无法实现MouseLeftButtonDown点击事件)，最后注册一个鼠标在它上面点击的事件。那么为什么要选择Canvas作为容器呢？因为Canvas可以实现它内部的控件任意的绝对定位，可以很方便的处理物体的移动。界面容器元素布局好了，那么接下来就动态创建物体对象了：Rectanglerect;//创建一个方块作为演示对象publicWindow1(){InitializeComponent();rect=newRectangle();rect.Fill=newSolidColorBrush(Colors.Red);rect.Width=50;rect.Height=50;rect.RadiusX=5;rect.RadiusY=5;Carrier.Children.Add(rect);Canvas.SetLeft(rect,0);Canvas.SetTop(rect,0);}这里我创建了一个50*50象素，圆角5*5红色的方块对象，并且将它作为子控件添加进Carrier中，并且初始化它在Carrier中的位置:Canvas.SetLeft(rect,0);Canvas.SetTop(rect,0);对象准备好了，那么接下来就是实现动画了。我们要实现的是鼠标点哪它就移动到哪：privatevoidCarrier_MouseLeftButtonDown(objectsender,MouseButtonEventArgse){//创建移动动画Pointp=e.GetPosition(Carrier);Storyboardstoryboard=newStoryboard();//创建X轴方向动画DoubleAnimationdoubleAnimation=newDoubleAnimation(Canvas.GetLeft(rect),p.X,newDuration(TimeSpan.FromMilliseconds(500)));Storyboard.SetTarget(doubleAnimation,rect);Storyboard.SetTargetProperty(doubleAnimation,newPropertyPath((Canvas.Left)));storyboard.Children.Add(doubleAnimation);//创建Y轴方向动画doubleAnimation=newDoubleAnimation(Canvas.GetTop(rect),p.Y,newDuration(TimeSpan.FromMilliseconds(500)));Storyboard.SetTarget(doubleAnimation,rect);Storyboard.SetTargetProperty(doubleAnimation,newPropertyPath((Canvas.Top)));storyboard.Children.Add(doubleAnimation);//将动画动态加载进资源内if(!Resources.Contains(rectAnimation)){Resources.Add(rectAnimation,storyboard);}//动画播放storyboard.Begin();}从上面代码我们可以看到，首先获取鼠标点击点相对于Carrier中的坐标位置p，然后创建故事板storyboard和Double类型动画doubleAnimation，doubleAnimation有3个参数，分别代表开始值，结束值，动画经历时间，接着通过Storyboard.SetTarget()和Storyboard.SetTargetProperty()分别设置动画的目标及要修改的动画目标属性，再下来将doubleAnimation添加进storyboard中，这样重复两次分别实现X轴和Y轴方向的动画。当这些处理完后，最后还需要将storyboard添加进Resources资源内，这样程序才能识别（将它去掉也同样可以通过编译，后面章节中才会用到它，这里只是提前做个说明）。一切就绪后，通过代码storyboard.Begin()来开始动画。大家按Ctrl+F5，然后在窗体上随便点点，方块是不是会移动了呢？呵呵。小结：Storyboard动画是基于时间线的矢量动画，它与传统的基于图片轮换形成的动画不同，它的原理是通过时时的改变对象属性而形成的，第一次接触的朋友们可能会觉得比较吃力，但是慢慢体会一下，多练习一下就会渐渐的理解了。下一节我将继续讲解动态创建动画的第二种方法，敬请关注。