Как вы анимируете навигацию в приложениях Metro Windows 8?

Question

в приложениях Metro, которые используют HTML, рекомендуется использовать фрагменты для навигации на разную страницу ( объяснил здесь ).

Как вы можете анимировать навигацию между фрагментами без написания много кода?

1) метод навигации показан во многих примерах, но не имеет контроля анимации:

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

.

2) То есть метод winjs.ui.animation.enterpage, но вы должны отказаться от управления историей навигации, чтобы использовать это?Также документация довольно схематично все еще.

Разве это не будет один лайнер, потому что это такой общий сценарий?

Answer 1

Winjs имеет поддержку анимации и не вмешивается в фрагмент навигации.Анимации - это визуальные эффекты, которые не изменяют историю и просты в использовании.

Обычно вы сделаете оба одновременно:

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 до финальных позиций отдыха (при условии, что REID - это содержит все ваши другие элементы).

Answer 2

Я просто хотел добавить, что когда вы определяете страницу, одна из функций - это генерация, которые вы можете использовать для анимации элементов на вашей странице.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;
    },
}

.

Можно прочитать больше об этом здесь:

http://msdn.microsoft.com/en--US / Библиотека / Windows / Apps / HH972605.aspx