Silverlight4.0 应用demo1 飞驰汽车动画

      前一阵装好了VS2010 beta2 和Silverlight4.0，做了一个汽车运动的动画，先来个效果图(有图有真相):

     演示地址: http://xingjunli.webs.com/SilverlightCar.html
      下面分解一下我动画设计的过程：
      1、搭建SL4.0开发环境(我的安装顺序如下):
          1.1、window7 + IIS安装(参考 在windows 7下安装和设置IIS 发布Silverlight站点)
          1.2、安装:dotNetFx40_Full_x86
          1.3、安装:VS2010B2Pro
          1.4、安装:Silverlight4_Tools
          1.5、安装:Blend_Trial_en
          1.6、安装:Silverlight
     2、创建Silverlight项目目录结构如下:

       2.1:、我将整个动画分解为三个元件(UCWheel（轮子）、UCar（汽车），UCMainBg（背景及斑马线）)，

       2.2、在主场景MainPage中引入上面创建的元件组合成一个完整动画；

     3、创建轮子旋转动画:

       3.1、点击如上图Objects and Timeline 面板中的"+"创建一个时间线动画

       3.2、在故事面板中选中Image图片，应用PlaneProjection.RotationZ（参考MSDN:PlaneProjection.RotationZ 属性 ） 属性(分别在时间线0秒和0.8秒处设置属性值0和360)让轮子绕Z轴圆心旋转起来(为保证轮子绕着圆心旋转，我们需要设置image属性： RenderTransformOrigin="0.5,0.5",) ;

       3.3、代码如下:

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightCar.UControl { public partial class UCWheel : UserControl { public UCWheel() { InitializeComponent(); this.Loaded += new RoutedEventHandler(UCWheel_Loaded); } void UCWheel_Loaded(object sender, RoutedEventArgs e) { sbRun.Begin(); } } }

     4、创建汽车动画（引用轮子旋转用户控件）：

     4.1、在UCCar中导入汽车车身图片；

     4.2、轮子动画有了汽车动画就很简单了，展开控件面板，找到UCWheel用户控件，向汽车动画控件（UCCar）引入两个（一个前轮，一个后轮），调整其位置，和大小就OK了；

     4.3、在引用非SL官方标准控件时，会在XAML中引入控件命名空间如“xmlns:local="clr-namespace:SilverlightCar.UControl"”，在XAML中通过“”这样的方式引入或者创建用户控件;

     4.4、汽车动画代码如下：

     5、创建背景动画（全景图、斑马线动画）：

        有了一些Blend设计础后创建立全景和斑马线动画就比较容易了，直接来代码：

 

 

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightCar.UControl { public partial class UCMainBg : UserControl { public UCMainBg() { InitializeComponent(); this.Loaded += new RoutedEventHandler(UCMainBg_Loaded); } void UCMainBg_Loaded(object sender, RoutedEventArgs e) { sbMoveMainBg.Begin(); sbRunRoad.Begin(); } } }

     6、在主场景中组合上面的动画元件完成整个动画功能：

      做到这大功快要告成了，引入上面创建的用户控件，调整其位置大小，F5运行完成。

 

     结语：上面场景中动画都是在Blend中设计完成的，要使动画重复执行只需要在storyboard中设置 RepeatBehavior="forever"。欢迎大家拍砖。如需源代码请留Email。