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、代码如下:

<UserControl x:Class="SilverlightCar.UControl.UCWheel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://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,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,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,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,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,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> </StackPanel> </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 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://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。