Funções de easing

A interface do usuário de aplicativo de várias plataformas do .NET (.NET MAUI) inclui uma Easing classe que permite especificar uma função de transferência que controla como as animações aceleram ou reduzem a velocidade à medida que estão em execução.

A Easing classe define um número de funções de easing que podem ser utilizadas por animações:

• A BounceIn função easing rebate a animação no início.
• A BounceOut função easing rebate a animação no final.
• A função easing CubicIn acelera a animação lentamente.
• A CubicInOut função easing acelera a animação no início e desacelera a animação no final.
• A CubicOut função easing desacelera rapidamente a animação.
• A Linear função de suavização usa uma velocidade constante e é a função de suavização padrão.
• A SinIn função easing acelera suavemente a animação.
• A SinInOut função easing acelera suavemente a animação no início e desacelera suavemente a animação no final.
• A função de suavização SinOut desacelera a animação suavemente.
• A SpringIn função easing faz com que a animação acelere muito rapidamente em direção ao final.
• A função SpringOut easing faz a animação desacelerar rapidamente no final da animação.

Os sufixos In e Out indicam se o efeito fornecido pela função de easing se torna perceptível no início da animação, no final ou em ambos.

Além disso, funções de easing personalizadas podem ser criadas. Para obter mais informações, consulte Funções de easing personalizadas.

Consumir uma função de easing

Os métodos de extensão de animação na classe ViewExtensions permitem que uma função de easing seja especificada como argumento final do método.

await image.TranslateToAsync(0, 200, 2000, Easing.BounceIn);
await image.ScaleToAsync(2, 2000, Easing.CubicIn);
await image.RotateToAsync(360, 2000, Easing.SinInOut);
await image.ScaleToAsync(1, 2000, Easing.CubicOut);
await image.TranslateToAsync(0, -200, 2000, Easing.BounceOut);

Ao especificar uma função de easing para uma animação, a velocidade da animação se torna não linear e produz o efeito fornecido pela função de easing. Omitir uma função de easing ao criar uma animação faz com que a animação use a função de easing padrão Linear , que produz uma velocidade linear.

Para obter mais informações sobre como usar os métodos de extensão de animação na ViewExtensions classe, consulte a animação Básica. As funções de easing também podem ser consumidas pela classe Animation. Para obter mais informações, consulte Animação personalizada.

Funções de easing personalizadas

Há três abordagens principais para criar uma função de easing personalizada:

1. Crie um método que usa um double argumento e retorna um double resultado.
2. Criar um Func<double, double>.
3. Especifique a função de easing como argumento do construtor Easing.

Em todos os três casos, a função de easing personalizada deve retornar um valor entre 0 e 1.

Método de easing personalizado

Uma função de easing personalizada pode ser definida como um método que usa um double argumento e retorna um double resultado:

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

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

Neste exemplo, o CustomEase método trunca o valor de entrada para os valores 0, 0.2, 0.4, 0.6, 0.8 e 1. Portanto, a Image instância é traduzida em saltos discretos, ao invés de maneira suave.

Função de easing personalizada

Uma função de easing personalizada também pode ser definida como um Func<double, double>:

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

Neste exemplo, o CustomEaseFunc representa uma função de easing que começa rápido, desacelera e inverte o curso, e então inverte o curso novamente para acelerar rapidamente no final. Portanto, enquanto o movimento geral da Image instância é para baixo, ela também inverte temporariamente o curso no meio da animação.

Construtor de easing personalizado

Uma função de easing personalizada também pode ser definida como o argumento para o Easing construtor:

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

Neste exemplo, a função de easing personalizada é especificada como uma função lambda argumentada para o construtor Easing e utiliza o método Math.Cos para criar um efeito de queda lento que é suavizado pelo método Math.Exp. Portanto, a Image instância é traduzida para que pareça cair para sua posição final.