Xamarin Forms - Aplicando 3 Animações

Xamarin Forms - Aplicando 3 Animações populares

Neste artigo vou mostrar como aplicar três animações bem populares em aplicações Xamarin Forms usando o Visual Studio com Xamarin e a linguagem C#.

O Xamarin.Forms inclui sua própria infraestrutura de animação que é bem fácil de usar para criar animações simples, sendo também versátil o suficiente para criar animações complexas.

Eu já tratei das animações do Xamarin forms nestes artigos:

Xamarin Forms - Aplicando Animações - II - Macoratti

Xamarin Forms - Aplicando Animações - Macoratti

Hoje veremos 3 animações bem populares que podemos usar em aplicações Xamarin Forms :

Shake - Nesta animação vamos aplicar o efeito de chacoalhar uma view Entry usando o método TranslateTo;
Flip - Nesta animação vamos aplicar o efeito de Girar um Button, substituindo por outro Button com uma cor de fundo diferente.Este efeito pode ser alcançado em 3 etapas:
1. Gire o controle para 90 (-90 para a direita para a esquerda) para que a largura se torne zero pixels
2. Substitua-o pelo outro controle previamente girado para 270 (-270)
3. Gire o novo controle para 360 (-360) e configure a rotação para 0.
Recolher/Expandir (Layout) - Nesta animação vamos recolher a altura do controle (eixo Y), mas você pode também recolher a largura (eixo X).

Recursos usados:

Visual Studio Community 2017
Xamarin

Criando o projeto no Visual Studio 2017 Community

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

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Vamos criar uma pasta Views no projeto onde vamos incluir as Views usadas no projeto.

Definindo o código inicial

Abra o arquivo App.cs e altere o código conforme abaixo:

using Xamarin.Forms;

namespace XF_Bindable_Spinner
{
    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new MainPage());
        }
       ...
}

Aqui definimos a página MainPage como a página que vai iniciar a nossa aplicação.

Definindo o código da MainPage

Abra o arquivo MainPage.xaml e inclua 3 botões de comando (Buttons) definindo em cada um um evento Clicked a partir do qual iremos chamar as outras páginas do projeto:

<?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_Animacao1"
             x:Class="XF_Animacao1.MainPage"
             Title="Três Exemplos de Animações">

    <StackLayout>

        <Button x:Name="btnAnima1" Text="Shake Animation" BackgroundColor="Red" WidthRequest="150"  
                TextColor="Black"  Clicked="ShakePageClick" Margin="25" />
        <Button x:Name="btnAnima2" Text="Flip Animation" BackgroundColor="#0997d3" WidthRequest="150" 
                TextColor="Black"  Clicked="FlipPageClick" Margin="25" />
        <Button x:Name="btnAnima3" Text="Layout Animation" BackgroundColor="Green" WidthRequest="150" 
                TextColor="Black" Clicked="LayoutPageClick" Margin="25" />

    </StackLayout>

</ContentPage>

Agora abra o arquivo MainPage.xaml.cs e defina o código para os eventos de cada um dos Buttons:

using System;
using Xamarin.Forms;
using XF_Animacao1.Views;

namespace XF_Animacao1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void ShakePageClick(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ShakePage());
        }

        private async void FlipPageClick(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new FlipPage());
        }

        private async void LayoutPageClick(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new LayoutPage());
        }
    }
}

Neste código usamos o método PushAsync() para navegar para as páginas onde iremos aplicar as animações.

Criando as páginas das animações

Na pasta Views vamos incluir 3 Views do tipo Content Page via opção:

Project->Add New Item ->
Xamarin Forms -> Content Page

Definindo os seguintes nomes para cada View:

ShakePage.xaml
FlipPage.xaml
LayoutPage.xaml

1- Definindo a view ShakePage

Abra o arquivo ShakePage.xaml e inclua o 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"
             x:Class="XF_Animacao1.Views.ShakePage"
             Title="Animação - Chacoalhar">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Button x:Name="btnChacoalhar" Text="Chacoalhar" BackgroundColor="#00a4ef" WidthRequest="100"
                    TextColor="Black"  Clicked="ChacoalhaClicked" Margin="25" />
            <Entry x:Name="entryTexto" Placeholder="Me chacoalha... !" BackgroundColor="FloralWhite" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Agora abra o arquivo ShakePage.xaml.cs e inclua o código a seguir:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XF_Animacao1.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ShakePage : ContentPage
    {
        public ShakePage ()
        {
	InitializeComponent ();
        }

        private async void ChacoalhaClicked(object sender, EventArgs e)
        {
            uint timeout = 50;
            await entryTexto.TranslateTo(-15, 0, timeout);
            await entryTexto.TranslateTo(15, 0, timeout);
            await entryTexto.TranslateTo(-10, 0, timeout);
            await entryTexto.TranslateTo(10, 0, timeout);
            await entryTexto.TranslateTo(-5, 0, timeout);
            await entryTexto.TranslateTo(5, 0, timeout);
            entryTexto.TranslationX = 0;
        }
    }
}

2- Definindo a view FlipPage

Abra o arquivo FlipPage.xaml e digite o 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"
             x:Class="XF_Animacao1.Views.FlipPage"
             Title="Animação - Girar">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Button x:Name="btnFlip1" Text="Girar" HorizontalOptions="Center" WidthRequest="250" 
                    BackgroundColor="Red" TextColor="Black" FontSize="40" Clicked="bntFlipClick" />
            <Button x:Name="btnFlip2" Text="Gire-me..." HorizontalOptions="Center" BackgroundColor="Green" 
                    WidthRequest="250" TextColor="Black" FontSize="40" IsVisible="false" Clicked="bntFlipClick" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Abra o arquivo FlipPage.xaml.cs e inclua o código abaixo:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XF_Animacao1.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FlipPage : ContentPage
    {
        public FlipPage ()
        {
	InitializeComponent ();
        }

        private async void bntFlipClick(object sender, EventArgs e)
        {
            uint timeout = 500;
            if (btnFlip1.IsVisible)
            {
                btnFlip2.RotationY = -270;
                await btnFlip1.RotateYTo(-90, timeout, Easing.SpringIn);
                btnFlip1.IsVisible = false;
                btnFlip2.IsVisible = true;
                await btnFlip2.RotateYTo(-360, timeout, Easing.SpringOut);
                btnFlip2.RotationY = 0;
            }
            else
            {
                btnFlip1.RotationY = -270;
                await btnFlip2.RotateYTo(-90, timeout, Easing.SpringIn);
                btnFlip2.IsVisible = false;
                btnFlip1.IsVisible = true;
                await btnFlip1.RotateYTo(-360, timeout, Easing.SpringOut);
                btnFlip1.RotationY = 0;
            }
        }
    }
}

3- Definindo a view LayoutPage

Abra o arquivo LayoutPage.xaml e inclua o código a seguir:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Animacao1.Views.LayoutPage"
             Title="Animação - Layout">
    <ContentPage.Content>
        <StackLayout WidthRequest="350" VerticalOptions="Center" HorizontalOptions="Center" Spacing="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <BoxView Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#0997d3" />
                <Label x:Name="lblHeader" Grid.Column="0" Text="Cabeçalho" HorizontalOptions="Start" 
                       FontAttributes="Bold" FontSize="36" Margin="25,0,0,0" />
                <Button x:Name="btnRodar" Text="↓" Grid.Column="1" Clicked="btnRodar_Click" 
                        BackgroundColor="Transparent" Rotation="180" FontSize="36" 
                        VerticalOptions="Center" FontAttributes="Bold" TextColor="Black" Margin="0,0,25,0" />
            </Grid>
            <BoxView x:Name="boxConteudo" BackgroundColor="Yellow" HeightRequest="300" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Agora abra o arquivo LayoutPage.xaml.cs e vamos incluir o código a seguir:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XF_Animacao1.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LayoutPage : ContentPage
    {
        public LayoutPage ()
        {
	InitializeComponent ();
        }

        bool _colapsar;
        private async void btnRodar_Click(object sender, EventArgs e)
        {
            if (_colapsar)
            {
                await Task.WhenAll(new List<Task> { boxConteudo.LayoutTo(new Rectangle(boxConteudo.Bounds.X, 
                    boxConteudo.Bounds.Y, boxConteudo.Bounds.Width, 300), 500, Easing.CubicOut),
                    boxConteudo.RotateTo(180, 500, Easing.SpringOut) });
                _colapsar = false;
            }
            else
            {
                await Task.WhenAll(new List<Task> { boxConteudo.LayoutTo(new Rectangle(boxConteudo.Bounds.X, 
                    boxConteudo.Bounds.Y, boxConteudo.Bounds.Width, 0), 500, Easing.CubicIn),
                    boxConteudo.RotateTo(360, 500, Easing.SpringOut) });
                btnRodar.Rotation = 0;
                _colapsar = true;
            }
        }
    }
}

Executando o projeto iremos obter o seguinte resultado:

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

"Disse-lhe, pois, Pilatos: Logo tu és rei? Jesus respondeu: Tu dizes que eu sou rei. Eu para isso nasci, e para isso vim ao mundo, a fim de dar testemunho da verdade. Todo aquele que é da verdade ouve a minha voz."
João 18:37

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

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

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

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

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

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Referências:

José Carlos Macoratti

Xamarin Forms - Aplicando Animações - II - Macoratti

Xamarin Forms - Aplicando Animações - Macoratti