我的页面转换看起来很笨 - 我应该如何进行页面动画？

Question

我有一个有几页的应用程序。当我在页面之间移动时（使用NavigationService），我有一个动画使文本飞出来 - 想想标准WP动画或Zune客户端。

动画本身看起来很合理，但问题似乎是动画结束和加载新页面之间的差距。当所有元素完成飞出并显示新页面时，似乎有轻微的延迟。

这让我的页面过渡感觉有点笨重。

如何在转换完成后立即显示目标页面以避免这种情况？

fwiw - 我只是使用导航服务在页面之间导航。

this.NavigationService.Navigate(new Uri("/SomePage.xaml", UriKind.Relative));

Answer 1

我最近试图在我的一个应用程序中解决同样的问题。我的解决方案涉及两个主要部分：

1. 将大量工作从页面导航时间转移到应用启动时间。
2. 通过在页面转换动画中使用烟雾和镜子，隐藏无法移动到应用启动时间的不可避免的工作。

将工作从页面转换时间移至应用启动时间

在我的应用中，我有一个主页面，其中包含很长的项目列表，然后是一个详细信息页面，其中包含有关特定项目的大量详细信息。从我的主页面向前导航到详细信息页面花了很长时间，看起来非常粗糙。主要问题是它需要花费大量时间（即：超过一整秒）才解析XAML并实例化新页面。为了解决这个问题，我获取了我的详细信息页面的全部内容并将其移动到UserControl中，并在应用程序启动时实例化该控件的全局实例。实际的详细信息页面现在是一个空shell，包含实例化页面所需的最小XAML。在该页面后面的代码中，我处理添加单例UserControl作为页面的唯一子元素，然后在OnNavigatedFrom处理程序中，我从页面中删除UserControl。这允许我将XAML解析和场景初始化逻辑从页面导航时间转移到app启动时间。现在显然这使我的应用程序需要更长的时间来启动，但考虑到我的应用程序的使用模式，权衡是值得的。

使用动画技巧隐藏不可避免的作品

之前的步骤并没有完全解决问题，因为仍然需要一些时间来绑定/设置详细信息页面的所有实际内容，以及合成器线程执行初始布局所需的时间和渲染页面。不幸的是，你可以做很多事情。我尝试通过播放页面过渡动画，尽可能多地使用烟雾和镜子来解决它。例如，我最初有一个动画，它将使用完整的90度旋转将页面内容从屏幕上旋转，然后使用另一个90度旋转旋转新页面的内容。我改变那些只是旋转部分方式，同时褪色不透明度为0 / 0.如果这个动画执行得足够快，那么人类大脑做了一个惊人的工作填补空白并欺骗观众相信页面旋转所有方式。我的ForwardOut动画实际上只旋转了50度，但观众并没有真正注意到这一点，并且在他们的脑海中，他们仍然在真实动画完成后很长时间内推断动画的其余部分。这有助于掩盖页面导航过程中不可避免的工作。