如何在Windows 8 Metro应用中制作导航动画？

Question

在使用HTML的Metro应用中，建议使用片段(navigation fragments)来导航到不同的页面(在此处解释)。

如何在不编写大量代码的情况下对片段之间的导航进行动画处理?

1) navigate方法在许多示例中都有展示，但似乎没有动画控制:

WinJS.Navigation.navigate('/html/myNextPage.html');

2) 有一个方法WinJS.UI.Animation.enterPage，但是你必须放弃导航的历史管理才能使用它吗？此外，文档仍然相当简略。

因为这是如此常见的情况，所以这不应该是一行代码吗？

- whitneyland

Answer 1

WinJS支持动画，并且不会干扰片段导航。动画是不改变历史记录的视觉效果，使用起来非常简单。

通常情况下，您可以同时执行以下两个操作：

1）使用WinJS导航到新片段

2）在导航期间使用动画效果

WinJS.Navigation.navigate('/html/myPage.html');

2) 在myPage.js中，可以使用enterPage动画：

WinJS.UI.ui.Pages.define("/html/myPage.html", {
    ready: function (element, options) {
        var offset = { top: "500px", left: "500px" };
        var el = document.getElementById("rootId")  // id of any element on myPage.html
        WinJS.UI.Animation.enterPage(el, offset);
    }
}

这将使页面上的所有元素动画化，从位置500,500到最终停止位置（假设rootId是包含所有其他元素的容器）。

- Tiago Andrade e Silva

---

我已经查看了很多示例，没有找到任何简洁的方法来动画化片段。你有具体的例子吗？或者对点1和2有任何建议？ - whitneyland

1. navigate方法负责加载页面，与视觉动画无关。
2. 在示例中，您可以看到正在使用的过渡效果。例如：transitionPage = WinJS.UI.Animation.transitionPage(incomingTwoStage, offset, outgoing);

- Tiago Andrade e Silva

重新改写了你的回答，以更详细的方式解释了一下 :). 我会在我的编辑得到批准后将你的回答标记为正确。 - whitneyland

Answer 2

我只想补充一点，当您定义页面时，其中一个功能是getAnimationElements，您可以使用它来为页面中的元素添加动画效果。例如：

WinJS.UI.ui.Pages.define("/html/myPage.html", {
    ready: function (element, options) {

    },
    getAnimationElements: function () {
        var elements = [[this.element.querySelector("yourElement1")], [this.element.querySelector("yourElement2")]];
        return elements;
    },
}

您可以在这里了解更多相关信息：

http://msdn.microsoft.com/en-us/library/windows/apps/hh972605.aspx

- B Z