Funzioni di interpolazione

Articolo
09/30/2024

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) include una Easing classe che consente di specificare una funzione di trasferimento che controlla la velocità o il rallentamento delle animazioni durante l'esecuzione.

La Easing classe definisce una serie di funzioni di interpolazione che possono essere utilizzate dalle animazioni:

La BounceIn funzione di interpolazione rimbalza l'animazione all'inizio.
La BounceOut funzione di interpolazione rimbalza l'animazione alla fine.
La CubicIn funzione di interpolazione accelera lentamente l'animazione.
La CubicInOut funzione di interpolazione accelera l'animazione all'inizio e decelera l'animazione alla fine.
La CubicOut funzione di interpolazione rallenta rapidamente l'animazione.
La Linear funzione di interpolazione usa una velocità costante ed è la funzione di interpolazione predefinita.
La SinIn funzione di interpolazione accelera senza problemi l'animazione.
La SinInOut funzione di interpolazione accelera senza problemi l'animazione all'inizio e rallenta senza problemi l'animazione alla fine.
La SinOut funzione di interpolazione decelera l'animazione senza problemi.
La SpringIn funzione di interpolazione fa sì che l'animazione accelera molto rapidamente verso la fine.
La SpringOut funzione di interpolazione fa sì che l'animazione decelera rapidamente verso la fine.

I In suffissi e Out indicano se l'effetto fornito dalla funzione di interpolazione è evidente all'inizio dell'animazione, alla fine o a entrambi.

È anche possibile creare funzioni di interpolazione personalizzate. Per altre informazioni, vedere Funzioni di interpolazione personalizzate.

Utilizzare una funzione di interpolazione

I metodi di estensione dell'animazione nella ViewExtensions classe consentono di specificare una funzione di interpolazione come argomento del metodo finale:

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

Specificando una funzione di interpolazione per un'animazione, la velocità di animazione diventa non lineare e produce l'effetto fornito dalla funzione di interpolazione. Omettendo una funzione di interpolazione durante la creazione di un'animazione, l'animazione usa la funzione di interpolazione predefinita Linear , che produce una velocità lineare.

Per altre informazioni sull'uso dei metodi di estensione dell'animazione nella ViewExtensions classe , vedi Animazione di base. Le funzioni di interpolazione possono essere utilizzate anche dalla Animation classe . Per altre informazioni, vedere Animazione personalizzata.

Funzioni di interpolazione personalizzate

Esistono tre approcci principali per la creazione di una funzione di interpolazione personalizzata:

Creare un metodo che accetta un double argomento e restituisce un double risultato.
Creare un oggetto Func<double, double>.
Specificare la funzione di interpolazione come argomento per il Easing costruttore.

In tutti e tre i casi, la funzione di interpolazione personalizzata deve restituire un valore compreso tra 0 e 1.

Metodo di interpolazione personalizzato

Una funzione di interpolazione personalizzata può essere definita come metodo che accetta un double argomento e restituisce un double risultato:

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

await image.TranslateTo(0, 200, 2000, (Easing)CustomEase);

In questo esempio, il CustomEase metodo tronca il valore in ingresso ai valori 0, 0.2, 0.4, 0.6, 0.8 e 1. Pertanto, l'istanza Image viene convertita in salti discreti, anziché senza problemi.

Func di interpolazione personalizzato

Una funzione di interpolazione personalizzata può anche essere definita come :Func<double, double>

Func<double, double> CustomEaseFunc = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEaseFunc);

In questo esempio, rappresenta CustomEaseFunc una funzione di interpolazione che inizia rapidamente, rallenta e inverte il corso, quindi inverte di nuovo il corso per accelerare rapidamente verso la fine. Pertanto, mentre il movimento complessivo dell'istanza Image è verso il basso, anche temporaneamente inverte il corso a metà dell'animazione.

Costruttore di interpolazione personalizzato

Una funzione di interpolazione personalizzata può essere definita anche come argomento per il Easing costruttore:

await image.TranslateTo(0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

In questo esempio la funzione di interpolazione personalizzata viene specificata come argomento di funzione lambda per il Easing costruttore e usa il Math.Cos metodo per creare un effetto di rilascio lento che viene smorzato dal Math.Exp metodo . Di conseguenza, l'istanza Image viene convertita in modo che venga visualizzata la posizione finale.

Condividi tramite