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

概述      今天我们先实现一个3D的主场景远处的背景随机抖动如图:       1、素材准备(远景图片、飞机图，树图)：             2、打开blend设计工具先将UserControl根容器面板改为Canvas以方便我们布局和动画制作;       3、在blend中绘制一个矩形并将矩形转换为Path应用由远及近渐变色（注意图片中的红色框选区域）:       4、导入远景图片并应用

      今天我们先实现一个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,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,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变换（飞机飞出，树木飞入）

总结

以上是内存溢出为你收集整理的手把手教你使用Silverlight实现3D场景一（素材准备,使用Blend创建主场景）全部内容，希望文章能够帮你解决手把手教你使用Silverlight实现3D场景一（素材准备,使用Blend创建主场景）所遇到的程序开发问题。

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