Come si animano la navigazione nelle app della metropolitana di Windows 8?

Question

In app Metro che utilizzano HTML Si consiglia di utilizzare i frammenti per navigare verso la pagina diversa ( spiegato qui ).

Come puoi animare la navigazione tra frammenti senza scrivere un sacco di codice?

1) Il metodo navigazione è mostrato in molti esempi, ma non sembra avere il controllo dell'animazione:

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

.

2) È un metodo winjs.ui.animation.enterpage, ma devi rinunciare alla gestione della storia della navigazione per usarlo?Anche la documentazione è ancora piuttosto abbozzata.

Non dovrebbe essere un normale fodera perché è uno scenario così comune?

Answer 1

WinJS ha il supporto per le animazioni e non interferisce con la navigazione del frammento.Le animazioni sono effetti visivi che non cambiano la cronologia e sono semplici da usare.

Tipicamente faresti entrambi allo stesso tempo:

1) Passare a un nuovo frammento usando

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

.

2) All'interno di mypage.js, è possibile utilizzare l'animazione di integrazione:

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

.

Questo animerà tutto sulla pagina, dalla posizione 500,500 alle posizioni di riposo finale (presumendo il rootide è un contenente tutti i tuoi altri elementi).

Answer 2

Volevo solo aggiungere che quando si definisce la pagina, una delle funzioni è il getanimationelement che è possibile utilizzare per animare gli elementi nella tua pagina.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;
    },
}

.

può leggere di più qui:

http://msdn.microsoft.com/en-US / Biblioteca / Windows / Apps / HH972605.aspx