Resumo do Capítulo 22. Animação

  • Artigo

Baixar exemplo Baixar o exemplo

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 concluídos.

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

Em geral, as animações direcionam propriedades que são apoiadas por propriedades associá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 ao 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 de VisualElement. As animações mais simples visam as propriedades de transformações discutidas em Chapter 21. Transforms.

O AnimationTryout demonstra como o Clicked manipulador de eventos de 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 Rotation propriedade do de Button 0 para 360 ao longo de um quarto de segundo (por padrão). No entanto, se o Button for tocado novamente, ele não fará nada porque a Rotation propriedade já está 360 graus.

Definindo a duração da animação

O segundo argumento para RotateTo é uma duração em milissegundos. Se definido como um valor grande, tocar no Button durante uma animação iniciará 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 Button seja tocado 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 retornados Task<bool> . Isso significa que você pode definir uma série de animações sequenciais usando ContinueWith ou await. O bool valor retornado de conclusão será false se a animação for concluída sem interrupção ou true se tiver sido cancelada pelo método , o CancelAnimation que cancelará todas as animações iniciadas pelo outro método em ViewExtensions que estã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 em ViewExtensions que se destinam às TranslationXpropriedades , TranslationYe Scale transformam:

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, o que sinaliza quando a primeira de várias tarefas é 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 escala e rotação.

O CircleButton demonstra essa técnica girando um Button ao redor 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 easing 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 final da animação.

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

Suas próprias funções de easing

Você também pode definir suas próprias funções de easing passando um 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 easing 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 com as SpringIn funções e SpringOut ) ou pode quebrar as regras se você souber o que está fazendo.

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

O exemplo SwingButton também demonstra uma função de easing 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 easing personalizada para ativar 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 é exibida pela primeira vez. Essa animação pode ser iniciada na OnAppearing substituição da página. Para essas animações, é melhor configurar o XAML de como você deseja que a página apareça após a animação e, em seguida, inicializar e animar o layout 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 no conteúdo da página dos 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. Geralmente, elas são destinadas para fins de demonstração.

O exemplo FadingTextAnimation usa animação para esmaecer FadeTo duas partes de texto dentro e fora.

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

O exemplo CopterAnimation gira um helicóptero simples BoxView enquanto o gira ao redor do centro da tela.

RotatingSpokes gira spokes BoxView ao redor do centro da tela e, em seguida, gira cada spoke para criar padrões interessantes:

Captura de tela tripla de Spokes Giratórios

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 em espaço 3D.

Animando a propriedade bounds

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

O LayoutTo método deve ser restrito a finalidades especiais. O programa BouncingBox o usa para compactar e expandir um BoxView conforme ele sai dos lados de uma página.

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

Captura de tela tripla do Xamarin Xuzzle

Suas próprias animações aguardados

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.

Aprofundar-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 é composto pelas ViewExtensionsclasses , Animatione AnimationExtension .

Classe ViewExtensions

Você já viu ViewExtensions. Ele define nove métodos que retornam Task<bool> e CancelAnimations. Sete dos nove métodos visam propriedades de transformação. Os outros dois são FadeTo, que tem como destino 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.

Animações filho podem ser adicionadas com Add, Insert, WithConcurrente sobrecarga de WithConcurrent.

Em seguida, 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. Há 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 de que você precisa.

Trabalhando com a classe Animation

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

Animações filho

O exemplo ConcurrentAnimations também demonstra animações filho, que fazem uso dos 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 longa; em outro exemplo, uma BackgroundColor propriedade é animada.

Mais de seus próprios métodos aguardaráveis

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

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

O SpringSlidingEntrance demonstra o TranslateXTo método .

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

Implementando uma animação 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 uma spline bezier e uma BezierTangent enumeração para controlar a orientação.

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

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

Trabalhando com AnimationExtensions

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

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

Ambos os métodos usam 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.