UI野路子（五）--- 模仿iOS跳转页面效果
本帖最后由 qiqiminmin 于 2016-1-28 05:23 编辑
模仿只是为了学习和更好的理解。也许你并不喜欢这种页面效果，但是学会了如何模仿，可以弄出更多自己的东西。
微软提供的只有几种简单的效果，可以看看微博uwp的，进入新的页面时，只是一种稍微向上的感觉，或者向另外一个方向的感觉。我想他们对这些可能不太了解，因为他们确实就是用的微软默认的。
我个人还是很喜欢ios的方法，从右到左，这样比较有条例。
比如当你这个界面是从右边进入，那么点返回按键时，这个界面应该是往右退回去。 进入新界面，那么这个界面继续往左边移动离开，新界面从右边进来。
我先提供我的例子gif图
***图片停止解析***
假设我有3个界面
A ==> B ==> C
这样的意思的是，A 可以到 B ， B 可以到 C。 在C界面点返回键可以返回到B, B界面点返回键可以到C，
目前使用微软介绍的方法是不能达到我如图这个效果的。但是只要讨个巧，就可以解决了。
【1】在 B 界面的 Page Xaml里加入
[mw_shl_code=html,true]<Page.Transitions>
<TransitionCollection>
<PaneThemeTransition x:Name="navAnimate" Edge="Right"></PaneThemeTransition>
</TransitionCollection>
</Page.Transitions>[/mw_shl_code]
【2】在 B的cs里面加入 全局变量
private static EdgeTransitionLocation edge = EdgeTransitionLocation.Right;
【3】每次初始化完成后，重新设置navAnimate的edge值
navAnimate.Edge = edge;
【3】在B离开时，和进入其他界面，重新设置navAnimate的值，和edge的值
[mw_shl_code=csharp,true]
//离开其他界面
private void backBtn_Tapped(object sender, TappedRoutedEventArgs e)
{
try
{
navAnimate.Edge = EdgeTransitionLocation.Right;
edge = navAnimate.Edge;
this.Frame.GoBack();
}
catch
{ }
}
//进入其他界面
private void favoriteBtn_Tapped(object sender, TappedRoutedEventArgs e)
{
navAnimate.Edge = EdgeTransitionLocation.Left;
edge = navAnimate.Edge;
this.Frame.Navigate(typeof(FavoritePage));
}
[/mw_shl_code]
依次类推，以后想怎么弄就怎么弄
为防止不可控的内容风险，本站已关闭新用户注册，新贴的发表及评论；
你现在看到的内容只是互联网用户曾经发表的言论快照，仅用于老用户留存纪念，且仅与科技行业相关，全部内容不代表本站观点及立场；
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求，执行了隐患内容的自查、屏蔽和删除；
本站目前所属个人主体，未有任何盈利安排与计划，且与原WFUN.COM所属公司不存在任何关联关系；
如果本帖内容或者相关资源侵犯到您的合法权益，或者您认为存在问题，那么请您务必点此举报或投诉！
本帖最后由 qiqiminmin 于 2016-1-28 05:55 编辑
Quote***链接停止解析***
现在winrt下用composition做动效更好一点，虽然我觉得会复杂但至少效果好
composition用于控件是比较适合的。
用于 Frame的跳转似乎不太妥当吧。(￣▽￣)。。。。
其实含义不同的。
在 Page的navigation中，牵涉到两个页面的动画。 当前界面和下一个界面。
其实微软的PaneThemeTransition，做得还行，前后两个界面都有动画的，你可以仔细看看。但是他不能区分是进入了新界面，还是上一个界面返回到这个界面。
我做的其实就是用一个全局变量，事先告诉了PaneThemeTransition，到底是从左到右，还是从右到左。所以只是讨了个巧。希望微软以后向事情更加周到些。
本帖最后由 tmp00000 于 2016-2-1 18:04 编辑
解决这个问题是有很多办法的。我把苹果动画的定义写成了一个类，只要继承这个类就能有苹果的导航动画。
[mw_shl_code=vbnet,true]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[/mw_shl_code]
本帖最后由 qiqiminmin 于 2016-2-1 23:21 编辑
Quote***链接停止解析***
解决这个问题是有很多办法的。我把苹果动画的定义写成了一个类，只要继承这个类就能有苹果的导航动画。
[mw ...
(￣▽￣)"，您没测试过吧。将来作为程序员，最好养成，自己的程序，自己起码在自己设备上跑过。
我为什么不用NavigatedTo或者Navigating，就是因为使用这样的之前，页面的动画已经过去了。 比如返回键的时候，最好在点返回键的时候， 你使用NavigatingFrom，动画已经开始跑起来了。
页面切换的动画设置，不能用NavigatedTo或者NavigatingTo。 而且两个界面都要牵涉到。
NavigatedTo和NavigatingTo是说页面切换完或者正在切换，但是Xaml已经初始化完成了，并显示了。这两个是用来，“在界面完全显示后，修改数据，或者修改显示信息用的，但并不能更改页面切换动画”
本帖最后由 qiqiminmin 于 2016-2-1 23:16 编辑
Quote***链接停止解析***
我是在Navigating事件 设置Frame的ContentTransitions的
应该可行，自己注意一下进入，退出后动画实现就行。
本帖最后由 tmp00000 于 2016-2-1 23:44 编辑
Quoteqiqiminmin 发表于 2016-2-1 23:00
(￣▽￣)“，您没测试过吧。将来作为程序员，最好养成，自己的程序，自己起码在自己设备上跑过。
我为什 ...
我测试过了,在我的电脑上达到了预期效果。这种方法有个优点，是容易添加后退和前进的手势。
这是添加了前进和后退手势之后的代码：
[mw_shl_code=vbnet,true]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) * 3 < DeltaX AndAlso DeltaX > 200 Then
If trans.X > 0 Then
If Frame.CanGoBack Then Frame.GoBack()
Else
If Frame.CanGoForward Then Frame.GoForward()
End If
End If
End Sub
End Class[/mw_shl_code]
本帖最后由 qiqiminmin 于 2016-2-2 03:45 编辑
(￣▽￣)"，真的？？？？？？ 真的确定两个页面的动画都正常? 我用gif去录了，如果用您的方法只要超过三个页面，本来是两个界面的动画同时开始，但是常常只有后一个动画。
我用了10几个界面，多次往返测试，我自己的是没问题的，您可以试试您自己的，只要超过3层界面，就会有问题了，
错误现象就是，有时前一个界面动画强制取消了，你可以看到本身是要往左退出的，结果突然一下子就过去了，原因就是如果是用NavigatedTo，那个通话已经跳过去了，两个动画不是同步的，这也是我为什么要舍弃。你可以看看我的gif，是非常顺滑的。
本帖最后由 tmp00000 于 2016-2-2 11:23 编辑
Quoteqiqiminmin 发表于 2016-2-2 02:04
(￣▽￣)“，真的？？？？？？ 真的确定两个页面的动画都正常? 我用gif去录了，如果用您的方法只要超过三 ...
我测试了三种切换（新建，前进和返回），新建看起来退出动画播放不完整（前半截子不见了），前进和返回的动画几乎都是正常播放的。
这是测试前进和返回的视频
http://pan.baidu.com/s/1mh2DNfi
本帖最后由 qiqiminmin 于 2016-2-2 11:43 编辑
Quote***链接停止解析***
我测试了三种切换（新建，前进和返回），新建看起来退出动画播放不完整（前半截子不见了），前进和返回的 ...
难道是我的电脑不太好？？(￣▽￣)"。 我自己的真的是掉了一些。。。。我反反复复测了很多，我发现会掉。您的视频，各个途径都说有毒。。。。。连google都说有毒。。。win10也说有毒。没关系，您自己用着好就是。满足自己需求就行，我的win10如果是使用NavigateFrom修改PageThemeTransition会掉一些。
本帖最后由 tmp00000 于 2016-2-2 12:43 编辑
Quoteqiqiminmin 发表于 2016-2-2 11:38
难道是我的电脑不太好？？(￣▽￣)“。 我自己的真的是掉了一些。。。。我反反复复测了很多，我发现会掉。 ...
视频有毒？是下载下来提示有问题吗？我更新了最新的windows defender定义也没发现什么。
我用Lumia 1520测试了，在手机上表现得跟电脑上差不多。
如果真的有感染zip和mp4文件的病毒，那么我试试它会不会感染Gif。
http://pan.baidu.com/s/1eRe31CY
Quote***链接停止解析***
视频有毒？是下载下来提示有问题吗？我更新了最新的windows defender定义也没发现什么。
我用Lumia 1520 ...
也许是我多虑吧，我之前也是那样弄，但是感觉有丢失动画现象，就改在Navigate使用全局变量修改，保证每次初始化的时候能改变
