Windows Store App 旋转特效

使用Projection类可以实现界面元素的三维效果，它可以使界面上的元素在三维空间中沿着X轴、Y轴或者Z轴旋转一定的角度，在透视转换中此类又称为元素的Projection属性，用于对元素使用3D特效，Projection属性中包含一个PlaneProjection元素，用于声明3D特效，即声明元素在三维空间中的呈现方式。下面通过一个示例演示3D特效带来的视觉体验。

启动Visual Studio 2012，新建一个Windows应用商店的空白应用程序项目，将其命名为3DAnimationApp。本示例通过对Grid元素添加透视转换使界面产生三维效果。在项目的Assets文件夹下添加一个名为“Windows 8.png”的图片文件，接着打开MainPage.xaml文件，使用如下代码替换原有的Grid元素。

<Grid Margin="260,10,100,60" Background="Gray" Width="600" Height="400">

    <Grid.Projection>

        <PlaneProjection RotationX="10" RotationY="-25" RotationZ="10"/>

    </Grid.Projection>

    <TextBlock Margin="110,20" FontSize="30">界面的三维效果展示</TextBlock>            

    <Image Source="Assets/Windows 8.png" Width="300" Height="300" Margin="98,59,202,41"/>

</Grid>

以上代码在Grid.Projection元素中添加一个PlaneProjection元素，以定义其透视转换的呈现方式。然后在PlaneProjection元素中分别设置RotationX、RotationY和RotationZ属性的值使界面元素按照一定的角度旋转。最后在Grid元素中添加一个TextBlock元素和一个Image元素，并指定TextBlock元素的静态文本内容为“界面的三维效果展示”，同时设置Image元素的Source属性值为刚刚在项目中添加的图片资源路径“Assets/Windows 8.png”，将其宽度和高度分别设置为300像素。

至此已经设计好了前台界面的布局并为父级元素Grid添加了透视转换，这样Grid元素内的所有子元素都可以产生三维效果。按下F5运行程序，界面效果如图10-8所示。

图10-8 界面元素的三维效果

通过以上示例读者已经对透视转换有了初步的了解，需要注意的是，PlaneProjection元素中包含的RotationX、RotationY和RotationZ属性分别代表在三维空间中沿X轴、Y轴和Z轴旋转的角度，它们不同于普通的二维坐标，二维坐标是一个平面，而三维坐标是一个立体的空间。并且PlaneProjection元素决定了透视转换将会产生怎样的三维特效。下面以RotationX属性为例，在此基础之上将3D特效与演示图板动画结合使用，实现更加引人关注的3D动画效果。

启动Visual Studio 2012，新建一个Windows应用商店的空白应用程序项目，将其命名为3DRotationAnimation。本示例将3D特效与演示图板动画结合使用，通过控制PlaneProjection元素的RotationX属性值，界面中的图片将会在三维立体空间中沿X轴不停的旋转。在项目的Assets文件夹下添加1个名为“Windows 8.png”的图片，打开MainPage.xaml文件，使用如下代码替换原有的Grid元素。

<Grid Background="Gray">

    <StackPanel Width="260" Height="240" Background="White">

        <!--对图片进行透视转换-->

        <Image Source="/Assets/Windows 8.png" Width="260" Height="240" PointerPressed="RotationX_Click">

            <Image.Projection>

                <PlaneProjection x:Name="PlaneProjectionRotation" />

            </Image.Projection>

        </Image>

        <StackPanel.Resources >

            <Storyboard x:Name="storyboard">

                <!--此动画控制PlaneProjection元素的RotationX属性值，使图片旋转360度-->

                <DoubleAnimation Duration="0:0:4"                         Storyboard.TargetName="PlaneProjectionRotation"              

                    Storyboard.TargetProperty="RotationX"

                    From="0"

                    To="360"  

                    RepeatBehavior="Forever"/>

            </Storyboard>

        </StackPanel.Resources>       

    </StackPanel>

</Grid>

以上代码在StackPanel元素中添加了一个Image元素，设置Image元素的Source属性值为图片资源路径“/Assets/Flower.png”，并为此元素的PointerPressed事件定义名为“RotationX_Click”的事件处理方法，用于控制动画的播放。接着在Image.Projection元素中添加一个名为“PlaneProjectionRotation”的PlaneProjection元素，PlaneProjection元素可以定义图片通过透视转换后在界面中呈现的方式。然后在StackPanel元素的资源字典StackPanel.Resources中添加一个作为动画资源的Storyboard元素，并命名为storyboard，以便在后台文件中调用storyboard对象的Begin方法启动动画。Storyboard 元素中添加了一个DoubleAnimation动画，用于将图片的3D特效与演示图板动画结合使用，同时指定Storyboard元素的TargetName和TargetProperty属性值分别为PlaneProjectionRotation和RotationX，这样就可以对PlaneProjection元素的RotationX属性的值进行动画控制。为了调节图片旋转速度，还需要通过设置Duration属性值来指定动画周期，动画周期越小图片的旋转速度就越快，示例中将动画周期设置为4秒，RepeatBehavior属性值设置为Forever，动画将会以恒定的速度一直循环播放。

接下来打开MainPage.xaml.cs文件，为PointerPressed事件添加事件处理方法RotationX_Click，当单击图片时，会触发此事件处理方法，方法中通过调用storyboard对象的Begin方法来启动动画，代码如下所示：

private void RotationX_Click (object sender, RoutedEventArgs e)

   {

  storyboard.Begin();

}

上面的示例代码使用DoubleAnimation动画对PlaneProjection元素的RotationX属性值进行动画控制，图片会沿X轴不停的旋转。除此之外，还可以对RotationY和RotationZ属性值进行控制，这两个属性分别定义沿Y轴和Z轴旋转的角度，因此只需将代码中的RotationX属性替换为RotationY或RotationX属性即可实现沿Y轴或Z轴旋转的3D动画。下面展示了分别沿X轴、Y 轴和Z轴旋转45度的3D动画效果的对比图，如图10-9所示。

图10-9 图片沿X轴、Y轴、Z轴旋转45度的3D动画效果

值得注意的是，能够使图片旋转的属性值可以设置为正数或者负数，正数代表顺时针旋转，负数代表逆时针旋转。图片在X轴、Y轴或Z轴旋转角度的绝对值可以大于360度，这表示图片不只旋转一圈。