如何適用於每個UI元素旋轉門效應在頁面

Question

應用程序啓動時，我已經在這之後MainPage.xaml中加載一個啓動畫面。主頁有很多UI元素，例如按鈕和文本塊。加載這個需要大約一兩秒的時間，所以我認爲一些動畫可以填補這個空白。否則它可能看起來有點尷尬。

Windows手機本機應用程序（如消息）在頁面右側打開時使用一些默認動畫，然後轉到其他UI，然後再打開其他UI。經過一些研究後，我發現它們是默認故障旋轉門動畫。

<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.Backward> 
      <toolkit:TurnstileTransition Mode="BackwardOut"/> 
     </toolkit:NavigationOutTransition.Backward> 
     <toolkit:NavigationOutTransition.Forward> 
      <toolkit:TurnstileTransition Mode="ForwardOut"/> 
     </toolkit:NavigationOutTransition.Forward> 
    </toolkit:NavigationOutTransition> 
</toolkit:TransitionService.NavigationOutTransition> 

所以我已經把上面的代碼只是中的MainPage的</phone:PhoneApplicationPage>標籤上面。但是頁面的元素沒有旋轉柵格動畫，我如何將它應用到頁面中的其他UI元素？有人能指導我嗎？

Alfah

Answer 1

的Windows Phone Toolkit也有TurnstileFeather過渡。基本上，這似乎被激活如下，

• 變化App.xaml.cs使RootFrame = new TransitionFrame()
• 包括動畫頁面例如在XAML工具箱xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
• 包括以下XAML剛開始標記後（類似於你貼什麼），

<toolkit:TransitionService.NavigationInTransition> 
    <toolkit:NavigationInTransition> 
     <toolkit:NavigationInTransition.Backward> 
      <toolkit:TurnstileFeatherTransition Mode="BackwardIn"/> 
     </toolkit:NavigationInTransition.Backward> 
     <toolkit:NavigationInTransition.Forward> 
      <toolkit:TurnstileFeatherTransition Mode="ForwardIn"/> 
     </toolkit:NavigationInTransition.Forward> 
    </toolkit:NavigationInTransition> 
</toolkit:TransitionService.NavigationInTransition> 
<toolkit:TransitionService.NavigationOutTransition> 
    <toolkit:NavigationOutTransition> 
     <toolkit:NavigationOutTransition.Backward> 
      <toolkit:TurnstileFeatherTransition Mode="BackwardOut"/> 
     </toolkit:NavigationOutTransition.Backward> 
     <toolkit:NavigationOutTransition.Forward> 
      <toolkit:TurnstileFeatherTransition Mode="ForwardOut"/> 
     </toolkit:NavigationOutTransition.Forward> 
    </toolkit:NavigationOutTransition> 
</toolkit:TransitionService.NavigationOutTransition> 

• 最後下列屬性toolkit:TurnstileFeatherEffect.FeatheringIndex="0"與數字有關的每個容器元素的地方到你想要元素被剝離的順序

<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="0">Cheetah</TextBlock> 
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1">Hare</TextBlock> 
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="2">Tortoise</TextBlock> 

Answer 2

什麼你指的是被稱爲「旋轉門羽」或「剝離」的過渡。

有三種實現方式，我知道：

• Colin Eberhardt's "peel" animation as part of his Metro In Motion series（免費，包括源）
• Clarity Consulting's turnstile transition（免費，包括源）
• Telerik's RadControls for Windows Phone（不是免費的，沒有源）

以上都不是集成到工具包的過渡框架。我已經考慮過自己這樣做了，但從來沒有時間。

Answer 3

您可以在任何控制使用過渡羽毛像我已經在這個例子中使用文本塊。

<toolkit:TransitionService.NavigationInTransition> 
<toolkit:NavigationInTransition> 
<toolkit:NavigationInTransition.Backward> 
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/> 
</toolkit:NavigationInTransition.Backward> 
<toolkit:NavigationInTransition.Forward> 
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/> 
</toolkit:NavigationInTransition.Forward> 
</toolkit:NavigationInTransition> 
</toolkit:TransitionService.NavigationInTransition> 
<toolkit:TransitionService.NavigationOutTransition> 
<toolkit:NavigationOutTransition> 
<toolkit:NavigationOutTransition.Backward> 
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/> 
</toolkit:NavigationOutTransition.Backward> 
<toolkit:NavigationOutTransition.Forward> 
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/> 
</toolkit:NavigationOutTransition.Forward> 
</toolkit:NavigationOutTransition> 
</toolkit:TransitionService.NavigationOutTransition> 

if you are using pivot then use this 

<controls:Pivot toolkit:TurnstileFeatherEffect.FeatheringIndex="0" Title="MY APPLICATION"> 

，然後使用效果在任何控制

<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1" Text="Hello" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"/>