有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码。

先分析IOS的页面切换。用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画。导航到新页面时,使用页面前进的动画。

UWP自带很多切换效果,位于 Windows.UI.Xaml.Media.Animation 中。与苹果的切换效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition)。

PaneThemeTransition的效果是从它的Edge属性规定的方位平移进入,从Edge属性规定的方位平移退出。

苹果的切换方式是:

新建和前进:从右边平移进入,从左边平移退出。

返回:从左边平移进入,从右边平移退出。

分析完这些,大致的实现步骤就明了了。

在页面初始化时添加PaneThemeTransition

在进入动画播放前判断导航方式并设定Edge属性。不考虑刷新这种情况,如果是返回就是Left,否则是Right。

在退出动画播放前判断导航方式并设定Edge属性。不考虑刷新这种情况,如果是返回就是Right,否则是Left。

照这个思路写出来的代码是这样的:

VB

 Imports Windows.UI.Xaml.Media.Animation
''' <summary>
''' 移植苹果的应用时使用。这种页面自带苹果导航动画和手势。
''' </summary>
Public MustInherit Class AppleAnimationPage
Inherits Page
Dim PaneAnim As New PaneThemeTransition With {.Edge = EdgeTransitionLocation.Right}
Sub New()
MyBase.New
Transitions = New TransitionCollection
Transitions.Add(PaneAnim)
End Sub
Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
PaneAnim.Edge = If(e.NavigationMode = NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)
MyBase.OnNavigatedTo(e)
End Sub
Protected Overrides Sub OnNavigatingFrom(e As NavigatingCancelEventArgs)
PaneAnim.Edge = If(e.NavigationMode <> NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)
MyBase.OnNavigatingFrom(e)
End Sub
End Class

接下来是写手势代码。首先设置一下手势的模式为横向平移,然后对ManipulationCompleted事件进行处理。这里判断的逻辑是不唯一的。我自己想了一种判断的方法,代码写上之后是这样的:

VB

 Imports Windows.UI.Xaml.Media.Animation
''' <summary>
''' 移植苹果的应用时使用。这种页面自带苹果导航动画和手势。
''' </summary>
Public MustInherit Class AppleAnimationPage
Inherits Page
Dim PaneAnim As New PaneThemeTransition With {.Edge = EdgeTransitionLocation.Right}
Sub New()
MyBase.New
Transitions = New TransitionCollection
Transitions.Add(PaneAnim)
ManipulationMode = ManipulationModes.TranslateX
End Sub
Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
PaneAnim.Edge = If(e.NavigationMode = NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)
MyBase.OnNavigatedTo(e)
End Sub
Protected Overrides Sub OnNavigatingFrom(e As NavigatingCancelEventArgs)
PaneAnim.Edge = If(e.NavigationMode <> NavigationMode.Back, EdgeTransitionLocation.Left, EdgeTransitionLocation.Right)
MyBase.OnNavigatingFrom(e)
End Sub
Private Sub AppleAnimationPage_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles Me.ManipulationCompleted
Dim trans = e.Cumulative.Translation
Dim DeltaX As Double = Math.Abs(trans.X)
If Math.Abs(trans.Y) * < DeltaX AndAlso DeltaX > ActualWidth / 2 Then
If trans.X > Then
If Frame.CanGoBack Then Frame.GoBack()
Else
If Frame.CanGoForward Then Frame.GoForward()
End If
End If
End Sub
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) * < DeltaX && DeltaX > ActualWidth / ) {
if (trans.X > ) {
if (Frame.CanGoBack)
Frame.GoBack();
} else {
if (Frame.CanGoForward)
Frame.GoForward();
}
}
}
}

在uwp仿IOS的页面切换效果的更多相关文章

  1. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  4. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  5. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  6. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  7. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  8. WP8 NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

  9. Windows Phone 8: NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

随机推荐

  1. 书写优雅的shell脚本(插曲) - kill

    shell之kill.killall.xkill.pkill 2013-01-08 22:03:28|  分类: Linux|举报|字号订阅 1 kill kill的应用是和ps 或pgrep 命令结 ...

  2. 【Codeforces 776B】Sherlock and his girlfriend

    [题目链接] 点击打开链接 [算法] 将所有质数染成1,合数染成2即可 [代码] #include<bits/stdc++.h> using namespace std; #define ...

  3. Autolayout UIScrollView

    http://www.cocoachina.com/ios/20141011/9871.html Xcode6中如何对scrollview进行自动布局(autolayout)   Xcode6中极大的 ...

  4. [转]Python+Selenium之expected_conditions:各种判断(上)

    原文地址: https://www.jianshu.com/p/f3189f1951cc 其他类似文章: https://www.cnblogs.com/yuuwee/p/6635652.html h ...

  5. 杂项-公司:Aspose

    ylbtech-杂项-公司:Aspose Aspose 于2002年3月在澳大利亚悉尼创建,旗下产品覆盖文档.图表.PDF.条码.OCR.CAD.HTML.电子邮件等各个文档管理领域,为全球.NET ...

  6. redis简介、安装、配置和数据类型

    redis简介.安装.配置和数据类型 redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理. 它支持字符串.哈希表.列表.集合.有序集合, ...

  7. C++笔试题(七)

    微软研究院是一个听起来就牛B的地方啊,反正我是进不去,不过不妨碍我看看他的笔试题到底是怎么样的.下面四道题就是微软研究院的笔试题目,题后附有我的解答.微软研究院(亚洲)的网址是:http://rese ...

  8. poj2385【基础DP】

    挑战DP 题意: 有两棵树,给每分钟有苹果掉落的苹果树,一开始B在 1 树下,B最多只能移动W步,求一个最大数量拿到的. 思路: 一开始想的是,我对于每分钟情况来说无非是等于之前的在本位置+1,或者等 ...

  9. PTA 模拟,【放着一定要写哈哈哈哈哈】(据说用string哟)

    实现一种简单原始的文件相似度计算,即以两文件的公共词汇占总词汇的比例来定义相似度.为简化问题,这里不考虑中文(因为分词太难了),只考虑长度不小于3.且不超过10的英文单词,长度超过10的只考虑前10个 ...

  10. bzoj 1396: 识别子串【SAM+线段树】

    建个SAM,符合要求的串显然是|right|==1的节点多代表的串,设si[i]为right集合大小,p[i]为right最大的r点,这些都可以建出SAM后再parent树上求得 然后对弈si[i]= ...