有時候我們需要編寫一些迎合IOS用戶使用習慣的uwp應用,我在這里整理一下仿IOS頁面切換效果的代碼。
先分析IOS的頁面切換。用戶使用左右滑動方式進行前進和后退,播放類似於FlipView的切換動畫。導航到新頁面時,使用頁面前進的動畫。
UWP自帶很多切換效果,位於 Windows.UI.Xaml.Media.Animation 中。與蘋果的切換效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition)。
PaneThemeTransition的效果是從它的Edge屬性規定的方位平移進入,從Edge屬性規定的方位平移退出。
蘋果的切換方式是:
新建和前進:從右邊平移進入,從左邊平移退出。
返回:從左邊平移進入,從右邊平移退出。
分析完這些,大致的實現步驟就明了了。
在頁面初始化時添加PaneThemeTransition
在進入動畫播放前判斷導航方式並設定Edge屬性。不考慮刷新這種情況,如果是返回就是Left,否則是Right。
在退出動畫播放前判斷導航方式並設定Edge屬性。不考慮刷新這種情況,如果是返回就是Right,否則是Left。
照這個思路寫出來的代碼是這樣的:
VB
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.New 10 Transitions = New TransitionCollection 11 Transitions.Add(PaneAnim)
12 End Sub 13 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 Sub 17 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 Sub 21 End Class
接下來是寫手勢代碼。首先設置一下手勢的模式為橫向平移,然后對ManipulationCompleted事件進行處理。這里判斷的邏輯是不唯一的。我自己想了一種判斷的方法,代碼寫上之后是這樣的:
VB
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.New 10 Transitions = New TransitionCollection 11 Transitions.Add(PaneAnim) 12 ManipulationMode = ManipulationModes.TranslateX 13 End Sub 14 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 Sub 18 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 Sub 22 Private Sub AppleAnimationPage_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles Me.ManipulationCompleted 23 Dim trans = e.Cumulative.Translation 24 Dim DeltaX As Double = Math.Abs(trans.X) 25 If Math.Abs(trans.Y) * 3 < DeltaX AndAlso DeltaX > ActualWidth / 2 Then 26 If trans.X > 0 Then 27 If Frame.CanGoBack Then Frame.GoBack() 28 Else 29 If Frame.CanGoForward Then Frame.GoForward() 30 End If 31 End If 32 End Sub 33 End Class
這些代碼在我的Lumia 1520和屏幕9英寸的平板進行過測試,有比較理想的切換效果。
底下評論有人需要c#代碼,轉換后的在這里:
C#
using System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Diagnostics; using Windows.UI.Xaml.Media.Animation; // 此代碼使用 SharpDevelop 4.4 轉換 // 要用的話自己加上命名空間。因為c#項目要求自己寫一個與項目的根命名空間符合的命名空間 /// <summary> /// 移植蘋果的應用時使用。這種頁面自帶蘋果導航動畫和手勢。 /// </summary> public abstract class AppleAnimationPage : Page { PaneThemeTransition PaneAnim = new PaneThemeTransition { Edge = EdgeTransitionLocation.Right }; public AppleAnimationPage() : base() { ManipulationCompleted += AppleAnimationPage_ManipulationCompleted; Transitions = new TransitionCollection(); Transitions.Add(PaneAnim); ManipulationMode = ManipulationModes.TranslateX; } protected override void OnNavigatedTo(NavigationEventArgs e) { PaneAnim.Edge = e.NavigationMode == NavigationMode.Back ? EdgeTransitionLocation.Left : EdgeTransitionLocation.Right; base.OnNavigatedTo(e); } protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) { PaneAnim.Edge = e.NavigationMode != NavigationMode.Back ? EdgeTransitionLocation.Left : EdgeTransitionLocation.Right; base.OnNavigatingFrom(e); } private void AppleAnimationPage_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) { var trans = e.Cumulative.Translation; double DeltaX = Math.Abs(trans.X); if (Math.Abs(trans.Y) * 3 < DeltaX && DeltaX > ActualWidth / 2) { if (trans.X > 0) { if (Frame.CanGoBack) Frame.GoBack(); } else { if (Frame.CanGoForward) Frame.GoForward(); } } } }