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

发布于 2024-12-28 17:56:17 字数 471 浏览 0 评论 0原文

在使用 HTML 的 Metro 应用程序中，建议使用片段导航到不同页面 (此处解释）。

如何在不编写大量代码的情况下为片段之间的导航设置动画？

1）navigate方法在很多例子中都有展示，但似乎没有动画控制：

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

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

难道这不应该是一个单行，因为这是一种常见的情况吗？

原文

In Metro apps that use HTML it is recommended to use fragments to navigate to different page (explained here).

How can you animate navigation between fragments without writing lots of code?

1) The navigate method is shown in many examples, but doesn't seem to have animation control:

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

2) The is a method WinJS.UI.Animation.enterPage, but do you have to give up navigate's history management to use this? Also the documentation is pretty sketchy still.

Shouldn't this be a one liner because it's such a common scenario?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

李不 2025-01-04 17:56:17

WinJS 支持动画并且不干扰 Fragment 导航。动画是不改变历史且易于使用的视觉效果。

通常，您会同时执行这两项操作：

1) 使用导航到新片段

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 包含所有其他元素）。

WinJS has support for animations and does not interfere with Fragment navigation. Animations are visual effects that do not change history and are simple to use.

Typically you would do both at the same time:

1) Navigate to a new fragment using

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

2) Within myPage.js, the enterPage animation can be used:

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);
    }
}

This will animate everything on the page, from position 500,500 to the final resting positions (assuming rootId is a containing all your other elements).

回复收藏 0 原文

老子叫无熙 2025-01-04 17:56:17

我只是想补充一点，当您定义页面时，其中一个函数是 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;
    },
}

I just wanted to add that when you define the page, one of the functions is the getAnimationElements which you can use to animate elements in your page. e.g:

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;
    },
}

Can read more about it here:

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

回复收藏 0 原文

~没有更多了~