Flexibilização de funções

Artigo
05/14/2024

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) inclui uma classe que permite especificar uma Easing função de transferência que controla como as animações aceleram ou diminuem a velocidade à medida que são executadas.

A Easing classe define um número de funções de atenuação que podem ser consumidas por animações:

A BounceIn função de atenuação devolve a animação no início.
A BounceOut função de atenuação devolve a animação no final.
A CubicIn função de atenuação acelera lentamente a animação.
A CubicInOut função de atenuação acelera a animação no início e desacelera a animação no final.
A CubicOut função de flexibilização desacelera rapidamente a animação.
A Linear função de atenuação usa uma velocidade constante e é a função de atenuação padrão.
A SinIn função de flexibilização acelera suavemente a animação.
A SinInOut função de atenuação acelera suavemente a animação no início e desacelera suavemente a animação no final.
A SinOut função de flexibilização desacelera suavemente a animação.
A SpringIn função de flexibilização faz com que a animação acelere muito rapidamente no final.
A SpringOut função de flexibilização faz com que a animação desacelere rapidamente no final.

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

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

Consumir uma função de flexibilização

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

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

Ao especificar uma função de atenuação para uma animação, a velocidade de animação torna-se não-linear e produz o efeito fornecido pela função de atenuação. Omitir uma função de atenuação ao criar uma animação faz com que a animação use a função de atenuação 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 Animação básica. As funções de flexibilização também podem ser consumidas Animation pela turma. Para obter mais informações, consulte Animação personalizada.

Funções de flexibilização personalizadas

Existem três abordagens principais para criar uma função de atenuação personalizada:

Crie um método que usa um argumento e retorna um doubledouble resultado.
Crie um Func<double, double>.
Especifique a função de atenuação como o argumento para o Easing construtor.

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

Método de atenuação personalizado

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

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

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

Neste exemplo, o método trunca o CustomEase 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, em vez de suavemente.

Func de flexibilização personalizada

Uma função de atenuação personalizada também pode ser definida 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);

Neste exemplo, o representa uma função de flexibilização que começa rápido, desacelera e inverte o CustomEaseFunc curso e, em seguida, inverte o curso novamente para acelerar rapidamente em direção ao final. Portanto, embora o movimento geral da instância seja para baixo, ele também inverte temporariamente o curso na metade da Image animação.

Construtor de atenuação personalizada

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

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

Neste exemplo, a função de atenuação personalizada é especificada como um argumento de função lambda para o construtor e usa o Easing método para criar um efeito de queda lenta Math.Cos que é atenuado Math.Exp pelo método. Portanto, a Image instância é traduzida de modo que parece cair para sua posição final.

Partilhar via