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.
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); | |
} | |
} | |
} |
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); | |
} | |
} | |
} |
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()); | |
} | |
} | |
} |
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(); | |
} | |
} | |
} |
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(); | |
} | |
} | |
} |
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(); | |
} | |
} | |
} |
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(); | |
} | |
} | |
} |
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(); | |
} | |
} | |
} |
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
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.