Silverlight中的三维效果和3D动画
Silverlight中的三维效果和3D动画
本文是参考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