Nevagação com animações – Xamarin.Forms

Neste artigo irei demonstrar como você pode definir animações para a navegação de páginas de suas aplicações feitas com Xamarin.Forms.

 

ADICIONANDO O NUGET PACKAGE

Para o exemplo será utilizado o plugin XForms.Plugin.AnimationNavigationPage, instale o plugin em todos os seus projetos.

Screen Shot 2019-10-20 at 13.54.52

Android

Inicialize o plugin na classe MainActivity, adicionando FormsControls.Droid.Main.Init(this); antes de LoadApplication, como demonstrado a seguir.

iOS

Inicialize o plugin na classe AppDelegate, adicionando FormsControls.Touch.Main.Init(); antes de LoadApplication, como demonstrado a seguir.

App

Atribua para MainPage uma nova AnimationNavigationPage.

Criando as animações

Iremos partir do princípio que a página “root” é a MainPage, ou seja, as animações acontecerão quando você navegar da MainPage para alguma página em questão.

SlidePage

Para esta página será realizado o efeito de Slide, neste exemplo começando da esquerda para a direita.

Sua página precisa herdar de IAnimationPage.

Instancie uma IPageAnimation, atribuindo uma nova SlidePageAnimation, definindo o tempo de duração e a direção do efeito, neste exemplo está começando pela esquerda.

ezgif.com-video-to-gif

 

 

FadePage

Para esta página será realizado o efeito de Fade, neste exemplo começando da esquerda para a direita.

Sua página precisa herdar de IAnimationPage.

Instancie uma IPageAnimation, atribuindo uma nova FadePageAnimation, definindo o tempo de duração e a direção do efeito, neste exemplo está começando pela esquerda.

ezgif.com-video-to-gif (1)

RollPage

Para esta página será realizado o efeito Roll, neste exemplo começando da esquerda para a direita.

Sua página precisa herdar de IAnimationPage.

Instancie uma IPageAnimation, atribuindo uma nova RollPageAnimation, definindo o tempo de duração e a direção do efeito, neste exemplo está começando pela esquerda.

ezgif.com-video-to-gif (2)

RotatePage

Para esta página será realizado o efeito Rotate, neste exemplo começando da esquerda para a direita.

Sua página precisa herdar de IAnimationPage.

Instancie uma IPageAnimation, atribuindo uma nova RotatePageAnimation, definindo o tempo de duração e a direção do efeito, neste exemplo está começando pela esquerda.

ezgif.com-video-to-gif (3).gif

PushPage

Para esta página será realizado o efeito Push, neste exemplo começando da esquerda para a direita.

Sua página precisa herdar de IAnimationPage.

Instancie uma IPageAnimation, atribuindo uma nova PushPageAnimation, definindo o tempo de duração e a direção do efeito, neste exemplo está começando pela esquerda.

ezgif.com-video-to-gif (4).gif

 

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

 

Neste artigo eu demonstrei como você pode utilizar efeitos de navegação implementando a interface IAnimationPage. Existem outras formas de implementar, como por exemplo no arquivo Xaml  com ou sem Binding. Para saber mais sobre as outras formas de implementação, clique aqui.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s