Una delle novità forse più rilevanti del Creators Update di Windows 10, è la possibilità di creare sofisticate animazioni di transizione tra una pagina e l'altra. Questo tipo di animazioni non sono una novità e sono state una parte fondamentale della UX di Windows fin dalla versione 8.
La novità consiste nel poter agire sui singoli elementi dell'interfaccia grafica in modo tale che l'animazione crei l'effetto di spostamento degli stessi da una pagina all'altra.
Questa tecnica permette di enfatizzare determinati elementi dell'interfaccia grafica, così che l'utente seguendo il percorso dell'animazione presti maggior attenzione a questi elementi.
Il cuore di questa tecnica è la classe ConnectedAnimation, recuperabile traminte ConnectedAnimationService. Per prima cosa, abbiamo bisogno di un elemento grafico da animare: per questo esempio è sufficiente una semplice immagine nella pagina di partenza.
<Image x:Name="MySourceImage" Width="200" Height="200" Stretch="Fill" Source="Assets/MyImage.png" />
E una nella pagina di destinazione:
<Image x:Name="MyDestinationImage" Width="400" Height="400" Stretch="Fill" Source="Assets/MyImage.png" />
Iniziamo a preparare l'animazione e, poco prima di navigare alla pagina di destinazione, eseguiamo la seguente riga di codice per richiamare il metodo PrepareToAnimate:
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("image", MySourceImage);
E poi proseguiamo con la navigazione:
Frame.Navigate(typeof(MyDestinationPage));
Nella pagina di destinazione eseguiamo l'override del metodo OnNavigatedTo e richiamiamo il metodo GetAnimation, per recuperare l'animazione:
protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); ConnectedAnimation imageAnimation = ConnectedAnimationService.GetForCurrentView().GetAnimation("Myimage"); if (imageAnimation != null) { imageAnimation.TryStart(DestinationImage); } }
E, infine, richiamiamo il metodo TryStart per eseguire l'animazione.
In questo modo, le due immagini, di due pagine differenti, grazie all'animazione sembreranno una sola immagine che, all'atto di navigare alla nuova pagina, ha cambiato posizione e dimensioni.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare token per autenicarsi sulle API di GitHub
Disabilitare automaticamente un workflow di GitHub (parte 2)
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare Tailwind CSS all'interno di React: primi componenti
Eseguire query verso tipi non mappati in Entity Framework Core
Eseguire attività basate su eventi con Azure Container Jobs
Gestire i null nelle reactive form tipizzate di Angular
Short-circuiting della Pipeline in ASP.NET Core
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Usare un KeyedService di default in ASP.NET Core 8
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- Definire stili a livello di libreria in Angular
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)