Altri Esempi di Animazione Dinamica

Oltre all'animazione del colore di sfondo si possono applicare anche altre Animazioni ad un Oggetto. Le Animazioni disponibili sono:

Rotazione	Rotazione angolare dell'oggetto in funzione del valore del Tag
Lampeggio	Lampeggio (visibile si, no, con Trasparenza graduale)
Colore Sfondo	Colore di sfondo, sui valori di soglia del Tag
Colore Bordo	Colore di contorno, sui valori di soglia del Tag
Linea Contorno	Animazione di tratteggio mobile sul contorno di un elemento di disegno base
Stato Visuale	Abilita visualizzazione "VisualState" (pressed, normal, released, ecc) di un controllo
Testo	Testo dinamico all'interno di un oggetto, in funzione del valore del Tag
Abilita	Abilitazione dinamica dell'oggetto, in funzione del valore del Tag
Riempimento	Riempimento dinamico dell'oggetto, in funzione del valore del Tag
Muovi X	Movimento orizzontale dell'oggetto, in funzione del valore del Tag
Muovi Y	Movimento verticale dell'oggetto, in funzione del valore del Tag
Trasparenza	Trasparenza (opacità) dell'oggetto, in funzione del valore del Tag
Scala	Dimensione in scala dell'oggetto, in funzione del valore del Tag
Storyboard	Esecuzione di una eventuale storyboard presente in un oggetto XAML

L'impostazione dei vari tipi di Animazioni avviene in modo analogo tra loro a meno dei parametri specifici per il tipo di Animazione.

Di seguito sono si indicano, a titolo di esempio, i passi per l'impostazione di due Animazioni, ad esempio il "Riempimento (Filling)" e il "Movimento Orizzontale (Move X)".

Animazione "Riempimento"

Per creare l'Animazione di Riempimento Graduale di un Oggetto procedere come segue:.

Aprire un sinottico e inserire un oggetto, ad esempio un Rettangolo.
Selezionare l'oggetto, far apparire il Tooltip comandi e cliccare sul sul pulsante "Edita Proprietà Generali".

Nella finestra di dialogo che viene aperta sono presenti alcune Tab, tramite le quali si possono eseguire diverse tipologie di impostazioni. Selezionare in questo caso la Tab "Animazioni".
Nella finestra "Animazioni" cliccare sulla voce "Riempimento" per aggiungere l'animazione da gestire. L'animazione verrà in questo modo aggiunta nella lista e potrà essere configurata.

Finestra Impostazione Animazioni. L'Animazione Filling (Riempimento) è stata aggiunta alla lista.

Eseguire un doppio click sulla riga della lista che riporta l'Animazione aggiunta. La finestra si aggiornerà con i parametri dell'Animazione "Riempimento".
Da questa finestra è ora possibile eseguire le impostazioni desiderate. Ad esempio impostare il Range di variazione del valore che dovrà gestire il riempimento con i limiti "0" e "100" (proprietà "Range - Low" = 0, "Range - High" = 100).
Definire anche il colore di riempimento tramite le due proprietà "Colore Iniziale" e "Colore Finale". Se i due colori impostati sono diversi tra loro il riempimento verrà gestito con una colorazione che gradualmente passa da un colore all'altro.

Finestra di impostazione dei parametri dell'Animazione Filling.

Terminata l'impostazione dei parametri di animazione si deve procedere all'assegnazione della variabile di riferimento. Per impostare la variabile direttamente nelle proprietà dell'Animazione utilizzare il campo "Tag" e tramite il pulsante di browse "..." presente nella parte destra del campo aprire la finestra di Browse delle variabili e selezionare il tag desiderato, ad esempio "Variable1", che dovrà essere stato preventivamente creato nell'Address Space del progetto. L'operazione di assegnazione della variabile può essere fatta in qualsiasi momento, anche prima di configurare i parametri dell'Animazione.
Se non viene specificata nessuna variabile nel campo "Tag" dell'Animazione, Movicon utilizzerà l'eventuale variabile associata all'oggetto per gestire l'Animazione (vedere paragrafo "Assegnazione di una Variabile ad un Oggetto"). Naturalmente se nessuna variabile è stata associata all'oggetto e nessuna variabile è stata inserita nella proprietà "Tag", in Runtime l'Animazione non verrà eseguita.
A questo punto per verificare il funzionamento dell'Animazione avviare in Runtime il progetto e modificare il valore della "Variable1". A seconda del valore assunto, da 0 a 100, il riempimento dell'oggetto dovrà passare dallo 0% al 100%.

Animazione "Muovi X"

Per creare l'Animazione di movimento orizzontale di un Oggetto procedere come segue:.

Aprire un sinottico e inserire un oggetto, ad esempio un Rettangolo.
Selezionare l'oggetto, far apparire il Tooltip comandi e cliccare sul pulsante "Edita Proprietà Generali".

Nella finestra di dialogo che viene aperta sono presenti alcune Tab, tramite le quali si possono eseguire diverse tipologie di impostazioni. Selezionare in questo caso la Tab "Animazioni".
Nella finestra "Animazioni" cliccare sulla voce "Muovi X" per aggiungere l'animazione da gestire. L'animazione verrà in questo modo aggiunta nella lista e potrà essere configurata.

Finestra Impostazione Animazioni. L'Animazione Move X è stata aggiunta alla lista.

Eseguire un doppio click sulla riga della lista che riporta l'Animazione aggiunta. La finestra si aggiornerà con i parametri dell'Animazione "Muovi X".
Da questa finestra è ora possibile eseguire le impostazioni desiderate. Ad esempio impostare la proprietà "X" definisce lo spostamento massimo in pixel che l'oggetto potrà avere. Inserire ad esempio 500.
I due campi "Low" e "High" del gruppo "Range" indicano in valore minimo e massimo che la Variabile di riferimento potrà assumere. Al valore massimo della variabile corrisponderà lo spostamento massimo dell'oggetto. Inserire ad esempio "Range - Low" = 0 e "Range - High" = 100. In questo modo al valore "0" della Variabile corrisponderà la posizione iniziale dell'oggetto e al valore 100 della Variabile corrisponderà lo spostamento di 500 pixel dell'oggetto.

Finestra di impostazione dei parametri dell'Animazione Muovi X.

Terminata l'impostazione dei parametri di animazione si deve procedere all'assegnazione della variabile di riferimento. Per impostare la variabile direttamente nelle proprietà dell'Animazione utilizzare il campo "Tag" e tramite il pulsante di browse "..." presente nella parte destra del campo aprire la finestra di Browse delle variabili e selezionare il tag desiderato, ad esempio "Variable1", che dovrà essere stato preventivamente creato nell'Address Space del progetto. L'operazione di assegnazione della variabile può essere fatta in qualsiasi momento, anche prima di configurare i parametri dell'Animazione.
Se non viene specificata nessuna variabile nel campo "Tag" dell'Animazione, Movicon utilizzerà l'eventuale variabile associata all'oggetto per gestire l'Animazione (vedere paragrafo "Assegnazione di una Variabile ad un Oggetto"). Naturalmente se nessuna variabile è stata associata all'oggetto e nessuna variabile è stata inserita nella proprietà "Tag", in Runtime l'Animazione non verrà eseguita.
A questo punto per verificare il funzionamento dell'Animazione avviare in Runtime il Progetto e modificare il valore della "Variable1". A seconda del valore assunto, da 0 a 100, l'oggetto si dovrà spostare rispetto la posizione iniziale fino a 500 pixel in linea orizzontale.