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