你的位置:首页 > 软件开发 > ASP.net > 在uwp仿IOS的页面切换效果

在uwp仿IOS的页面切换效果

发布时间:2016-02-04 00:00:11
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码。先分析IOS的页面切换。用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画。导航到新页面时,使用页面前进的动画。UWP自带很多切换效果,位于 Windows ...

有时候我们需要编写一些迎合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)

原标题:在uwp仿IOS的页面切换效果

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。