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

概述      前一阵装好了VS2010 beta2 和Silverlight4.0，做了一个汽车运动的动画，先来个效果图(有图有真相):      演示地址: http://xingjunli.webs.com/SilverlightCar.html       下面分解一下我动画设计的过程：       1、搭建SL4.0开发环境(我的安装顺序如下):           1.1、window7

      前一阵装好了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、代码如下:

<UserControl x:Class="SilverlightCar.UControl.UCWheel" xmlns="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="@R_301_6822@://schemas.microsoft.com/Expression/blend/2008" xmlns:mc="@R_301_6822@://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="85" d:DesignWIDth="85"> <UserControl.Resources> <Storyboard x:name="sbRun" RepeatBehavior="forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.Targetname="image"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="360"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Canvas x:name="LayoutRoot" Background="transparent"> <Image x:name="image" Source="/SilverlightCar;Component/images/wheel.png" Stretch="Fill" RendertransformOrigin="0.5,0.5"> <Image.Projection> <PlaneProjection/> </Image.Projection> <Image.Rendertransform> <transformGroup> <Scaletransform/> <Skewtransform/> <Rotatetransform/> <Translatetransform/> </transformGroup> </Image.Rendertransform> </Image> </Canvas></UserControl>

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中通过“<local:UCWheel Canvas.top="186" Canvas.left="39"/>”这样的方式引入或者创建用户控件;

     4.4、汽车动画代码如下：

<UserControl xmlns="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="@R_301_6822@://schemas.microsoft.com/Expression/blend/2008" xmlns:mc="@R_301_6822@://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SilverlightCar.UControl" x:Class="SilverlightCar.UControl.UCCar" WIDth="558" Height="285"> <Canvas> <Image Source="/SilverlightCar;Component/images/car.png" Stretch="Fill"/> <local:UCWheel Canvas.top="186" Canvas.left="39"/> <local:UCWheel Canvas.left="439" Canvas.top="191"/></Canvas></UserControl>

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

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

  <UserControl x:Class="SilverlightCar.UControl.ucmainBg" xmlns="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="@R_301_6822@://schemas.microsoft.com/Expression/blend/2008" xmlns:mc="@R_301_6822@://schemas.openxmlformats.org/markup-compatibility/2006" WIDth="800" Height="374"> <UserControl.Resources> <Storyboard x:name="sbMoveMainBg" RepeatBehavior="forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[3].(Translatetransform.X)" Storyboard.Targetname="___Image_"> <EasingDoubleKeyFrame KeyTime="0" Value="-1751"/> <EasingDoubleKeyFrame KeyTime="0:0:8" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:name="sbRunRoad" RepeatBehavior="forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.left)" Storyboard.Targetname="stackPanel1"> <EasingDoubleKeyFrame KeyTime="0" Value="-160"/> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[3].(Translatetransform.X)" Storyboard.Targetname="stackPanel1"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="2"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Canvas x:name="LayoutRoot" Background="White"> <Image x:name="___Image_" Height="356" Source="/SilverlightCar;Component/images/360VIEw.png" Stretch="Fill" WIDth="2551" RendertransformOrigin="0.5,0.5"> <Image.Rendertransform> <transformGroup> <Scaletransform/> <Skewtransform/> <Rotatetransform/> <Translatetransform/> </transformGroup> </Image.Rendertransform> </Image> <Rectangle Height="80" strokeThickness="0" Canvas.top="294" WIDth="800"> <Rectangle.OpacityMask> <linearGradIEntBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradIEntStop/> <GradIEntStop color="White" Offset="1"/> <GradIEntStop color="#FF858585" Offset="0.483"/> </linearGradIEntBrush> </Rectangle.OpacityMask> <Rectangle.Fill> <ImageBrush ImageSource="/SilverlightCar;Component/images/road.png"> <ImageBrush.relativetransform> <transformGroup> <Scaletransform CenterY="0.5" CenterX="0.5" ScaleY="1" ScaleX="-1"/> <Skewtransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/> <Rotatetransform Angle="0" CenterY="0.5" CenterX="0.5"/> <Translatetransform/> </transformGroup> </ImageBrush.relativetransform> </ImageBrush> </Rectangle.Fill> </Rectangle> <StackPanel x:name="stackPanel1" OrIEntation="Horizontal" Canvas.top="360" WIDth="960" RendertransformOrigin="0.5,0.5"> <StackPanel.Rendertransform> <transformGroup> <Scaletransform/> <Skewtransform/> <Rotatetransform/> <Translatetransform/> </transformGroup> </StackPanel.Rendertransform> <Path Data="M0,500 L78.037384,500 L160.74765,500" Height="4" Stretch="Fill" strokeThickness="4" UseLayoutRounding="False"> <Path.stroke> <linearGradIEntBrush EndPoint="1.165,0.392" StartPoint="-0.222,0.862"> <GradIEntStop color="White" Offset="0.497"/> <GradIEntStop color="transparent" Offset="0.505"/> <GradIEntStop color="#FFFFFDFD" Offset="0.5"/> <GradIEntStop color="#00717171" Offset="0.501"/> <GradIEntStop color="White" Offset="0.371"/> </linearGradIEntBrush> </Path.stroke> </Path> <Path Data="M0,0.862"> <GradIEntStop color="White" Offset="0.497"/> <GradIEntStop color="transparent" Offset="0.505"/> <GradIEntStop color="#FFFFFDFD" Offset="0.5"/> <GradIEntStop color="#00717171" Offset="0.501"/> <GradIEntStop color="White" Offset="0.371"/> </linearGradIEntBrush> </Path.stroke> </Path> <Path Data="M0,0.862"> <GradIEntStop color="White" Offset="0.497"/> <GradIEntStop color="transparent" Offset="0.505"/> <GradIEntStop color="#FFFFFDFD" Offset="0.5"/> <GradIEntStop color="#00717171" Offset="0.501"/> <GradIEntStop color="White" Offset="0.371"/> </linearGradIEntBrush> </Path.stroke> </Path> </StackPanel> </Canvas></UserControl>

 

@H_502_174@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运行完成。

<UserControl xmlns="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="@R_301_6822@://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="@R_301_6822@://schemas.microsoft.com/Expression/blend/2008" xmlns:mc="@R_301_6822@://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:SilverlightCar_UControl="clr-namespace:SilverlightCar.UControl" x:Class="SilverlightCar.MainPage" Height="372" WIDth="800"> <Canvas x:name="LayoutRoot" Background="White"> <SilverlightCar_UControl:ucmainBg></SilverlightCar_UControl:ucmainBg> <SilverlightCar_UControl:UCCar margin="0" RendertransformOrigin="0.5,0.5" Canvas.left="92" Canvas.top="186"> <SilverlightCar_UControl:UCCar.Rendertransform> <transformGroup> <Scaletransform ScaleX="0.25" ScaleY="0.25"/> <Skewtransform/> <Rotatetransform/> <Translatetransform/> </transformGroup> </SilverlightCar_UControl:UCCar.Rendertransform> </SilverlightCar_UControl:UCCar> </Canvas></UserControl>

 

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

总结

以上是内存溢出为你收集整理的Silverlight4.0 应用demo1 飞驰汽车动画全部内容，希望文章能够帮你解决Silverlight4.0 应用demo1 飞驰汽车动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。