Share via

Funciones de aceleración en Xamarin.Forms

  • Artículo

Xamarin.Forms incluye una clase Aceleración que permite especificar una función de transferencia que controla cómo se aceleran o ralentizan las animaciones a medida que se ejecutan. En este artículo se muestra cómo consumir las funciones de aceleración predefinidas y cómo crear funciones de aceleración personalizadas.

La clase Easing define una serie de funciones de aceleración que las animaciones pueden consumir:

  • La función de aceleración BounceIn rebota la animación al principio.
  • La función de aceleración BounceOut rebota la animación al final.
  • La función de aceleración CubicIn acelera lentamente la animación.
  • La función de aceleración CubicInOut acelera la animación al principio y ralentiza la animación al final.
  • La función de aceleración CubicOut ralentiza rápidamente la animación.
  • La función de aceleración Linear usa una velocidad constante y es la función de aceleración predeterminada.
  • La función de aceleración SinIn acelera suavemente la animación.
  • La función de aceleración SinInOut acelera suavemente la animación al principio y ralentiza suavemente la animación al final.
  • La función de aceleración SinOut ralentiza suavemente la animación.
  • La función de aceleración SpringIn hace que la animación se acelere muy rápidamente hacia el final.
  • La función de aceleración SpringOut hace que la animación se desacelere rápidamente hacia el final.

Los sufijos In y Out indican si el efecto proporcionado por la función de aceleración es notable al principio de la animación, al final o ambos.

Además, se pueden crear funciones de aceleración personalizadas. Para obtener más información, consulte Funciones de aceleración personalizadas.

Uso de una función de aceleración

Los métodos de extensión de animación de la clase ViewExtensions permiten especificar una función de aceleración como parámetro de método final, como se muestra en el ejemplo de código siguiente:

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);

Al especificar una función de aceleración para una animación, la velocidad de animación se convierte en no lineal y genera el efecto proporcionado por la función de aceleración. Omitir una función de aceleración al crear una animación hace que la animación use la función de aceleración Linear predeterminada, que produce una velocidad lineal.

Nota:

Xamarin.Forms 5.0 incluye un convertidor de tipos que convierte una representación de cadena de una función de aceleración en el miembro de enumeración adecuado Easing. Este convertidor de tipos se invoca automáticamente en cualquier propiedad de tipo Easing que se establezca en XAML.

Para obtener más información sobre el uso de los métodos de extensión de animación en la clase ViewExtensions, vea Animaciones simples. La clase Animation también puede consumir funciones de aceleración. Para más información, consulte Animaciones personalizadas.

Funciones de aceleración personalizadas

Hay tres métodos principales para crear una función de aceleración personalizada:

  1. Crear un método que tome un argumento double y devuelva un resultado double.
  2. Crear un control Func<double, double>.
  3. Especificar la función de aceleración como argumento para el constructor Easing.

En los tres casos, la función de aceleración personalizada debe devolver 0 para un argumento de 0, y 1 para un argumento de 1. Sin embargo, se puede devolver cualquier valor entre los valores 0 y 1 del argumento. Ahora se analizará cada enfoque de uno en uno.

Método de aceleración personalizada

Una función de aceleración personalizada se puede definir como un método que toma un argumento double y devuelve un resultado double, como se muestra en el ejemplo de código siguiente:

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

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

El método CustomEase trunca el valor entrante en los valores 0, 0.2, 0.4, 0.6, 0.8 y 1. Por lo tanto, la instancia Image se traduce en saltos discretos, en lugar de suaves.

Función de aceleración personalizada

Una función de aceleración personalizada también se puede definir como un Func<double, double>, como se muestra en el ejemplo de código siguiente:

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

El CustomEaseFunc representa una función de aceleración que comienza rápido, se ralentiza y invierte el curso y, a continuación, vuelve a invertir el curso para acelerar rápidamente hacia el final. Por lo tanto, mientras que el movimiento general de la instancia Image es hacia abajo, también invierte temporalmente el curso a mitad de la animación.

Constructor de aceleración personalizada

Una función de aceleración personalizada también se puede definir como el argumento para el constructor Easing, como se muestra en el ejemplo de código siguiente:

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

La función de aceleración personalizada se especifica como un argumento de función lambda para el constructor Easing y usa el método Math.Cos para crear un efecto de caída lento que el método Math.Exp amortigua. Por lo tanto, la instancia Image se traslada para que parezca que se coloca en su lugar de descanso final.

Resumen

En este artículo se muestra cómo consumir las funciones de aceleración predefinidas y cómo crear funciones de aceleración personalizadas. Xamarin.Forms incluye una clase Easing que permite especificar una función de transferencia que controla cómo se aceleran o ralentizan las animaciones a medida que se ejecutan.