Partilhar via

Funções de Atenuação em Xamarin.Forms

  • Artigo

Xamarin.Forms inclui uma classe Easing que permite especificar uma função de transferência que controla como as animações aceleram ou desaceleram durante a execução. Este artigo demonstra como consumir as funções de easing predefinidas e como criar funções de easing personalizadas.

A Easing classe define várias funções de easing que podem ser consumidas por animações:

  • A BounceIn função de atenuação salta a animação no início.
  • A BounceOut função de atenuação salta 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 atenuação desacelera rapidamente a animação.
  • A Linear função de easing usa uma velocidade constante e é a função de easing padrão.
  • A SinIn função de atenuaçã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 atenuação desacelera suavemente a animação.
  • A SpringIn função de atenuação faz com que a animação acelere muito rapidamente no final.
  • A SpringOut função de atenuaçã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 em ambos.

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

Consumindo uma função de atenuação

Os métodos de extensão de animação na ViewExtensions classe permitem que uma função de easing seja especificada como o parâmetro final do método, conforme demonstrado no exemplo de código a seguir:

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 da animação se torna 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.

Observação

Xamarin.Forms 5.0 inclui um conversor de tipo que converte uma representação de cadeia de caracteres de uma função de easing no membro de enumeração apropriado Easing . Esse conversor de tipo é invocado automaticamente em todas as propriedades do tipo Easing definidas em XAML.

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

Funções de easing personalizadas

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

  1. Crie um método que receba um double argumento e retorne um double resultado.
  2. Crie um Func<double, double>.
  3. Especifique a função de atenuação como o argumento para o Easing construtor.

Em todos os três casos, a função de easing personalizada deve retornar 0 para um argumento de 0 e 1 para um argumento de 1. No entanto, qualquer valor pode ser retornado entre os valores de argumento de 0 e 1. Cada abordagem será agora discutida sucessivamente.

Método de flexibilização personalizado

Uma função de easing personalizada pode ser definida como um método que usa um double argumento e retorna um double resultado, conforme demonstrado no exemplo de código a seguir:

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

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

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 instância é traduzida Image em saltos discretos, em vez de suavemente.

Função de Easing Personalizada

Uma função de easing personalizada também pode ser definida como , Func<double, double>conforme demonstrado no exemplo de código a seguir:

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

O CustomEaseFunc representa uma função de atenuação que começa rápido, desacelera e inverte o curso e, em seguida, inverte o curso novamente para acelerar rapidamente no final. Portanto, embora o movimento geral da Image instância seja para baixo, ele também inverte temporariamente o curso na metade 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, conforme demonstrado no exemplo de código a seguir:

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

A função de easing personalizada é especificada como um argumento de função lambda para o Easing construtor e usa o Math.Cos método para criar um efeito de queda lenta que é amortecido pelo Math.Exp método. Portanto, a instância é traduzida Image para que pareça cair em seu local de descanso final.

Resumo

Este artigo demonstrou como consumir as funções de easing predefinidas e como criar funções de easing personalizadas. Xamarin.Forms Inclui uma Easing classe que permite especificar uma função de transferência que controla como as animações aceleram ou desaceleram enquanto estão em execução.