C# MAUI animazione di un immagine

In questo articolo vedremo come utilizzare alcune classi messe a disposizione del Framework MAUI per gestire le animazioni.
In particolare vedremo come spostare un’immagine dal lato sinistro al lato destro, e capovolgendola, il tutto con poche righe di codice, il tutto come mostrato nelle figure successive.

Figura 1 – L’immagine che si sposta nella form

Figura 2 – L’immagine che ruota 

Utilizzeremo la versione 7 del Framework ed il linguaggio di programmazione C#, ma il codice è utilizzabile anche con altre versioni del Framework.

Creazione del progetto

Si crea un nuovo progetto di tipo MAUI, indicando la versione 7 o altra del Framework, impostando un nome ed il percorso di dove si vuole salvare il progetto.
Una volta creato il progetto, apriamo il file XAML, che è la parte nel quale si trovano i controlli visibili, lasciamo come controllo quello immagine e la label, il resto viene tutto cancellato compresa la parte del codice al quale fa riferimento.
Per il controllo Label, impostiamo la proprietà “Name” con il valore “lblTesto” e la proprietà “Text” con il valore “Esempio Animazione” il tutto come mostrato nel frammento di codice qui di seguito.

XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MauiGrafica.MainPage">
   <ScrollView >
       <VerticalStackLayout 
           Spacing="25"
           Padding="30,0"
           VerticalOptions="Center">
           <Image 
               Source="dotnet_bot.png"
               x:Name="imageLogo"
               SemanticProperties.Description="Logo Maui!"
               HeightRequest="200"
               HorizontalOptions="Center" />
           <Label
               x:Name="lblTesto"
               Text="Esempio Animazione"
               SemanticProperties.HeadingLevel="Level1"
               FontSize="32"
               HorizontalOptions="Center"  />
       </VerticalStackLayout>
   </ScrollView>
</ContentPage>

Stesura del codice

Terminata la creazione del progetto e l’impostazione dei controlli non resta che scrivere il codice. Passiamo in visualizzazione codice, nel file CS, e nell’evento del costruttore della classe, dopo “InitializeComponent” scriviamo il codice per l’animazione.
Utilizzeremo la classe “Animation” per eseguire i vari effetti, in particolare impostando alcune proprietà, daremo l’effetto di spostamento indicando dove spostarsi (Destra, sinistra, alto e basso) ed anche il tempo di ogni singola azione.
Ogni effetto sarà un oggetto della classe “Animation” che saranno aggiunti ad un oggetto master, che conterrà tutti i vari oggetti.
Di seguito il frammento completo delle suddette operazioni nel linguaggio C#.

C#
public MainPage()
       {
           InitializeComponent();
           var Animazione = new Animation();
           var SpostaSinistraAnimazione = new Animation(v => imageLogo.TranslationX = v, 0, 250);
           var TornaIndietroAnimazione = new Animation(v => imageLogo.TranslationX = v, 250, 200);
           var SpostaDestraAnimazione = new Animation(v => imageLogo.TranslationX = v, 500, 700);
           var ruotaAnimazione = new Animation(v => imageLogo.Rotation = v, 0, 360);
           var MuoviRotazioneAnimazione = new Animation(v => imageLogo.TranslationX = v, 200, 500);
           var AnimazioneAlta = new Animation(v => imageLogo.TranslationY = v, 0, -200);
           var AnimazioneBassa = new Animation(v => imageLogo.TranslationY = v, -200, 0);
           var RotazioneAnimazioneSu = new Animation(v => imageLogo.TranslationY = v, 0, -30);
           var RotazioneAnimazioneGiu = new Animation(v => imageLogo.TranslationY = v, -30, 0);
           var RotazioneAnimazioneSuSeconda = new Animation(v => imageLogo.TranslationY = v, 0, -30);
           var RotazioneAnimazioneGiuSeconda = new Animation(v => imageLogo.TranslationY = v, -30, 0);
           Animazione.Add(0, 0.15, SpostaSinistraAnimazione);
           Animazione.Add(0.25, 0.35, TornaIndietroAnimazione);
           Animazione.Add(0.35, 0.65, ruotaAnimazione);
           Animazione.Add(0.35, 0.65, MuoviRotazioneAnimazione);
           Animazione.Add(0.35, 0.5, AnimazioneAlta);
           Animazione.Add(0.5, 0.65, AnimazioneBassa);
           Animazione.Add(0.7, 0.75, RotazioneAnimazioneSu);
           Animazione.Add(0.75, 0.8, RotazioneAnimazioneGiu);
           Animazione.Add(0.8, 0.85, RotazioneAnimazioneSuSeconda);
           Animazione.Add(0.85, 0.9, RotazioneAnimazioneSuSeconda);
           Animazione.Add(0.9, 1, SpostaDestraAnimazione);
           Animazione.Commit(this, "Animazione", 10, 5000, null, null, repeat: () => true);
       }

Ora non resta che eseguire la nostra applicazione per vedere i vari effetti.

Conclusioni

L’articolo ha voluto fornire una tecnica di animazione sulle immagini utilizzando alcune classi messe a disposizione dal Framework MAUI, numerose sono le tecniche e le classi messe a disposizione di questo Framework, che permettono di applicare effetti speciali nelle varie tipologie di applicazioni.
La tecnica applicata in questo articolo, ha voluto fornire al lettore una delle tante possibilità che si possono fare nello sviluppo multi piattaforma.