Windows Phone下页面跳转动画的实现

时间:2021-09-16 13:47:50

写在前面的一些废话:

  前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过、学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘。最近由于家里以及感情方面的事,人也变得有点怨天尤人,总给自己找各种各样的借口。趁这个国庆假期,好好的对之前的一些学习以及工作做一番总结。

  用过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:transitionservice.navigationintransition>
 <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:

<style x:key="PageTranstionStyle" targettype="phone:PhoneApplicationPage">

<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