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动画。

时间: 2024-10-11 08:14:58

Windows Store App 偏移特效的相关文章

Windows Store App 旋转特效

使用Projection类可以实现界面元素的三维效果,它可以使界面上的元素在三维空间中沿着X轴.Y轴或者Z轴旋转一定的角度,在透视转换中此类又称为元素的Projection属性,用于对元素使用3D特效,Projection属性中包含一个PlaneProjection元素,用于声明3D特效,即声明元素在三维空间中的呈现方式.下面通过一个示例演示3D特效带来的视觉体验. 启动Visual Studio 2012,新建一个Windows应用商店的空白应用程序项目,将其命名为3DAnimationApp

Windows Store App 变形特效

在应用程序的开发过程中,为了让界面按照期望的效果显示,有时会对界面元素应用变形特效,例如图片的缩放.旋转.移动等.与3D特效不同,在界面元素实现变形特效之后,其平行关系不会发生改变,只不过是位置.大小或方向发生了改变. 变形特效由界面元素的RenderTransform属性提供支持,此属性是Transform类型的属性, TranslateTransform.RotateTransform.ScaleTransform等都继承自Transform类,通过将它们赋值给RenderTransform

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装

Windows Store App 中使用Scrollviewer实现缩放功能

Windows Store App中可以直接使用Scrollviewer实现缩放功能,基本代码如下: <ScrollViewer Background="Yellow" HorizontalScrollBarVisibility="Visible" MaxZoomFactor="2" MinZoomFactor="0.5" VerticalScrollBarVisibility="Visible" Z

在桌面程序上(Winform or others)和Metro/Modern 程序(Windows store app)的交互(相互打开,配置读取等)

这个标题真是取得我都觉得蛋疼..微软改名狂魔搞得我都不知道要叫哪个好.. 这边记录一下自己的桌面程序跟windows store app交互的过程. 由于某些原因,微软的商店应用的安全沙箱导致很多事情无法做到,因此额外做了一个.NET桌面引擎来辅助,那么现在就需要让这两个不同环境的程序进行交互. 第一步:在桌面应用引擎中,唤醒商店应用. 根据MSDN解释,这边最简单的办法是使用协议(URI protocol)来解决. 1:打开程序的Package.appxmanifest,在声明中添加协议 名称

windows store app 读写图片

1 using System; 2 using System.Threading.Tasks; 3 using System.Runtime.InteropServices.WindowsRuntime; 4 using Windows.Graphics.Imaging; 5 using Windows.UI.Xaml.Media.Imaging; 6 using Windows.Storage; 7 using Windows.Storage.Pickers; 8 using Windows.

Windows Store App 过渡动画

Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发生的变化,不会让用户觉得元素的位置变化过于突然.下面通过一个示例介绍如何为界面中的文本块添加过渡动画. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为TransitionAnimationPage,双击打开此页面的TransitionAnimationPage.xaml文件,在Gr

Windows Store App 中挂起时,程序奔溃的问题

昨天在开发windows phone 8.1程序时,发现程序在挂起的时候,会自动退出.通过调试发现错误信息是 System.Runtime.InteropServices.COMException (0x80004005): Unspecified error GetNavigationState doesn't support serialization of a parameter type which was passed to Frame.Navigate. at Windows.UI.

Get a developer license for windows store app(转)

Developer licenses are free, and you can get as many as you need so that all your test machines have one. If you get one or more developer licenses by using a Microsoft account, you must renew them every 30 days. If you get one or more developer lice