Transizioni, Animation Library e HTML5

Nell'articolo precedente, abbiamo accennato al fatto che, per facilitare gli sviluppatori nell'utilizzo di animazioni ed evitare al contempo inconsistenze nella user experience di applicazioni diverse, Microsoft ha sviluppato una collezione di animazioni che da utilizzare per le proprie app. Queste animazioni sono in linea con il classico "look and feel" di Windows 8, anche perché i nuovi controlli introdotti da WinRT, come i controlli GridView, ListView e FlipView, utilizzano proprio questa libreria per le loro transizioni.

Queste animazioni sono raccolte sotto il namespace WinJS.UI.Animation e sono elencate qui di seguito (per maggiori dettagli e video d'esempio sugli effetti di transizione inclusi nella libreria si rinvia alla documentazione ufficiale su MSDN). Per ciascuna animazione sono indicate anche le relative API.

Animazione	Descrizione	API / Funzioni
Page transition	Applica un'animazione al contenuto di una pagina in entrata o in uscita dalla vista.	enterPage exitPage
Content transition	Applica un'animazione a uno o più contenuti in entrata o in uscita dalla vista.	enterContent exitContent
Fade in/out	Applica un effetto di dissolvenza a elementi o controlli.	fadeIn fadeOut
Crossfade	Aggiorna il contenuto di un'area.	crossFade
Pointer up/down	Fornisce un feedback visivo al tocco o al clic su un tile.	pointerUp pointerDown
Expand/Collapse	Mostra o nasconde informazioni aggiuntive.	createExpandAnimation createCollapseAnimation
Reposition	Sposta un elemento in una nuova posizione.	createRepositionAnimation
Show/Hide popup	Mostra o nasconde un popup in primo piano.	showPopup hidePopup
Show/Hide edge UI	mostra o nasconde elementi di interfaccia utente basati su bordi (come l'AppBar, per esempio).	showEdgeUI hideEdgeUI.
Show/Hide panel	Mostra o nasconde pannelli di grandi dimensioni basati su bordi, come un riquadro attività o una tastiera personalizzata.	showPanel hidePanel
Add/Delete from list	Aggiunge o elimina un elemento da un elenco.	createAddToListAnimation createDeleteFromListAnimation
Add/Delete from search list	Aggiunge o elimina un elemento da un elenco quando si filtrano i risultati della ricerca.	createAddToSearchListAnimation createDeleteFromSearchListAnimation
Peek	Aggiorna il contenuto di un riquadro (ad esempio per scorrere un insieme di foto).	createPeekAnimation
Badge update	Aggiorna un badge numerico.	updateBadge
Start/End una operazione di drag oppure drag-between	Fornisce un feedback visivo durante un'operazione di trascinamento della selezione (drag and drop).	dragSourceStart dragSourceEnd dragBetweenEnter dragBetweenLeave
Swipe hint	Indica che un riquadro supporta l'interazione tramite scorrimento rapido.	swipeReveal
Swipe select/deselect	Esegue la transizione di un riquadro a uno stato di selezione con scorrimento rapido.	swipeSelect swipeDeselect

Tutte queste animazioni sono implementate nel file ui.js, automaticamente referenziato da qualunque progetto Windows Store in HTML5/JavaScript. Il seguente estratto mostra, a titolo d'esempio, la definizione dei metodi fadeIn e fadeOut:

fadeIn: function (shown) {
        return thisWinUI.executeTransition(
            shown,
            {
                property: "opacity",
                delay: 0,
                duration: 250,
                timing: "linear",
                from: 0,
                to: 1
            });
    },
    fadeOut: function (hidden) {
        return thisWinUI.executeTransition(
            hidden,
            {
                property: "opacity",
                delay: 0,
                duration: 167,
                timing: "linear",
                to: 0
            });
    },

Senza entrare nei dettagli, è interessante comunque notare come ciascuna di queste funzioni incapsuli la logica della corrispondente transizione.

Prendiamo ad esempio le funzioni enterContent ed exitContent, che permettono di animare parti di contenuto all'interno di una pagina, ad esempio per mostrare del contenuto che non era ancora disponibile quando la pagina è stata caricata, oppure per aggiornare del contenuto che nel frattempo è cambiato. Il prossimo snippet mostra un esempio del loro utilizzo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo.Html.it.Animations.JS</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    <!-- Demo.Html.it.Animations.JS references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <style>
        #input {
            margin: 10px;
        }
        .transitionTarget {
            width: 300px;
            height: 300px;
            background-color: #00B6FF;
            text-align: center;
            padding: 20px;
        }
        buttons {
            float: left;
        }
    </style>
</head>
<body>
    <div id="input">
        <p class="transitionTarget">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer vel nunc nisl. Aenean vulputate ut odio a commodo. Ut vitae tortor lacus. Nulla auctor facilisis ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed gravida porta mi. Curabitur ac mi adipiscing, mattis diam et, bibendum leo. Donec at orci id augue mattis faucibus. Mauris pellentesque libero urna, et sagittis quam euismod id. Morbi sit amet pellentesque purus. Phasellus sagittis consectetur nisi sed viverra.
        </p>
        <div id="buttons">
            <button id="btnTransitionIn">Enter content</button>
            <button id="btnTransitionOut">Exit content</button>
        </div>
    </div>
</body>
</html>

Questo il relativo codice JavaScript:

app.onloaded = function () {
    btnTransitionIn.addEventListener("click", enterContent);
    btnTransitionOut.addEventListener("click", exitContent);
}
function enterContent() {
    WinJS.UI.Animation.enterContent(document.querySelectorAll(".transitionTarget", null));
}
function exitContent() {
    WinJS.UI.Animation.exitContent(document.querySelectorAll(".transitionTarget"), null);
}

Un'altra transizione di applicazione generalizzata è l'effetto fade in/out, che permette di far apparire o sparire gradualmente dallo schermo un elemento o un controllo. Quello che segue è un esempio di applicazione di questo effetto a un elemento.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo.Html.it.Animations.JS</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    <!-- Demo.Html.it.Animations.JS references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <style>
        #input {
            margin: 10px;
        }
        .fadeTarget {
            width: 300px;
            height: 300px;
            background-color: #00B6FF;
            text-align: center;
            padding: 20px;
        }
        buttons {
            float: left;
        }
    </style>
</head>
<body>
    <div id="input">
        <p class="fadeTarget">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Integer vel nunc nisl. Aenean vulputate ut odio a commodo.
            Ut vitae tortor lacus. Nulla auctor facilisis ullamcorper.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Sed gravida porta mi. Curabitur ac mi adipiscing, mattis diam et, bibendum leo.
            Donec at orci id augue mattis faucibus. Mauris pellentesque libero urna, et sagittis quam euismod id.
            Morbi sit amet pellentesque purus. Phasellus sagittis consectetur nisi sed viverra.
        </p>
        <div id="buttons">
            <button id="btnFadeIn">Fade In</button>
            <button id="btnFadeOut">Fade Out</button>
        </div>
    </div>
</body>
</html>

Questo invece il codice JavaScript utilizzato:

app.onloaded = function () {
    btnFadeIn.addEventListener("click", applyFadeIn);
    btnFadeOut.addEventListener("click", applyFadeOut);
}
function applyFadeIn() {
    WinJS.UI.Animation.fadeIn(document.querySelectorAll(".fadeTarget"));
}
function applyFadeOut() {
    WinJS.UI.Animation.fadeOut(document.querySelectorAll(".fadeTarget"));
}

È interessante notare come tutte le API esposte dall'Animation Library restituiscono un oggetto promise, per cui è possibile concatenare più transizioni una dietro l'altra, o eseguire altro codice al termine della transizione, semplicemente sfruttando le funzioni then e done.

Le transizioni messe a disposizione dall'Animation Library di Microsoft dovrebbero poter coprire la maggior parte degli scenari. Bisogna ricordare infatti che è sempre preferibile usare una delle animazioni incluse nella libreria, perché assicurano la coerenza della user experience dell'app con il complessivo ecosistema di Windows 8.

Creare animazioni con l'elemento canvas

Prima di concludere questo excursus su animazioni e transizioni, merita di essere accennata anche un'altra modalità di animare la UI della tua applicazione Windows Store, basata questa volta sull'elemento DOM canvas. Questo elemento è parte delle specifiche HTML5 (alle quali si rinvia per ulteriori approfondimenti) e rappresenta un'area in cui è possibile disegnare elementi grafici come linee, curve, immagini e animazioni.

La seguente definizione HTML mostra una pagina con un semplice canvas.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo.Html.it.Animations.JS</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    <!-- Demo.Html.it.Animations.JS references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <canvas id="myArea"/>
</body>
</html>

Per disegnare su un canvas, è necessario accedere al relativo oggetto 2D Context. Questo oggetto, che implementa l'interfaccia CanvasRenderingContext2D, può essere recuperato tramite il metodo getContext, come mostrato qui di seguito:

var c = myArea.getContext("2d");

Questo oggetto espone una ricca serie di metodi e proprietà per disegnare figure geometriche, immagini, effetti particolari come ombre e trasparenze, ecc. Ad esempio, il seguente codice disegna un cerchio di 20 pixel di raggio, di colore arancione:

c.beginPath();
c.fillStyle = "orange";
c.arc(x, y, radius, 0, Math.PI * 2, true);
c.closePath();
c.fill();

Per animare il cerchio, in modo che rimbalzi lungo i bordi dello schermo, possiamo sfruttare la funzione setInterval (già incontrata nell'articolo dedicato ai pattern asincroni in JavaScript) per invocare i metodi draw e step a intervalli regolari, modificando le coordinate del cerchio (x e y) in funzione del tempo. Il prossimo snippet mostra il codice completo:

app.onloaded = function () {
    myArea.width = window.outerWidth;
    myArea.height = window.outerHeight;
    c = myArea.getContext("2d");
    setInterval(function () { draw(); step(); }, 10);
}
var c;
var dx = 5, dy = 5, r = 20, x = r, y = r;
function draw() {
    c.clearRect(0, 0, c.canvas.width, c.canvas.height);
    c.beginPath();
    c.fillStyle = "orange";
    c.arc(x, y, r, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();
}
function step() {
    if (x > c.canvas.width - r || x < r) dx *= -1;
    if (y > c.canvas.height - r || y < r) dy *= -1;
    x += dx;
    y += dy;
}

Come abbiamo visto, animazioni e transizioni sono parte integrante della User Experience in Windows 8 e il loro utilizzo è relativamente semplice grazie alle API messe a disposizione. Ricordiamoci sempre di non eccedere con gli effetti e di ragionare sempre nell'ottica di un utente che deve usare l'applicazione e che non ha bisogno di animazioni superflue.