在移动互联时代到来的浪潮下,作为一个.net码农,我也买了一个lumia 820。(话说现在诺基亚是真的没落了,在村里的体验店都消失了,原来满大街的nokia专卖,现在只能在角落里找到几个不大的柜台了。买的过程也是不太愉快,在这规劝买电子产品的仁兄都不要去村里了)
言归正传,撸妹到手之后就开始查怎么搭开发环境,最后得出结论要在win8下用vs2012开发。so
第一步,下载win8,下载VS2012,下载Windows phone8 sdk,然后安装。
第二步,去淘宝买个开发者账号,在教程的指引下给手机解锁,这样就可以用真机调试了。
这些都准备好了之后,就开始真正的wp8开发体验了。在网上搜搜教程,再买本书看看,幸亏刚毕业那会干了一段时间的Silverlight,对wpf也不陌生,要不还真不适应。
刚开始搞无非是拖拖控件,看看控件都是什么样子的,建几个page跳转一下。到这终于到了今天要说的主题了,不管代码多丑陋多简单,能跳转了。但是跳转非常生硬,一闪就算完活了,一点也不炫,要给跳转加点动画才够炫,要不怎么跟水果牌的比。废话少说,在wp8中加动画和Silverlight一样,也是在xaml中添加storyboard标签,使用关键帧动画,这样就能实现像飞入飞出,翻页这样的效果了。但是写动画是个非常头疼的事,不光要些标签还要在code-behind里重写nevigatefrom和nevigateto等等等等方法,非常麻烦。
然后开始各种寻找,买书看。最后发现了windows phone toolkit(在wp7时代应该叫silverlight toolkit),在codeplex下载源码,编译,源码里还有很贴心的有各种例子。
编译好wptoolkit后在bin下会有两个文件夹 wp7和wp8,打开wp8里面出现了一个Microsoft.Phone.Controls.Toolkit.dll,在项目里添加这个dll的引用。
要在一个页面添加跳转动画效果,只要在页面头部引入
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
然后添加一段代码就可以
1 <toolkit:TransitionService.NavigationInTransition> 2 <toolkit:NavigationInTransition> 3 <toolkit:NavigationInTransition.Backward> 4 <toolkit:TurnstileTransition Mode="BackwardIn"/> 5 </toolkit:NavigationInTransition.Backward> 6 <toolkit:NavigationInTransition.Forward> 7 <toolkit:TurnstileTransition Mode="ForwardIn"/> 8 </toolkit:NavigationInTransition.Forward> 9 </toolkit:NavigationInTransition> 10 </toolkit:TransitionService.NavigationInTransition> 11 12 <toolkit:TransitionService.NavigationOutTransition> 13 <toolkit:NavigationOutTransition> 14 <toolkit:NavigationOutTransition.Backward> 15 <toolkit:TurnstileTransition Mode="BackwardOut"/> 16 </toolkit:NavigationOutTransition.Backward> 17 <toolkit:NavigationOutTransition.Forward> 18 <toolkit:TurnstileTransition Mode="ForwardOut"/> 19 </toolkit:NavigationOutTransition.Forward> 20 </toolkit:NavigationOutTransition> 21 </toolkit:TransitionService.NavigationOutTransition>
打开app.xaml.cs,找到这句
RootFrame = new PhoneApplicationFrame();
注释掉替换成
RootFrame = new TransitionFrame();
写一个简单的跳转来试试,应该可以出效果了。现在有动画了,看似大功告成了,但是在一个app里往往所有页面跳转的风格都是一致的,那岂不是要在每个页面都粘贴一遍,显然这不科学。所以接着往下看,把上面在MainPage里做的都删掉,打开app.xaml文件在<Application.Resources>下添加下面代码
1 <Style x:Key="PageTranstionStyle" TargetType="phone:PhoneApplicationPage"> 2 <Setter Property="toolkit:TransitionService.NavigationInTransition"> 3 <Setter.Value> 4 <toolkit:NavigationInTransition> 5 <toolkit:NavigationInTransition.Backward> 6 <toolkit:TurnstileTransition Mode="BackwardIn"/> 7 </toolkit:NavigationInTransition.Backward> 8 <toolkit:NavigationInTransition.Forward> 9 <toolkit:TurnstileTransition Mode="ForwardIn"/> 10 </toolkit:NavigationInTransition.Forward> 11 </toolkit:NavigationInTransition> 12 </Setter.Value> 13 </Setter> 14 <Setter Property="toolkit:TransitionService.NavigationOutTransition"> 15 <Setter.Value> 16 <toolkit:NavigationOutTransition> 17 <toolkit:NavigationOutTransition.Backward> 18 <toolkit:TurnstileTransition Mode="BackwardOut"/> 19 </toolkit:NavigationOutTransition.Backward> 20 <toolkit:NavigationOutTransition.Forward> 21 <toolkit:TurnstileTransition Mode="ForwardOut"/> 22 </toolkit:NavigationOutTransition.Forward> 23 </toolkit:NavigationOutTransition> 24 </Setter.Value> 25 </Setter> 26 </Style>
最后在MainPage里面<phone:phoneApplication>里添加Style="{StaticResource PageTranstionStyle}"对app资源的引用。 ok,大功告成了。这样就不用在每个页面里都复制那么长的一段代码,只要加上一句就可以。
wptoolkit里为我们提供了一些比较常用的页面切换效果
- 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 向前翻出
如果还是对效果不满意怎么办,没关系,既然有了wptoolkit的源码,那就看看源码里的transitions是怎么写的。在Microsoft.Phone.Controls.Toolkit.WP8项目里找到Transitions文件夹,我们看到里面有一个StoryBoard文件夹。就是这了,原来wptoolkit也是通过写storyboard的方法实现的动画,只不过是把这些封装起来而已。随便打开一个xaml文件,里面的代码已经很精简很清楚了,修改它的值然后重新编译吧。