Rendere le applicazioni sempre più dinamiche e accattivanti con delle animazioni è spesso complesso, in quanto le competenze tecniche richieste devono spaziare tra diversi ambiti, tra cui il designer, l'animatore e lo sviluppatore che dovrebbe lavorare all'implementazione effettiva. L'implementazione, solitamente, viene spesso fatta in DirectX oppure sfruttando le Windows Composition API (che abbiamo già avuto modo di affrontare in script precedenti), proprio per via del fatto che si vogliono mantenere alte le performance dell'animazione stessa e i 60fps per l'utente che la potrà vedere fluida.
Purtroppo però, come abbiamo visto in passato, le API non sono banali e richiedono anche una certa conoscenza matematica per la realizzazione. Per questo Airbnb, la nota azienda che si occupa di affitti, ha creato una libreria per le sue applicazioni, chiamata Lottie, che è in grado di convertire animazioni fatte in Adobe After Effects in file JSON, che poi possono essere interpretati dall'applicazione stessa tramite un plugin. Anche per la Universal Windows Platform è disponibile un porting della versione ufficiale, disponibile qui: https://github.com/azchohfi/LottieUWP
Per l'implementazione all'interno delle nostre applicazioni, sarà sufficiente installare il pacchetto di NuGet LottieUWP, per avere accesso al nuovo componente LottieAnimationView che permette di renderizzare il file JSON creato in precedenza, come mostrato nell'esempio seguente:
<Page
xmlns:lottieUwp="using:LottieUWP"
...>
<lottieUwp:LottieAnimationView FileName="Assets/loader.json"
RepeatCount="-1"
AutoPlay="True" />
<!-- ... --!>
</Page>Il file laoder.json è stato pre-importanto all'interno della cartella degli Asset dell'applicazione stessa. Questo sistema rende più semplice integrare le animazioni poiché il render verrà effettuato dal componente LottieAnimationView stesso e, inoltre, sono già moltissimi i siti web che permettono di scaricare migliaia di asset JSON con le animazioni pre-costruite.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Come automatizzare il download dei report di billing da GitHub Enterprise
Testare le API di Azure Resource Manager con API Playground
Caching risposte AI con Microsoft.Extensions.AI
Ottimizzare le API in ASP.NET con Feature Flags
Utilizzare il Null conditional assignment di C# 14
Effettuare chiamate API tramite GitHub App
Breaking the Legacy Barrier: how to Use AI to Modernize Applications
Integrare LLM alle nostre applicazioni in .NET con MCP
Leggere i parametri da riga di comando in una file based app .NET
Shadow DOM open e closed sulla gestione delle pagine
Logica Graceful Degradation in HTML e CSS
Canary release con .NET Aspire
I più letti di oggi
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Accedere a risorse e immagini in Windows Store app di Windows 8
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Permettere il Drag-and-drop solo su zone predefinite con Silverlight 2.0
- Consumare dati binari in realtime lato client con ASP.NET Core SignalR
- Effetto turnstile su tutte le pagine con il Windows Phone Toolkit
- Personalizare l'icona e le funzionalità di un sito web per iOS e IE
- Caricamenti veloci da CDN e fallback locale con ASP.NET Core
- Utilizzare dati in formato XML in XAML
- Accedere a dati esposti con WebService con Silverlight 1.0


