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