Funciones de aceleración

Artículo
05/14/2024

.NET Multi-platform App UI (.NET MAUI) 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.

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, consulta Funciones de aceleración personalizadas.

Consumo 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 el argumento de método final:

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.

Para obtener más información sobre el uso de los métodos de extensión de animación en la clase ViewExtensions, consulta Animación básica. La clase Animation también puede consumir funciones de aceleración. Para obtener más información, consulta Animación personalizada.

Funciones de aceleración personalizadas

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

Crear un método que tome un argumento double y devuelva un resultado double.
Crear un control Func<double, double>.
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 un valor entre 0 y 1.

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:

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

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

En este ejemplo, 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 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);

En este ejemplo, CustomEaseFunc representa una función de aceleración que comienza rápido, se ralentiza e invierte el curso y, después, invierte el curso de nuevo 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:

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

En este ejemplo, 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 traduce para que parezca caer en su posición final.

Share via