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

2019-01-25 15:18:40 浏览数 (1)

本文是参考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

0 人点赞