Windows Phone页面动画跳转

我们可以用TransitionServices服务实现页面间跳转动画:

1、SlideTransition : 上下或者左右滑动效果,具体有Mode值决定:

  SlideUpFadeIn 向上飞入

  SlideUpFadeOut 向上飞出

  SlideDownFadeIn 向下飞入

  SlideDownFadeOut 向下飞出

  SlideLeftFadeIn 向左飞入

  SlideLeftFadeIn 向左飞出

  SlideRightFadeIn 向右飞入

  SlideRightFadeIn 向右飞出

 

2、RollTransition:360度旋转动画效果

  RotateTransition :旋转效果,Mode枚举值如下:

  In180Clockwise 180顺时针转入

  Out180Clockwise 180顺时针转出

  In180Counterclockwise 180逆时针转入

  Out180Counterclockwise 180逆时针转出

  In90Clockwise 90顺时针转入

  Out90Clockwise 90顺时针转出

  In90Counterclockwise 90逆时针转入

  Out90Counterclockwise 90逆时针转出

 

3、SwivelTransition : 垂直翻转动画效果,Mode值枚举如下:

  BackwardIn 向后翻转入

  BackwardOut 向后翻转出

  ForwardIn 向前翻转入

  ForwardOut 向前翻转出

  FullScreenIn 全屏翻转入

  FullScreenOut 全屏翻转出

 

4、TurnstileTransition:左右翻页动画效果,Mode枚举值如下:

  BackwardIn 向后翻入

  BackwardOut 向后翻出

  ForwardIn 向前翻入

  ForwardOut 向前翻出

 

为了方便实现每个页面都可动画跳转,在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 @ 2012-10-11 20:30  彼岸小山  阅读(664)  评论(0编辑  收藏  举报