Condividi tramite

Animazione di base

  • Articolo

Le classi di animazione .NET Multi-platform App UI (.NET MAUI) hanno come destinazione proprietà diverse degli elementi visivi, con un'animazione di base tipica che cambia progressivamente una proprietà da un valore a un altro in un periodo di tempo.

Le animazioni di base possono essere create con metodi di estensione forniti dalla ViewExtensions classe , che operano su VisualElement oggetti :

Per impostazione predefinita, ogni animazione richiederà 250 millisecondi. Tuttavia, è possibile specificare una durata per ogni animazione durante la creazione dell'animazione.

Nota

La ViewExtensions classe fornisce anche un LayoutTo metodo di estensione. Tuttavia, questo metodo deve essere usato dai layout per animare le transizioni tra stati di layout che contengono modifiche di dimensione e posizione.

I metodi di estensione dell'animazione nella ViewExtensions classe sono tutti asincroni e restituiscono un Task<bool> oggetto . Il valore restituito è false se l'animazione viene completata e true se l'animazione viene annullata. Pertanto, quando le operazioni di animazione vengono combinate con l'operatore await diventa possibile creare animazioni sequenziali con i metodi di animazione successivi eseguiti dopo il completamento del metodo precedente. Per altre informazioni, vedere Animazioni composte.

Se è necessario consentire il completamento di un'animazione in background, l'operatore await può essere omesso. In questo scenario, i metodi di estensione dell'animazione verranno restituiti rapidamente dopo l'avvio dell'animazione, con l'animazione che si verifica in background. Questa operazione può essere sfruttata durante la creazione di animazioni composite. Per altre informazioni, vedere Animazioni composite.

In Android le animazioni rispettano le impostazioni di animazione di sistema:

  • Se le animazioni del sistema sono disabilitate (dalle funzionalità di accessibilità o dalle funzionalità dello sviluppatore), le nuove animazioni passeranno immediatamente allo stato finito.
  • Se la modalità di risparmio energia del dispositivo viene attivata mentre le animazioni sono in corso, le animazioni passeranno immediatamente allo stato finito.
  • Se le durate di animazione del dispositivo sono impostate su zero (disabilitate) mentre le animazioni sono in corso e la versione dell'API è 33 o successiva, le animazioni passeranno immediatamente allo stato finito.

Animazioni singole

Ogni metodo di estensione nella ViewExtensions classe implementa una singola operazione di animazione che modifica progressivamente una proprietà da un valore a un altro valore in un periodo di tempo.

Rotazione

La rotazione viene eseguita con il RotateTo metodo , che modifica progressivamente la Rotation proprietà di un elemento:

await image.RotateTo(360, 2000);
image.Rotation = 0;

In questo esempio un'istanza Image viene ruotata fino a 360 gradi oltre 2 secondi (2000 millisecondi). Il RotateTo metodo ottiene il valore della proprietà corrente Rotation dell'elemento per l'inizio dell'animazione e quindi ruota da tale valore al primo argomento (360). Al termine dell'animazione, la proprietà dell'immagine Rotation viene reimpostata su 0. Ciò garantisce che la Rotation proprietà non rimanga a 360 dopo la conclusione dell'animazione, impedendo rotazioni aggiuntive.

Nota

Oltre al RotateTo metodo, sono disponibili anche RotateYTo RotateXTo metodi che animano le RotationX proprietà e RotationY rispettivamente.

Rotazione relativa

La rotazione relativa viene eseguita con il RelRotateTo metodo , che modifica progressivamente la Rotation proprietà di un elemento:

await image.RelRotateTo(360, 2000);

In questo esempio, un'istanza Image viene ruotata di 360 gradi dalla posizione iniziale oltre 2 secondi (2000 millisecondi). Il RelRotateTo metodo ottiene il valore della proprietà corrente Rotation dell'elemento per l'inizio dell'animazione e quindi ruota da tale valore al valore più il primo argomento (360). In questo modo ogni animazione sarà sempre una rotazione di 360 gradi dalla posizione iniziale. Pertanto, se viene richiamata una nuova animazione mentre un'animazione è già in corso, inizierà dalla posizione corrente e potrebbe terminare in una posizione diversa da un incremento di 360 gradi.

Scalabilità

Il ridimensionamento viene eseguito con il ScaleTo metodo , che modifica progressivamente la Scale proprietà di un elemento:

await image.ScaleTo(2, 2000);

In questo esempio, un'istanza Image viene ridimensionata fino a un massimo di 2 secondi (2000 millisecondi). Il ScaleTo metodo ottiene il valore della proprietà corrente Scale dell'elemento per l'inizio dell'animazione e quindi scala da tale valore al primo argomento. Questo ha l'effetto di espandere le dimensioni dell'immagine fino al doppio delle dimensioni.

Nota

Oltre al ScaleTo metodo, sono disponibili anche ScaleYTo ScaleXTo metodi che animano le ScaleX proprietà e ScaleY rispettivamente.

Ridimensionamento relativo

La scalabilità relativa viene eseguita con il RelScaleTo metodo , che modifica progressivamente la Scale proprietà di un elemento:

await image.RelScaleTo(2, 2000);

In questo esempio, un'istanza Image viene ridimensionata fino a un massimo di 2 secondi (2000 millisecondi). Il RelScaleTo metodo ottiene il valore della proprietà corrente Scale dell'elemento per l'inizio dell'animazione e quindi scala da tale valore al valore più il primo argomento. Ciò garantisce che ogni animazione sia sempre una scala di 2 dalla posizione iniziale.

Ridimensionamento e rotazione con ancoraggi

Le AnchorX proprietà e AnchorY di un elemento visivo impostano il centro di ridimensionamento o rotazione per le Rotation proprietà e Scale . Pertanto, i relativi valori influiscono anche sui RotateTo metodi e ScaleTo .

Dato un oggetto Image posizionato al centro di un layout, l'esempio di codice seguente illustra la rotazione dell'immagine intorno al centro del layout impostandone la AnchorY proprietà:

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Per ruotare l'istanza Image intorno al centro del layout, le AnchorX proprietà e AnchorY devono essere impostate su valori relativi alla larghezza e all'altezza Imagedi . In questo esempio il centro dell'oggetto Image viene definito come al centro del layout e quindi il valore predefinito AnchorX 0,5 non richiede la modifica. Tuttavia, la AnchorY proprietà viene ridefinita in modo che sia un valore dall'inizio dell'oggetto Image al punto centrale del layout. In questo modo, l'oggetto Image esegue una rotazione completa di 360 gradi intorno al punto centrale del layout.

Traduzione

La traduzione viene eseguita con il TranslateTo metodo , che modifica progressivamente le TranslationX proprietà e TranslationY di un elemento:

await image.TranslateTo(-100, -100, 1000);

In questo esempio l'istanza Image viene convertita orizzontalmente e verticalmente oltre 1 secondo (1000 millisecondi). Il TranslateTo metodo converte simultaneamente l'immagine 100 unità indipendenti dal dispositivo a sinistra e 100 unità indipendenti dal dispositivo verso l'alto. Ciò è dovuto al fatto che il primo e il secondo argomento sono entrambi numeri negativi. Se si specificano numeri positivi, l'immagine viene convertita a destra e verso il basso.

Importante

Se un elemento viene inizialmente disposto fuori dalla schermata e quindi convertito sullo schermo, dopo la traduzione il layout di input dell'elemento rimane fuori schermo e l'utente non può interagire con esso. Pertanto, è consigliabile disporre una vista nella posizione finale e quindi tutte le traduzioni necessarie eseguite.

Dissolvenza

La dissolvenza viene eseguita con il FadeTo metodo , che modifica progressivamente la Opacity proprietà di un elemento:

image.Opacity = 0;
await image.FadeTo(1, 4000);

In questo esempio l'istanza Image si dissolve in più di 4 secondi (4000 millisecondi). Il FadeTo metodo ottiene il valore della proprietà corrente Opacity dell'elemento per l'inizio dell'animazione e quindi dissolve da tale valore al primo argomento.

Animazioni composte

Un'animazione composta è una combinazione sequenziale di animazioni e può essere creata con l'operatore await :

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

In questo esempio l'istanza Image viene convertita in più di 6 secondi (6000 millisecondi). La traduzione di Image usa cinque animazioni, con l'operatore await che indica che ogni animazione viene eseguita in sequenza. Pertanto, i metodi di animazione successivi vengono eseguiti dopo il completamento del metodo precedente.

Animazioni composite

Un'animazione composita è una combinazione di animazioni in cui due o più animazioni vengono eseguite simultaneamente. Le animazioni composite possono essere create combinando animazioni attese e non attese:

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

In questo esempio l'istanza Image viene ridimensionata e ruotata contemporaneamente su 4 secondi (4000 millisecondi). Il ridimensionamento di Image usa due animazioni sequenziali che si verificano contemporaneamente alla rotazione. Il RotateTo metodo viene eseguito senza un await operatore e restituisce immediatamente, con la prima ScaleTo animazione che inizia. L'operatore await sul primo ScaleTo metodo ritarda il secondo ScaleTo metodo fino al completamento del primo ScaleTo metodo. A questo punto l'animazione RotateTo viene completata a metà e l'oggetto Image verrà ruotato di 180 gradi. Durante i 2 secondi finali (2000 millisecondi), la seconda ScaleTo animazione e l'animazione RotateTo sono entrambe completate.

Eseguire più animazioni contemporaneamente

I Task.WhenAny metodi e Task.WhenAll possono essere usati per eseguire più metodi asincroni contemporaneamente e quindi possono creare animazioni composite. Entrambi i metodi restituiscono un Task oggetto e accettano una raccolta di metodi che ognuno restituisce un Task oggetto . Il Task.WhenAny metodo viene completato quando un metodo nella raccolta completa l'esecuzione, come illustrato nell'esempio di codice seguente:

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

In questo esempio il Task.WhenAny metodo contiene due attività. La prima attività ruota un'istanza Image su 4 secondi (4000 millisecondi) e la seconda attività ridimensiona l'immagine su 2 secondi (2000 millisecondi). Al termine della seconda attività, la chiamata al Task.WhenAny metodo viene completata. Tuttavia, anche se il RotateTo metodo è ancora in esecuzione, il secondo ScaleTo metodo può iniziare.

Il Task.WhenAll metodo viene completato quando tutti i metodi nella raccolta sono stati completati, come illustrato nell'esempio di codice seguente:

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

In questo esempio il Task.WhenAll metodo contiene tre attività, ognuna delle quali viene eseguita in più di 10 minuti. Ognuno Task esegue un numero diverso di rotazioni di 360 gradi - 307 rotazioni per RotateTo, 251 rotazioni per RotateXToe 199 rotazioni per RotateYTo. Questi valori sono numeri primi, garantendo quindi che le rotazioni non siano sincronizzate e quindi non provocheranno modelli ripetitivi.

Annullamento delle animazioni

Un'app può annullare una o più animazioni con una chiamata al CancelAnimations metodo di estensione:

image.CancelAnimations();

In questo esempio tutte le animazioni in esecuzione nell'istanza Image vengono immediatamente annullate.