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

Publicado em por Juliano Custódio em Xamarin, 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.

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.OS;
namespace DemoNavigation.Droid
{
[Activity(Label = "DemoNavigation", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
FormsControls.Droid.Main.Init(this);
LoadApplication(new App());
}
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
}

view raw
MainActivity.cs
hosted with ❤ by GitHub

iOS

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

using Foundation;
using UIKit;
namespace DemoNavigation.iOS
{
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
FormsControls.Touch.Main.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}

view raw
AppDelegate.cs
hosted with ❤ by GitHub

App

Atribua para MainPage uma nova AnimationNavigationPage.

using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new AnimationNavigationPage(new MainPage());
}
}
}

view raw
App.xaml.cs
hosted with ❤ by GitHub

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.

using System;
using System.Collections.Generic;
using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class SlidePage : ContentPage, IAnimationPage
{
public IPageAnimation PageAnimation { get; } = new SlidePageAnimation
{
Duration = AnimationDuration.Long,
Subtype = AnimationSubtype.FromLeft
};
public void OnAnimationStarted(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public void OnAnimationFinished(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public SlidePage()
{
InitializeComponent();
}
}
}

view raw
SlidePage.xaml.cs
hosted with ❤ by GitHub

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.

using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class FadePage : ContentPage, IAnimationPage
{
public IPageAnimation PageAnimation { get; } = new FadePageAnimation
{
Duration = AnimationDuration.Long,
Subtype = AnimationSubtype.FromLeft
};
public void OnAnimationStarted(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public void OnAnimationFinished(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public FadePage()
{
InitializeComponent();
}
}
}

view raw
FadePage.xaml.cs
hosted with ❤ by GitHub

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.

using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class RollPage : ContentPage, IAnimationPage
{
public IPageAnimation PageAnimation { get; } = new RollPageAnimation
{
Duration = AnimationDuration.Long,
Subtype = AnimationSubtype.FromLeft
};
public void OnAnimationStarted(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public void OnAnimationFinished(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public RollPage()
{
InitializeComponent();
}
}
}

view raw
RollPage.xaml.cs
hosted with ❤ by GitHub

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.

using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class RotatePage : ContentPage, IAnimationPage
{
public IPageAnimation PageAnimation { get; } = new RotatePageAnimation
{
Duration = AnimationDuration.Long,
Subtype = AnimationSubtype.FromLeft
};
public void OnAnimationStarted(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public void OnAnimationFinished(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public RotatePage()
{
InitializeComponent();
}
}
}

view raw
RotatePage.xaml.cs
hosted with ❤ by GitHub

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.

using FormsControls.Base;
using Xamarin.Forms;
namespace DemoNavigation
{
public partial class PushPage : ContentPage, IAnimationPage
{
public IPageAnimation PageAnimation { get; } = new PushPageAnimation
{
Duration = AnimationDuration.Long,
Subtype = AnimationSubtype.FromLeft
};
public void OnAnimationStarted(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public void OnAnimationFinished(bool isPopAnimation)
{
// Put your code here but leaving empty works just fine
}
public PushPage()
{
InitializeComponent();
}
}
}

view raw
PushPage.xaml.cs
hosted with ❤ by GitHub

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.

Publicado por Juliano Custódio

É formado em Análise e Desenvolvimento de Sistemas pela Faculdade de Tecnologia de Sorocaba, Solutions Architect at GFT Brasil, Consultor Xamarin, Microsoft MVP, faz parte da lista de autores do Planet Xamarin, fundador da comunidade Xamarin Sorocaba, palestrante e escreve artigos sobre Xamarin.

Deixe um comentário

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

Gravatar
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 )

Cancelar

Conectando a %s