Windows phone中如何添加页面跳转动画

Windows phone中如何添加页面跳转动画

有没有羡慕ios平台中华丽的动画效果，不用担心微软的toolkit团队为我们为我们提供了这样一套组件，叫做TransitionServices服务。

简单说一下它具备的效果：turnstile（轴旋转效果）；turnstile feather（羽毛式轴旋转效果）；continuum（继承动画效果）；slide（滑动效果）；rotate（旋转效果）。这里我们实现一下Turnstile效果：

接下来我介绍一下使用过程（这里实现一个全局的跳转动画，某个页面需要动画效果时直接添加style属性就可以了）：

      首先毋庸置疑我们要下载Silverlight for Windows Phone Toolkit （没有Windows phone Toolkit的可以去http://silverlight.codeplex.com/releases/view/55034/ 进行下载）：

      因为想实现全局都可以调用的动画，于是我们可以在App.xaml中实现我们的想法。

        1.首先将Toolkit引用进来：在Application中加入   即可：如图

          

       2.在 <Application.Resources>中添加一个动画样式（Style标签中的便是）：

  <!--应用程序资源-->
    <Application.Resources>
        <local:LocalizedStrings xmlns:local= x:Key=/>
        <UriMapper:UriMapper x:Name=>
            <UriMapper:UriMapping Uri= />
        </UriMapper:UriMapper>
        <Style x:Key= TargetType=>
            <Setter Property=>
                <Setter.Value>
                    <toolkit:NavigationInTransition>
                        <toolkit:NavigationInTransition.Backward>
                            <toolkit:TurnstileTransition Mode=/>
                        </toolkit:NavigationInTransition.Backward>
                        <toolkit:NavigationInTransition.Forward>
                            <toolkit:TurnstileTransition Mode= />
                        </toolkit:NavigationInTransition.Forward>
                    </toolkit:NavigationInTransition>
                </Setter.Value>
            </Setter>
            <Setter Property=>
                <Setter.Value>
                    <toolkit:NavigationOutTransition>
                        <toolkit:NavigationOutTransition.Backward>
                            <toolkit:TurnstileTransition Mode=/>
                        </toolkit:NavigationOutTransition.Backward>
                        <toolkit:NavigationOutTransition.Forward>
                            <toolkit:TurnstileTransition Mode= />
                        </toolkit:NavigationOutTransition.Forward>
                    </toolkit:NavigationOutTransition>
                </Setter.Value>
            </Setter>
            <Setter Property=>
                <Setter.Value>
                    <ImageBrush ImageSource=/>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

       3.这一点很重要，我们需要在App.xaml.cs文件中修改下东西，以便于我们的动画能被调用。

          在cs文件中找到"RootFrame = new PhoneApplicationFrame();" 也就是PhoneApplicationFrame的实例化方法，

          我们将它改成："RootFrame = new TransitionFrame();"  这样我们的框架就成为了一个可以有跳转动画的框架了。

       4.接下来就是调用了，这个很简单直接在想用动画的页面里加上这个style就可以了： Style="{StaticResource PageTranstionStyle}"：如图：

<=========== Orientation====>

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name=>
        <Grid.Background>
            <ImageBrush ImageSource=/>
        </Grid.Background>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible= IsMenuEnabled= Mode= BackgroundColor= ForegroundColor=>
            <shell:ApplicationBarIconButton Text= IconUri= Click= />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text= />
                <shell:ApplicationBarMenuItem Text= />
                <shell:ApplicationBarMenuItem Text= />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

     最后：除了自带的这些动画效果外，我们同样可以自定义动画，这个我以后再同大家分享。