Windows Phone下页面跳转动画的实现
写在前面的一些废话:
前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过、学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘。最近由于家里以及感情方面的事,人也变得有点怨天尤人,总给自己找各种各样的借口。趁这个国庆假期,好好的对之前的一些学习以及工作做一番总结。
用过Windows Phone的童鞋都会有这样的印象,动画效果不逊于小水果的,有的甚至还比小水果的好。开机时Live Tile一个个按次序顺序排列,退出程序时的那种向内倾斜的翻页效果等等。这些都是Windows Phone独具特色的动画效果。那么我们能否在自己的应用中实现类似的效果呢?答案当然是肯定的。
Silverlight团队的Toolkit中为我们提供了这样一套组件,叫做TransitionServices服务,我们可以用它来实现页面间的跳转动画。该服务提供了一下几个跳转动画:
SlideTransition : 上下或者左右滑动效果,具体有Mode值决定:
SlideUpFadeIn 向上飞入
SlideUpFadeOut 向上飞出
SlideDownFadeIn 向下飞入
SlideDownFadeOut 向下飞出
SlideLeftFadeIn 向左飞入
SlideLeftFadeIn 向左飞出
SlideRightFadeIn 向右飞入
SlideRightFadeIn 向右飞出
RollTransition:360度旋转动画效果
RotateTransition :旋转效果,Mode枚举值如下:
In180Clockwise 180顺时针转入
Out180Clockwise 180顺时针转出
In180Counterclockwise 180逆时针转入
Out180Counterclockwise 180逆时针转出
In90Clockwise 90顺时针转入
Out90Clockwise 90顺时针转出
In90Counterclockwise 90逆时针转入
Out90Counterclockwise 90逆时针转出
SwivelTransition : 垂直翻转动画效果,Mode值枚举如下:
BackwardIn 向后翻转入
BackwardOut 向后翻转出
ForwardIn 向前翻转入
ForwardOut 向前翻转出
FullScreenIn 全屏翻转入
FullScreenOut 全屏翻转出
TurnstileTransition:左右翻页动画效果,Mode枚举值如下:
BackwardIn 向后翻入
BackwardOut 向后翻出
ForwardIn 向前翻入
ForwardOut 向前翻出
可以看到,Toolikit为我们提供了丰富的动画效果,下面就以翻页动画效果为例,来实现页面跳转动画。
如果是针对单个页面,首先在App.xmal.cs文件中,找到Rootframe初始化的地方,替换成如下代码:?
//RootFrame = new PhoneApplicationFrame(); RootFrame = new TransitionFrame();
接着需要在页面的资源里添加一下几句代码即可:
<toolkit:navigationintransition>
<toolkit:navigationintransition.backward>
<toolkit:turnstiletransition mode="BackwardIn" />
</toolkit:navigationintransition.backward>
<toolkit:navigationintransition.forward>
<toolkit:turnstiletransition mode="ForwardIn" />
</toolkit:navigationintransition.forward>
</toolkit:navigationintransition>
</toolkit:transitionservice.navigationintransition>
<toolkit:transitionservice.navigationouttransition>
<toolkit:navigationouttransition>
<toolkit:navigationouttransition.forward>
<toolkit:turnstiletransition mode="ForwardOut" />
</toolkit:navigationouttransition.forward>
<toolkit:navigationouttransition.backward>
<toolkit:turnstiletransition mode="BackwardOut" />
</toolkit:navigationouttransition.backward>
</toolkit:navigationouttransition>
</toolkit:transitionservice.navigationouttransition>
但是有时候,我们需要针对整个App的所有页面都设置跳转动画,当然,我们可以把上述代码拷贝到每个页面中,但是这样看着难免有点不舒服,这时我们可以创建一个公共的页面Style,然后应用到各个页面当中。在App.xaml文件的资源节点中或者自定义的资源文件中,添加一个这样的Style:
<setter property="toolkit:TransitionService.NavigationInTransition">
<setter.value>
<toolkit:navigationintransition>
<toolkit:navigationintransition.backward>
<toolkit:turnstiletransition mode="BackwardIn"/>
</toolkit:navigationintransition.backward>
<toolkit:navigationintransition.forward>
<toolkit:turnstiletransition mode="ForwardIn" />
</toolkit:navigationintransition.forward>
</toolkit:navigationintransition>
</setter.value>
</setter>
<setter property="toolkit:TransitionService.NavigationOutTransition">
<setter.value>
<toolkit:navigationouttransition>
<toolkit:navigationouttransition.backward>
<toolkit:turnstiletransition mode="BackwardOut"/>
</toolkit:navigationouttransition.backward>
<toolkit:navigationouttransition.forward>
<toolkit:turnstiletransition mode="ForwardOut" />
</toolkit:navigationouttransition.forward>
</toolkit:navigationouttransition>
</setter.value>
</setter>
</style>
然后在各个页面中加入如下代码即可:
Style="{StaticResource PageTranstionStyle}"
本文来自HamGuy的博客,原文地址:http://www.hamguy.info/?p=439
Windows Phone下页面跳转动画的实现的更多相关文章
- Vue页面跳转动画效果实现
Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d
- WP开发笔记——WP APP添加页面跳转动画
微软的toolkit团队为我们为我们提供了这样一套组件,叫做TransitionServices服务. 简单说一下它具备的效果: turnstile(轴旋转效果): turnstile feather ...
- Vue仿微信app页面跳转动画
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- SSH框架下页面跳转入门篇
一.完成目标,因为WEB-INF下面的界面不能通过输入地址的方式直接访问,所以需要在后台定义一个方法跳转过去. 步骤1:.创建普通类继承ActionSupport类,并定义一个方法返回需要跳转的路径 ...
- ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
- 前端开发--ppt展示页面跳转逻辑实现
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 今天遇到一个小问题, 同组的 ...
- PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题
PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...
- .Net程序猿玩转Android开发---(11)页面跳转
在不论什么程序开发中,都会遇到页面之间跳转的情况,Android开发也不例外.这一节,我们来认识下Android项目中如何进行页面跳转.页面跳转分为有參数和无參数页面跳转,已经接受还有一个页面的返回值 ...
- [UWP小白日记-9]页面跳转过度动画(二)
又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...
随机推荐
- datagridview数据绑定操作数据库实现增删改查
DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...
- css3 3d 与案例分析
作者:魔洁 聊到3d那我们就先聊聊空间维度,首先一维,比如一条线就是一个一维空间,连点成线在这个空间里这些点只能前进后退,二维空间就是一个平面,这时点不仅可以前进后退还可以左右移动,3维空间也可以说是 ...
- Visual Studio 2017 RC 初探安装
上次看到博客介绍 Visual Studio 2017 RC,看到其中一个改进是启动很快,这是一大进步,也是低配电脑的程序员的期望.不过还没体验,是驴是骡子拉出来看看,这不就开始下载. 1.打开官网: ...
- jQuery 监听元素内容变化的方法
我们可以用onchange事件来完成元素值发生改变触发的监听.但是 onchange 比较适用于<input>.<textarea> 以及 <select> 元素. ...
- 使用JDBC连接数据库(一)
JDBC是由java编程语言编写的类及接口组成,同时它为程序开发人员提供了一组用于实现对数据库访问的JDBC API,并支持SQL语言.利用JDBC可以将JAVA代码连接到oracle.DB2.SQL ...
- angular 输入框实现自定义验证
此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以 ...
- mysql优化---订单查询优化:异步分页处理
订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...
- 数组&&函数数组
数组:一次性定义多个同类型的变量,数组在 内存中存储空间必须是连续的(查询比较快)定义数组: int a[]; int[] a;分配空间: a=new int[5]; 自动为数组元素赋以默认值 a[0 ...
- 快速排序的C语言实现
#include <stdio.h> int qSort(int a[],int i,int j) { int h = i; int r = j; int x = a[h]; int f ...
- object c入门
无意间看到Object C编写的程序,感觉蛮有意思的,记载下来,慢慢品味,也许会有用得上的时候.吼吼~~ 大部分有一点其他平台开发基础的初学者看到XCode,第一感想是磨拳擦掌,看到 Interfac ...