Windows Store App 偏移特效

通过前面讲解的内容，读者已经了解了如何在三维空间中使旋转对象绕指定的旋转中心旋转一定的角度。接下来在这个基础上进一步讲解如何对旋转对象进行平移。下面首先介绍一下用到的几个属性。

q  LocalOffsetX，沿旋转对象平面的X轴平移对象。

q  LocalOffsetY，沿旋转对象平面的Y轴平移对象。

q  LocalOffsetZ，沿旋转对象平面的Z轴平移对象。

q  GlobalOffsetX，沿着与屏幕对齐的X轴平移对象。

q  GlobalOffsetY，沿着与屏幕对齐的Y轴平移对象。

q  GlobalOffsetZ，沿着与屏幕对齐的Z轴平移对象。

上述LocalOffsetX、LocalOffsetY和LocalOffsetZ属性代表本地偏移属性，在透视转换中设置这些属性的值可以使界面元素沿着X轴、Y轴或Z轴平移。如果元素在平移的同时还伴随旋转，那么旋转会影响元素平移的方向，在视觉上使人觉得元素的平移已经脱离了屏幕所在平面。而GlobalOffsetX、GlobalOffsetY和GlobalOffsetZ属性则是全局偏移属性，它不同于本地偏移属性，即使元素在平移的同时还伴随着旋转，也不会影响元素的平移方向，即元素会在屏幕所在的平面进行平移。下面以本地偏移属性LocalOffsetX为例，实现旋转和平移相结合的3D动画效果。

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

<Grid Background="Gray">

    <Grid.Resources>

        <Storyboard  x:Name="storyboard">

            <!--此动画用于使图片沿着Y轴顺时针旋转45度-->

<DoubleAnimation Duration="0:0:3"

                 Storyboard.TargetName="MyPlaneProjection"              

                 Storyboard.TargetProperty="RotationY"

                 To="60"

                 RepeatBehavior="Forever"/>

            <!--此动画用于使图片沿X轴向右移动300像素-->

<DoubleAnimation Duration="0:0:3"

                 Storyboard.TargetName="MyPlaneProjection" 

                 Storyboard.TargetProperty="LocalOffsetX"

                 To="300"  

                 RepeatBehavior="Forever"/>

        </Storyboard>

    </Grid.Resources>

    <StackPanel Width="200" Height="200" Background="White">

        <Image  Width="200" Height="200" PointerPressed="StartAnimation_Click" Source="/Assets/Windows 8.png">

            <Image.Projection>

                <PlaneProjection x:Name="MyPlaneProjection"/>

            </Image.Projection>

        </Image>

    </StackPanel>

</Grid>

以上代码首先在Grid元素的资源字典Grid.Resources中添加了一个作为动画资源的Storyboard元素，并将其命名为storyboard，以便在后台文件中调用storyboard对象的Begin方法启动动画。接着在Storyboard 元素中添加两个DoubleAnimation动画，并分别设置这两个DoubleAnimation动画控制的属性为RotationY 和LocalOffsetX，从而可以控制界面元素的旋转和平移。同时通过Duration属性设定这两个DoubleAnimation动画的动画周期为3秒，并设置RepeatBehavior属性值为Forever，当动画周期结束时，动画还会重新播放。

在演示图板中添加完这两个DoubleAnimation动画之后，接下来又在Grid元素中添加了一个StackPanel元素，并在其中添加一个Image元素，将图片的路径赋值给Image元素的Source属性，然后为此元素的PointerPressed事件定义一个名为“StartAnimation_Click”的事件处理方法，以控制动画的播放。接着在Image.Projection元素中添加一个名为“MyPlaneProjection”的PlaneProjection元素，用于定义图片通过透视转换后在界面中呈现的方式。最后在两个DoubleAnimation动画中分别设置Storyboard元素的TargetName属性的值为MyPlaneProjection，将动画效果通过PlaneProjection元素定位到图片上。

接下来打开Dynamic3DAnimation.xaml.cs文件，为PointerPressed事件添加事件处理方法StartAnimation _Click，代码如下所示：

private voidStartAnimation_Click (object sender, RoutedEventArgs e)

   {

  storyboard.Begin();

}

以上StartAnimation _Click事件处理方法通过调用storyboard对象的Begin方法启动3D动画的播放操作。按下F5运行程序，然后单击图片，可以看到屏幕中的图片会产生伴随旋转和平移的3D动画效果。如图10-12所示。

图10-12本地偏移3D动画效果图

在图10-12中，右侧的白色区域为图片原来的位置，动画开始时，屏幕中的图片朝着屏幕外侧旋转的同时也会沿X轴正方向移动。在本示例中如果将本地偏移属性LocalOffsetX替换为与之对应的全局偏移属性GlobalOffsetX，将会产生与之不同的3D动画效果，如图10-13所示。     

图10-13 全局偏移3D动画效果图

至此已经介绍了如何在动画中设置本地偏移属性LocalOffsetX和全局偏移属性GlobalOffsetX的值来实现相应的3D动画效果。除此之外，读者可以参照前面讲解的示例在动画中使用LocalOffsetY、LocalOffsetZ、GlobalOffsetY以及GlobalOffsetZ属性制作出自己的3D动画。