Compartilhar via

Facilitando funções 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 diminuem a velocidade à medida que são executadas. Este artigo demonstra como consumir as funções de atenuação predefinidas e como criar funções de atenuação personalizadas.

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.

Consumindo uma função de flexibilização

Os métodos de extensão de ViewExtensions animação na classe permitem que uma função de atenuação seja especificada como o parâmetro de método final, 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 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.

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 atenuação para o membro de enumeração apropriado Easing . Esse conversor de tipo é chamado automaticamente em quaisquer propriedades de 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 flexibilização também podem ser consumidas Animation pela turma. Para obter mais informações, consulte Animações personalizadas.

Funções de flexibilização personalizadas

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

  1. Crie um método que usa um double argumento e retorna 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 atenuação 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 atenuação 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 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 um 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 flexibilização que começa rápido, desacelera e inverte o curso e, em seguida, inverte o curso novamente para acelerar rapidamente em direção ao 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.

Custom Easing Construtor

Uma função de atenuação 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 atenuação personalizada é especificada como um argumento de função lambda para o Easing construtor e usa o 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 seu local de repouso final.

Resumo

Este artigo demonstrou como consumir as funções de atenuação predefinidas e como criar funções de atenuação personalizadas. Xamarin.Forms Inclui uma Easing classe que permite especificar uma função de transferência que controla como as animações aceleram ou diminuem a velocidade à medida que são executadas.