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

相关文章