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

Silverlight团队的Toolkit中为我们提供了这样一套组件，叫做TransitionServices服务，我们可以用它来实现页面间的跳转动画。该服务提供了一下几个跳转动画：

1. SlideTransition ： 上下或者左右滑动效果，具体有Mode值决定：
   • SlideUpFadeIn 向上飞入
   • SlideUpFadeOut 向上飞出
   • SlideDownFadeIn 向下飞入
   • SlideDownFadeOut 向下飞出
   • SlideLeftFadeIn 向左飞入
   • SlideLeftFadeIn 向左飞出
   • SlideRightFadeIn 向右飞入
   • SlideRightFadeIn 向右飞出
2. RollTransition：360度旋转动画效果
3. RotateTransition ：旋转效果，Mode枚举值如下：
   • In180Clockwise 180顺时针转入
   • Out180Clockwise 180顺时针转出
   • In180Counterclockwise 180逆时针转入
   • Out180Counterclockwise 180逆时针转出
   • In90Clockwise 90顺时针转入
   • Out90Clockwise 90顺时针转出
   • In90Counterclockwise 90逆时针转入
   • Out90Counterclockwise 90逆时针转出
4. SwivelTransition : 垂直翻转动画效果，Mode值枚举如下：
   • BackwardIn 向后翻转入
   • BackwardOut 向后翻转出
   • ForwardIn 向前翻转入
   • ForwardOut 向前翻转出
   • FullScreenIn 全屏翻转入
   • FullScreenOut 全屏翻转出
5. 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}"

Posted in Windows Phone