在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。

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

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();
            }
        }
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM