在uwp仿IOS的頁面轉場效果

標籤：

有時候我們需要編寫一些迎合IOS使用者使用習慣的uwp應用，我在這裡整理一下仿IOS頁面轉場效果的代碼。

先分析IOS的頁面切換。使用者使用左右滑動方式進行前進和後退，播放類似於FlipView的切換動畫。導航到新頁面時，使用頁面前進的動畫。

UWP內建很多轉場效果，位於 Windows.UI.Xaml.Media.Animation 中。與蘋果的轉場效果最接近的是 PaneThemeTransition （而不是EdgeUIThemeTransition）。

PaneThemeTransition的效果是從它的Edge屬性規定的方位平移進入，從Edge屬性規定的方位平移退出。

蘋果的切換方式是：

建立和前進：從右邊平移進入，從左邊平移退出。

返回：從左邊平移進入，從右邊平移退出。

分析完這些，大致的實現步驟就明了了。

在頁面初始化時添加PaneThemeTransition

在進入動畫播放前判斷導航方式並設定Edge屬性。不考慮重新整理這種情況，如果是返回就是Left，否則是Right。

在退齣動畫播放前判斷導航方式並設定Edge屬性。不考慮重新整理這種情況，如果是返回就是Right，否則是Left。

照這個思路寫出來的代碼是這樣的：

 1 Imports Windows.UI.Xaml.Media.Animation 2 ‘‘‘ <summary> 3 ‘‘‘ 移植蘋果的應用時使用。這種頁面內建蘋果導航動畫和手勢。 4 ‘‘‘ </summary> 5 Public MustInherit Class AppleAnimationPage 6     Inherits Page 7     Dim PaneAnim As New PaneThemeTransition With {.Edge = EdgeTransitionLocation.Right} 8     Sub New() 9         MyBase.New10         Transitions = New TransitionCollection11         Transitions.Add(PaneAnim)
12     End Sub13     Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)14         PaneAnim.Edge = If(e.NavigationMode = NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)15         MyBase.OnNavigatedTo(e)16     End Sub17     Protected Overrides Sub OnNavigatingFrom(e As NavigatingCancelEventArgs)18         PaneAnim.Edge = If(e.NavigationMode <> NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)19         MyBase.OnNavigatingFrom(e)20     End Sub21 End Class

接下來是寫手勢代碼。首先設定一下手勢的模式為橫向平移，然後對ManipulationCompleted事件進行處理。這裡判斷的邏輯是不唯一的。我自己想了一種判斷的方法，代碼寫上之後是這樣的：

 1 Imports Windows.UI.Xaml.Media.Animation 2 ‘‘‘ <summary> 3 ‘‘‘ 移植蘋果的應用時使用。這種頁面內建蘋果導航動畫和手勢。 4 ‘‘‘ </summary> 5 Public MustInherit Class AppleAnimationPage 6     Inherits Page 7     Dim PaneAnim As New PaneThemeTransition With {.Edge = EdgeTransitionLocation.Right} 8     Sub New() 9         MyBase.New10         Transitions = New TransitionCollection11         Transitions.Add(PaneAnim)12         ManipulationMode = ManipulationModes.TranslateX13     End Sub14     Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)15         PaneAnim.Edge = If(e.NavigationMode = NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)16         MyBase.OnNavigatedTo(e)17     End Sub18     Protected Overrides Sub OnNavigatingFrom(e As NavigatingCancelEventArgs)19         PaneAnim.Edge = If(e.NavigationMode <> NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)20         MyBase.OnNavigatingFrom(e)21     End Sub22     Private Sub AppleAnimationPage_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles Me.ManipulationCompleted23         Dim trans = e.Cumulative.Translation24         Dim DeltaX As Double = Math.Abs(trans.X)25         If Math.Abs(trans.Y) * 3 < DeltaX AndAlso DeltaX > 200 Then26             If trans.X > 0 Then27                 If Frame.CanGoBack Then Frame.GoBack()28             Else29                 If Frame.CanGoForward Then Frame.GoForward()30             End If31         End If32     End Sub33 End Class

這些代碼在我的Lumia 1520進行過測試，有比較理想的轉場效果。

 

在uwp仿IOS的頁面轉場效果