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方法来启动动画,代码如下所示:

上面的示例代码使用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度,这表示图片不只旋转一圈。

上一篇:unsigned 和 signed


下一篇:[JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape