Xamarin Forms - Tela de apresentação animada

 Neste artigo eu vou mostrar como podemos criar uma tela de apresentação animada em uma aplicação Xamarin Forms.

Esse artigo é essencialmente prático visto que os conceitos de animação aplicados podem ser consultados nos links abaixo:

Vamos criar uma tela de apresentação com animação de uma imagem que será exibida na inicialização da aplicação e depois vai apresentar a página principal.

Recursos Usados

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community update 15.5 e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_ApresentacaoAnimada;

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project
  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado.

A seguir selecione uma imagem e a copie para a pasta Resources/drawable do projeto Android. Eu vou usar a imagem maco1b.jpg.

Se você for executar a aplicação no iOS deverá copiar a imagem também para a pasta Resources.

Criando a pagina de apresentação :  PaginaInicial.cs

Vamos criar a página de apresentação definindo um arquivo chamado PaginaInicial.cs.

No menu Project clique em Add New Item;

A seguire selecione Xamarin.Forms e o template Content Page(C#) pois não iremos usar código XAML;

A seguir inclua o código abaixo nesta classe:

using Xamarin.Forms;
namespace XF_ApresentacaoAnimada
{
    public class PaginaInicial : ContentPage
    {
        // Define a imagem a ser exibida
        // que deverá ser copiada para pasta
        // Resources/drawable do projeto Android
        Image splashImage;
        public PaginaInicial ()
        {
            //define que a navegação não possui barra
            NavigationPage.SetHasNavigationBar(this, false);
            var sub = new AbsoluteLayout();
            splashImage = new Image
            {
                //define a imagem e seu tamanho
                Source = "maco1b.jpg",
                WidthRequest = 299,
                HeightRequest = 54
            };
            //define um AbsoluteLayout
            AbsoluteLayout.SetLayoutFlags(splashImage,
               AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(splashImage,
             new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
            sub.Children.Add(splashImage);
            //define a cor de fundo
            this.BackgroundColor = Color.FromHex("#f0f8ff");
            this.Content = sub;
        }
        //executa ao iniciar a aplicação
        protected override async void OnAppearing()
        {
            base.OnAppearing();
            await splashImage.ScaleTo(1, 2000);
            await splashImage.ScaleTo(0.1, 1500, Easing.Linear);
            await splashImage.ScaleTo(0.9, 1500, Easing.Linear);
            await splashImage.ScaleTo(10, 1500, Easing.Linear);
            // parte dois da animação  
            await splashImage.TranslateTo(0, 200, 1500, Easing.BounceIn);
            await splashImage.ScaleTo(2, 1500, Easing.CubicIn);
            await splashImage.RotateTo(360, 1500, Easing.SinInOut);
            await splashImage.ScaleTo(1, 1500, Easing.CubicOut);
            await splashImage.TranslateTo(0, -200, 1500, Easing.BounceOut);
            //carrega a pagina principal
            Application.Current.MainPage = new NavigationPage(new MainPage());  
        }
    }
}

O código já esta comentado e dispensa mais detalhes.

Agora abra o arquivo App.xaml.cs e defina o código a seguir:

using Xamarin.Forms;
namespace XF_ApresentacaoAnimada
{
           public partial class App : Application
	{
		public App ()
		{
			InitializeComponent();
                                MainPage = new XF_ApresentacaoAnimada.PaginaInicial();
		}
		protected override void OnStart ()
		{
			// Handle when your app starts
		}
		protected override void OnSleep ()
		{
			// Handle when your app sleeps
		}
		protected override void OnResume ()
		{
			// Handle when your app resumes
		}
	}
}

No código acima estamos invocando a página PaginaInicial() que vai fazer a apresentação.

Definindo o código na página MainPage

Abra o arquivo MainPage.xaml e inclua no código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_Apresentacao"
             x:Class="XF_ApresentacaoAnimada.MainPage"
             Title="Menu">
	<Label Text="Macoratti .net - Quase tudo para .NET" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
</ContentPage>

Esta página é a página principal que será exibida após a animação.

Executando o projeto usando o emulador Genymotion para o Android iremos obter o seguinte resultado:
 

Pegue o código do projeto compartilhado aqui :   XF_ApresentacaoAnimada.zip (sem as referências)

Todavia digo-vos a verdade, que vos convém que eu vá; porque, se eu não for, o Consolador não virá a vós; mas, quando eu for, vo-lo enviarei.
E, quando ele vier, convencerá o mundo do pecado, e da justiça e do juízo.
Do pecado, porque não crêem em mim;
Da justiça, porque vou para meu Pai, e não me vereis mais;
 João 16:7-10
 

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti