Condividi tramite

Funzioni di interpolazione in Xamarin.Forms

  • Articolo

Xamarin.Forms include una classe Interpolazione che consente di specificare una funzione di trasferimento che controlla la velocità o il rallentamento delle animazioni durante l'esecuzione. Questo articolo illustra come usare le funzioni di interpolazione predefinite e come creare funzioni di interpolazione personalizzate.

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.

Utilizzo di una funzione di interpolazione

I metodi di estensione dell'animazione nella ViewExtensions classe consentono di specificare una funzione di interpolazione come parametro del metodo finale, come illustrato nell'esempio di codice seguente:

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.

Nota

Xamarin.Forms 5.0 include un convertitore di tipi che converte una rappresentazione di stringa di una funzione di interpolazione nel membro di enumerazione appropriato Easing . Questo convertitore di tipi viene richiamato automaticamente su tutte le proprietà di tipo Easing impostate in XAML.

Per altre informazioni sull'uso dei metodi di estensione dell'animazione nella ViewExtensions classe , vedere Animazioni semplici. Le funzioni di interpolazione possono essere utilizzate anche dalla Animation classe . Per altre informazioni, vedere Animazioni personalizzate.

Funzioni di interpolazione personalizzate

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

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

In tutti e tre i casi, la funzione di interpolazione personalizzata deve restituire 0 per un argomento pari a 0 e 1 per un argomento pari a 1. Tuttavia, qualsiasi valore può essere restituito tra i valori dell'argomento 0 e 1. Ogni approccio verrà ora discusso a sua volta.

Metodo di interpolazione personalizzato

Una funzione di interpolazione personalizzata può essere definita come un metodo che accetta un double argomento e restituisce un double risultato, come illustrato nell'esempio di codice seguente:

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

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

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 interpolazione personalizzato

Una funzione di interpolazione personalizzata può essere definita anche come Func<double, double>, come illustrato nell'esempio di codice seguente:

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

Rappresenta CustomEaseFunc una funzione di interpolazione che inizia veloce, rallenta e inverte il corso e 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ò anche essere definita come argomento per il Easing costruttore, come illustrato nell'esempio di codice seguente:

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

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 . Pertanto, l'istanza Image viene convertita in modo da sembrare di cadere nel punto di riposo finale.

Riepilogo

Questo articolo ha illustrato come utilizzare le funzioni di interpolazione predefinite e come creare funzioni di interpolazione personalizzate. Xamarin.Forms include una Easing classe che consente di specificare una funzione di trasferimento che controlla la velocità o il rallentamento delle animazioni durante l'esecuzione.