本文是参考MSDN对Silverlight中的透视转换做的一个小结(官方MSDN中文版的翻译个人觉得其中有些小问题)。
Silverlight中可以使用称作“透视转换”的功能将三维效果应用与任何Silverlight UIElement来制作三维效果,此外,还可以对透视转换属性进行动画处理,以便创建移动的三维效果。
1. 在三维平面上旋转对象
若要将某一属性转换应用于UIElement,请将UIElement对象的Projection属性设置为PlaneProjection。PlaneProjection定义转换在空间中呈现的方式。下面是一个实例:
代码语言:javascript复制<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动画和关键帧动画的示例:
代码语言:javascript复制<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