Grafica e animazioni con le Composition API nella Universal Windows Platform

di , in Windows 10,

Viviamo in un mondo che, almeno tecnologicamente parlando,ha una evoluzione rapidissima.

Fino a pochissimi anni fa si trovavano applicazioni sviluppate in VB6 (senza l'utilizzo del .NET Framework) in cui, la presenza di un database era fondamentale. La procedura era sempre quella: prima si costruiva il database, poi veniva l'applicazione. Oggi l'approccio è esattamente l'opposto: prima viene progettata l'applicazione e, in secondo momento, la struttura del database, che magari non gestiamo direttamente, quindi dobbiamo fare finta che non esista.

In questo periodo, d'altro canto, ci stiamo muovendo verso un nuovo approccio, ovvero quello comunemente chiamato User Experience First (o anche del design first). E' fondamentale che l'applicazione sia prima di tutto usabile, bella da vedere e, poi, che sia fluida, solo in un secondo momento è fondamentale che funzioni e che mostri dei dati prelevati da un database.

La mente umana, la parte del gusto estetico, c'è poco da fare, è in grado di distinguere a prima vista un'interfaccia bella da una brutta. Creare un'interfaccia quanto più possibile pulita, responsiva, magari personalizzata sulle esigenze dell'utente (pensiamo solo alla scelta del tema chiaro/scuro) ci aiuta a vendere di più la nostra applicazione e a differenziarci dalla massa.

Proprio per questo Microsoft ha incluso, a partire da Windows 10 November Update (10586), le nuove Windows Composition API, che ci permettono di sfruttare l'accelerazione grafica per creare quello che è definito "engadgment" verso l'utente.

Da Desktop Windows Manager a Windows Composition

Il motore di Windows Composition è anche conosciuto come Desktop Windows Manager: nato con il sistema operativo Windows Vista nel 2006, consentiva di creare gli effetti di blur attorno alle finestre delle applicazioni e nella barra del titolo.

Purtroppo, per via della complessità e della qualità delle applicazioni, non è mai stato sfruttato a dovere. Nel frattempo, per risolvere questo problema di scarsa adozione, in Windows 7 è stata aggiunta la possibilità produrre visual accattivanti con Direct2D e Direct3D, così da poter usufruire di un rendering con accelerazione grafica, riducendo quindi il carico computazionale sulla CPU e aumentando le prestazioni.

Questo sistema si è poi evoluto in Windows 8, cambiando addirittura nome: era nato finalmente DirectComposition, che permetteva anche alle applicazioni WinRT di creare degli effetti molto interessanti.

L'ultimo passo di questa lunga evoluzione è avvenuto, infine, in Windows 10, in particolare con il November Update, dalla versione 10586 in poi, grazie all'introduzione delle Windows Composition API.

Il namespace Windows.UI.Composition

Le API sono incluse nel namespace Windows.UI.Composition e, non solo ci permettono di creare degli oggetti, ma ci danno anche la possibilità di interagire su questi "visual" e di applicare animazioni o effetti.

Da quando esiste DirectX, non è mai mancata la capacità di applicare effetti o comunque lavorare a livello di GPU, il problema principale era la forte complessità per lo sviluppatore medio che è, nella maggioranza dei casi, abituato ad applicazioni molto semplici realizzate con XAML.

Microsoft ha quindi capito che, per aiutare gli sviluppatori XAML, era necessario introdurre un nuovo livello all'interno dello stack della composizione della UI: il Visual Layer.

Così facendo, le persone che conoscono DirectX possono continuare a lavorare sia a basso livello che ad un livello superiore, mentre chi lavora con XAML è in grado di interagire sia a livello di Framework Layer che a livello di Visual Layer attraverso le Composition API, ottenendo così il massimo delle prestazioni ma con una curva di apprendimento veramente minima.

Prima di vedere i primi esempi di codice, è bene introdurre un paio di concetti:

  • Visual:rappresenta l'oggetto base che include la maggior parte delle proprietà;
  • ContainerVisual: un oggetto che deriva da Visual e aggiunge la possibilità di creare dei figli;
  • SpriteVisual: deriva da ContainerVisual e aggiunge la possibilità di creare brush visibili sullo schermo sotto forma di pixel.

Quali sono questi brush? Semplicemente si dividono in tre categorie:

  • CompositionColorBrush: un colore;
  • CompositionEffectBrush: un effetto;
  • CompositionSurfaceBrush: la possibilità di disegnare una qualsiasi superfice (esempio una immagine).

Vediamo come si crea il primo elemento tramite le Composition API e proviamo a mostrarlo a schermo.

Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Grafica e animazioni con le Composition API nella Universal Windows Platform 1010 2
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti