Silverlight中的三维效果和3D动画

概述本文是参考MSDN对Silverlight中的透视转换做的一个小结（官方MSDN中文版的翻译个人觉得其中有些小问题）。 Silverlight中可以使用称作“透视转换”的功能将三维效果应用与任何Silverlight UIElement来制作三维效果，此外，还可以对透视转换属性进行动画处理，以便创建移动的三维效果。 1. 在三维平面上旋转对象 若要将某一属性转换应用于UIElement，请将UIE

本文是参考MSDN对Silverlight中的透视转换做的一个小结（官方MSDN中文版的翻译个人觉得其中有些小问题）。

Silverlight中可以使用称作“透视转换”的功能将三维效果应用与任何Silverlight UIElement来制作三维效果，此外，还可以对透视转换属性进行动画处理，以便创建移动的三维效果。

1. 在三维平面上旋转对象

若要将某一属性转换应用于UIElement，请将UIElement对象的Projection属性设置为PlaneProjection。PlaneProjection定义转换在空间中呈现的方式。下面是一个实例：

<UserControl x:Class="PlaneProjectionDemo.MainPage"    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="300" d:DesignWIDth="400">    <GrID x:name="LayoutRoot" Background="White">        <StackPanel Background="Gray" WIDth="330" Height="230" HorizontalAlignment="Center" VerticalAlignment="Center">            <StackPanel.Projection>                <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />            </StackPanel.Projection>            <TextBlock margin="10">Type Something Below</TextBlock>            <TextBox margin="10"></TextBox>            <button margin="10" Content="Click" WIDth="100" />        </StackPanel>    </GrID></UserControl>

最终效果如下：

在上例中，RotationX、RotationY和RotationZ属性指定围绕一个轴旋转StackPanel的度数。RotationX属性指定围绕对象的水平轴旋转。RotationY属性围绕旋转中心的垂直轴旋转。RotationZ属性围绕旋转中心的z轴（直接穿过对象平面的直线）旋转。这些旋转属性可以指定负值，这会以反方向将对象旋转某一度数。此外，绝对值可以大于360，这会使对象旋转的度数超过一个完整旋转（即360°）。

您可以通过使用CenterOfRotationX、CenterOfRotationY和CenterOfRotationZ属性移动旋转中心。默认情况下，旋转轴直接穿过对象的中心，这导致对象围绕其中心旋转；但是如果您将旋转中心移动到对象的外边缘，对象将围绕该外边缘旋转。CenterOf RotationX和CenterOfRotationY的默认值为0.5，而CenterOfRotationZ的默认值为o0.对CenterOfRotationX和CenterOfRotationY，0与1之间的值将在该对象内的某位置上设置透视点。值为0表示一个对象边缘，值为1表示对侧边缘。允许此范围外的值，并且将相应移动旋转中心。因为旋转中心的z轴是穿过对象的平面绘制的，所以您可以使用负数将旋转中心移到对象后面，使用正数（朝着自己）将旋转中心移动到该对象上方。

CenterOfRotationX将沿着与该对象平行的x轴移动旋转中心，而CenterOfRotationY沿着该对象的y轴移动旋转中心。其实质就是CenterOfRotationX移动y轴，CenterOfRotationY移动x轴。可以使用CenterOfRotationZ将旋转中心置于对象平面的上方或下方。这样您就可以围绕该点旋转对象，就像行星围绕恒星旋转一样。

2.定位对象

LocalOffsetX沿旋转对象平面的x轴平移对象。

LocalOffsetY沿旋转对象平面的y轴平移对象。

LocalOffsetZ沿旋转对象平面的z轴平移对象。

GlobalOffsetX沿旋转对象平面的x轴平移对象。

GlobalOffsetY沿旋转对象平面的y轴平移对象。

GlobalOffsetZ沿旋转对象平面的z轴平移对象。

关于3D动画就是对这些属性的动画，下面给出Form/To动画和关键帧动画的示例：

<UserControl x:Class="_3DAnimation.MainPage"    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="300" d:DesignWIDth="400" Loaded="UserControl_Loaded">    <UserControl.Resources>        <Storyboard x:name="Flyout">            <DoubleAnimation Duration="0:0:1.5" To="360" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.Targetname="InfoWindow"  d:IsOptimized="True"/>            <DoubleAnimation Duration="0:0:1.5" To="900" Storyboard.TargetProperty="(UIElement.Rendertransform).(Compositetransform.TranslateX)" Storyboard.Targetname="InfoWindow" d:IsOptimized="True"/>        </Storyboard>        <Storyboard x:name="RotateX">            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.Targetname="InfoWindow">                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="180"/>                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.LocalOffsetZ)" Storyboard.Targetname="InfoWindow">                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-300"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="600"/>                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Rendertransform).(Compositetransform.ScaleX)" Storyboard.Targetname="InfoWindow">                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="2"/>                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Rendertransform).(Compositetransform.ScaleY)" Storyboard.Targetname="InfoWindow">                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>                <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="2"/>                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>            </DoubleAnimationUsingKeyFrames>        </Storyboard>    </UserControl.Resources>    <GrID x:name="LayoutRoot" Background="White">        <Rectangle x:name="InfoWindow" Fill="#7F0C7829" Height="220" stroke="#CC606060" WIDth="200" RadiusX="8" RadiusY="8" RendertransformOrigin="0.5,0.5">            <Rectangle.Rendertransform>                <Compositetransform/>            </Rectangle.Rendertransform>            <Rectangle.Projection>                <PlaneProjection/>            </Rectangle.Projection>            <Rectangle.Effect>                <DropShadowEffect color="#190ADC1E"/>            </Rectangle.Effect>        </Rectangle>    </GrID></UserControl>

运行效果，可以自己动手试试！

最后推荐一个个人觉得还不错的学习网站：http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=HomePage

总结

以上是内存溢出为你收集整理的Silverlight中的三维效果和3D动画全部内容，希望文章能够帮你解决Silverlight中的三维效果和3D动画所遇到的程序开发问题。

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