Compartilhar via

Resumo do Capítulo 22. Animação

  • Artigo

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.

Você viu que pode criar suas próprias animações usando o Xamarin.Forms temporizador ou Task.Delay, mas geralmente é mais fácil usando os recursos de animação fornecidos pelo Xamarin.Forms. Três classes implementam essas animações:

Geralmente, as animações destinam-se a propriedades que são apoiadas por propriedades vinculáveis. Isso não é um requisito, mas essas são as únicas propriedades que reagem dinamicamente às alterações.

Não há interface XAML para essas animações, mas você pode integrar animações em XAML usando técnicas discutidas no Capítulo 23. Gatilhos e Comportamentos.

Explorando animações básicas

As funções básicas de animação são métodos de extensão encontrados na ViewExtensions classe. Esses métodos se aplicam a qualquer objeto derivado do VisualElement. As animações mais simples destinam-se às propriedades de transformações discutidas no Chapter 21. Transforms.

O AnimationTryout demonstra como o Clicked manipulador de eventos para um Button pode chamar o RotateTo método de extensão para girar o botão em um círculo.

O RotateTo método altera a RotationButton propriedade do de 0 a 360 ao longo de um quarto de segundo (por padrão). Se o Button for tocado novamente, no entanto, não faz nada porque o Rotation imóvel já está 360 graus.

Definindo a duração da animação

O segundo argumento é RotateTo uma duração em milissegundos. Se definido como um valor grande, tocar no Button durante uma animação inicia uma nova animação começando no ângulo atual.

Animações relativas

O RelRotateTo método executa uma rotação relativa adicionando um valor especificado ao valor existente. Esse método permite que o seja tocado Button várias vezes, e cada vez aumenta a Rotation propriedade em 360 graus.

Aguardando animações

Todos os métodos de animação em ViewExtensions objetos de retorno Task<bool> . Isso significa que você pode definir uma série de animações sequenciais usando ContinueWith ou await. O bool valor de retorno de conclusão é false se a animação foi concluída sem interrupção ou true se foi cancelada CancelAnimation pelo método, que cancela todas as animações iniciadas pelo outro método no ViewExtensions que são definidas no mesmo elemento.

Animações compostas

Você pode misturar animações aguardadas e não aguardadas para criar animações compostas. Estas são as animações destinadas ViewExtensions às TranslationXpropriedades , TranslationYe Scale transform:

Observe que TranslateTo potencialmente afeta as TranslationX propriedades e TranslationY .

Task.WhenAll e Task.WhenAny

Também é possível gerenciar animações simultâneas usando Task.WhenAll, que sinaliza quando várias tarefas foram concluídas, e Task.WhenAny, que sinaliza quando a primeira de várias tarefas foi concluída.

Rotação e âncoras

Ao chamar os ScaleTométodos , RelScaleTo, RotateToe RelRotateTo , você pode definir as AnchorX propriedades e AnchorY para indicar o centro de dimensionamento e rotação.

O CircleButton demonstra essa técnica girando em Button torno do centro da página.

Funções de easing

Geralmente, as animações são lineares de um valor inicial para um valor final. As funções de flexibilização podem fazer com que as animações acelerem ou diminuam a velocidade ao longo do curso. O último argumento opcional para os métodos de animação é do tipo Easing, uma classe que define 11 campos estáticos somente leitura do tipo Easing:

O In sufixo indica que o efeito está no início da animação, Out significa no final e InOut significa que está no início e no fim da animação.

O exemplo BounceButton demonstra o uso de funções de atenuação.

Suas próprias funções de flexibilização

Você também pode definir suas próprias funções de atenuação passando a Func<double, double> para o Easing construtor. Easing também define uma conversão implícita de Func<double, double> para Easing. O argumento para a função de atenuação está sempre no intervalo de 0 a 1 à medida que a animação prossegue linearmente do início ao fim. A função geralmente retorna um valor no intervalo de 0 a 1, mas pode ser brevemente negativa ou maior que 1 (como é o caso das SpringIn funções e SpringOut ) ou pode quebrar as regras se você souber o que está fazendo.

O exemplo UneasyScale demonstra uma função de atenuação personalizada e CustomCubicEase demonstra outra.

O exemplo SwingButton também demonstra uma função de atenuação personalizada e também uma técnica de alteração das AnchorX propriedades e AnchorY dentro de uma sequência de animações de rotação.

A Xamarin.Formsbiblioteca Book.Toolkit tem uma JiggleButton classe que usa uma função de atenuação personalizada para agitar um botão quando ele é clicado. O exemplo JiggleButtonDemo demonstra isso.

Animações de entrada

Um tipo popular de animação ocorre quando uma página aparece pela primeira vez. Essa animação pode ser iniciada na OnAppearing substituição da página. Para essas animações, é melhor configurar o XAML para saber como você deseja que a página apareça após a animação e, em seguida, inicializar e animar o layout a partir do código.

O exemplo FadingEntrance usa o FadeTo método de extensão para desaparecer no conteúdo da página.

O exemplo SlidingEntrance usa o TranslateTo método de extensão para deslizar o conteúdo da página pelos lados.

O exemplo SwingingEntrance usa o RotateYTo método de extensão para animar a RotationY propriedade. Um RotateXTo método também está disponível.

Animações para sempre

No outro extremo, as animações "para sempre" são executadas até que o programa seja encerrado. Estes são geralmente destinados a fins de demonstração.

O exemplo FadingTextAnimation usa FadeTo animação para fazer fade in e out de duas partes de texto.

PalindromeAnimation exibe um palíndromo e, em seguida, gira sequencialmente as letras individuais em 180 graus para que fiquem todas de cabeça para baixo. Em seguida, a cadeia de caracteres inteira é invertida 180 graus para ler o mesmo que a cadeia de caracteres original.

O exemplo CopterAnimation gira um helicóptero simples BoxView enquanto gira em torno do centro da tela.

RotatingSpokes gira BoxView raios em torno do centro da tela e, em seguida, gira cada falou em si para criar padrões interessantes:

Captura de tela tripla de Rotating Spokes

No entanto, aumentar progressivamente a Rotation propriedade de um elemento pode não funcionar a longo prazo, como demonstra o exemplo RotationBreakdown .

O exemplo SpinningImage usa RotateTo, RotateXToe RotateYTo para fazer parecer que um bitmap está girando no espaço 3D.

Animando a propriedade bounds

O único método de extensão ainda ViewExtensions não demonstrado é LayoutTo, que efetivamente anima a propriedade somente Bounds leitura chamando o Layout método. Este método é normalmente chamado por Layout derivados, como será discutido no Capítulo 26. Layouts personalizados.

O LayoutTo método deve ser restrito a fins especiais. O programa BouncingBox usa-o para comprimir e expandir um BoxView à medida que salta dos lados de uma página.

O exemplo XamagonXuzzle usa LayoutTo para mover blocos em uma implementação do quebra-cabeça clássico 15-16 que exibe uma imagem embaralhada em vez de blocos numerados:

Captura de tela tripla de Xamarin Xuzzle

Suas próprias animações aguardadas

O exemplo TryAwaitableAnimation cria uma animação aguardada. A classe crucial que pode retornar um Task objeto do método e sinalizar quando a animação é concluída é TaskCompletionSource.

Aprofunde-se nas animações

O Xamarin.Forms sistema de animação pode ser um pouco confuso. Além da Easing classe, o sistema de animação compreende as ViewExtensionsclasses , Animatione AnimationExtension .

ViewExtensions classe

Você já viu ViewExtensions. Ele define nove métodos que retornam Task<bool> e CancelAnimations. Sete dos nove métodos têm como alvo propriedades de transformação. Os outros dois são FadeTo, que tem como alvo a Opacity propriedade, e LayoutTo, que chama o Layout método.

Classe de animação

A Animation classe tem um construtor com cinco argumentos para definir métodos de retorno de chamada e concluídos e parâmetros da animação.

As animações filhas podem ser adicionadas com Add, Insert, WithConcurrente sobrecarga de WithConcurrent.

O objeto de animação é iniciado com uma chamada para o Commit método.

Classe AnimationExtensions

A AnimationExtensions classe contém principalmente métodos de extensão. Existem várias versões de um Animate método e o método genérico Animate é tão versátil que é realmente a única função de animação que você precisa.

Trabalhando com a classe Animation

O exemplo ConcurrentAnimations demonstra a Animation classe com várias animações diferentes.

Animações infantis

O exemplo ConcurrentAnimations também demonstra animações filhas, que usam os métodos (muito semelhantes) Add e Insert .

Além dos métodos de animação de alto nível

O exemplo ConcurrentAnimations também demonstra como executar animações que vão além das propriedades direcionadas pelos ViewExtensions métodos. Em um exemplo, uma série de períodos fica mais longo; Em outro exemplo, uma BackgroundColor propriedade é animada.

Mais dos seus próprios métodos aguardados

O TranslateTo método de ViewExtensions não funciona com a Easing.SpringOut função. Ele pára quando a saída de flexibilização fica acima de 1.

A Xamarin.Formsbiblioteca Book.Toolkit contém uma MoreViewExtensions classe com TranslateXTo e TranslateYTo métodos de extensão que não têm esse problema, bem como CancelTranslateXTo e CancelTranslateYTo métodos para cancelar essas animações.

O SpringSlidingEntrance demonstra o TranslateXTo método.

A MoreExtensions classe também contém um método de TranslateXYTo extensão que combina tradução X e Y e um CancelTranslateXYTo método.

Implementando uma animação de Bezier

Também é possível desenvolver uma animação que move um elemento ao longo do caminho de um spline de Bezier. A Xamarin.Formsbiblioteca Book.Toolkit contém uma BezierSpline estrutura que encapsula um spline de Bezier e uma BezierTangent enumeração para orientação de controle.

A MoreViewExtensions classe contém um método de BezierPathTo extensão e um CancelBezierPathTo método.

O exemplo BezierLoop demonstra a animação de um elemento ao longo de um caminho Beizer.

Trabalhando com AnimationExtensions

Um tipo de animação ausente da coleção padrão é uma animação colorida. O problema é que não há uma maneira correta de interpolar entre dois Color valores. É possível interpolar os valores RGB individuais, mas igualmente válido é interpolar os valores HSL.

Por esse motivo, a MoreViewExtensions classe na Xamarin.Formsbiblioteca Book.Toolkit contém dois Color métodos de animação: RgbColorAnimation e .HslColorAnimation (Existem também dois métodos de cancelamento: CancelRgbColorAnimation e CancelHslColorAnimation).

Ambos os métodos fazem uso de ColorAnimation, que executa a animação chamando o método genérico Animate extensivo em AnimationExtensions.

O exemplo ColorAnimations demonstra o uso desses dois tipos de animações de cores.

Estruturando suas animações

Às vezes, é útil expressar animações em XAML e usá-las em conjunto com o MVVM. Isso é abordado no próximo capítulo, capítulo 23. Gatilhos e Comportamentos.