手把手教你使用Silverlight实现3D场景一（素材准备,使用Blend创建主场景）

      今天我们先实现一个3D的主场景远处的背景随机抖动如图:

      1、素材准备(远景图片、飞机图，树图)：

     

      2、打开blend设计工具先将UserControl根容器面板改为Canvas以方便我们布局和动画制作;
      3、在blend中绘制一个矩形并将矩形转换为Path应用由远及近渐变色（注意图片中的红色框选区域）:

      4、导入远景图片并应用渐变滤镜(OpacityMask)参考如图：

      5、创建一个背景抖动变换的动画（可在BLEND中设计动画），为了简单我在VS中写了一个如：
    <Storyboard x:Name="farBgAnimation" > <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5000000" To="6" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" /> </Storyboard>
      6、在页面Page_Load事件中播放动画并注册动画播放完成事件动态修改动画RotateTransform.Angle属性以更随机一些如：
     <Storyboard x:Name="farBgAnimation" > <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5000000" To="6" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" /> </Storyboard>

     完整XAML代码：
<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:CityFly_UControl="clr-namespace:CityFly.UControl" x:Class="CityFly.MainPage" d:DesignWidth="600" d:DesignHeight="600"> <UserControl.Resources> <Storyboard x:Name="farBgAnimation" > <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5000000" To="6" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" /> </Storyboard> </UserControl.Resources> <Canvas x:Name="LayoutRoot"> <Path Stretch="Fill" Stroke="{x:Null}" Height="600" Width="800" Canvas.Left="-108" Data="M0,0 L800,0 L800,600 L0,600 z"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#0C4E747A" Offset="0.152"/> <GradientStop Color="#FF13525B" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> <Image x:Name="image" Height="348" Width="1452" Source="Image/head.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Canvas.Left="-428" Canvas.Top="-46"> <Image.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> <GradientStop Color="#A35B5B5B" Offset="0.796"/> <GradientStop Color="#FF2E2E2E" Offset="0.563"/> </LinearGradientBrush> </Image.OpacityMask> <Image.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="0"/> <TranslateTransform/> </TransformGroup> </Image.RenderTransform> </Image> </Canvas> </UserControl>

   完整CS代码：
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; using CityFly.Model; using CityFly.UControl; using System.Windows.Threading; namespace CityFly { public partial class MainPage : UserControl { private Random rand; public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { rand = new Random(DateTime.Now.Millisecond); farBgAnimation.Begin(); farBgAnimation.Completed += new EventHandler(ManBgAnimation_Completed); } //动态修改远景抖动 void ManBgAnimation_Completed(object sender, EventArgs e) { (farBgAnimation.Children[0] as DoubleAnimation).To = rand.Next(-2, 2); farBgAnimation.Begin(); } } }
   下一节我们将使用一个自定义控件实现3D变换（飞机飞出，树木飞入）