WP开发：页面跳转动画

【原文】http://blog.csdn.net/dyllove98/article/details/9289445

    在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"

然后添加一段代码就可以

<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>

    最后在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文件，里面的代码已经很精简很清楚了，修改它的值然后重新编译吧。