Xamarin Forms  -  Aplicando Animações  Simples - I  
 Neste artigo vou mostrar como aplicar animações 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.

As classes de animação Xamarin.Forms podem ser aplicadas a diferentes propriedades dos elementos visuais, com uma animação típica que altera progressivamente uma propriedade de um valor para outro durante um período de tempo. Até o momento não há nenhuma interface XAML para as classes de animação Xamarin.Forms. No entanto, as animações podem ser encapsuladas em behaviors (comportamentos) e, em seguida, referenciadas a partir do código XAML.

Podemos ter as seguintes abordagens para criar animações:

  1. Animações Easing :  A classe Easing do Xamarin.Forms permite especificar uma função de transferência que controla como as animações aceleram ou diminuem a velocidade enquanto estão sendo executadas.
  2. Animações Simples :  A classe ViewExtensions fornece métodos de extensão que podem ser usados para construir animações simples que giram, escalam, traduzem e apagam instâncias do VisualElement.
  3. Animações Customizadas :  A classe Animation é o bloco de construção de todas as animações Xamarin.Forms, com os métodos de extensão na classe ViewExtensions criando um ou mais objetos Animation. Podemos assim usar a classe Animation para criar e cancelar animações, sincronizar várias animações e criar animações personalizadas que animam propriedades que não são animadas pelos métodos de animação existentes.

Neste artigo eu vou usar os métodos da classe ViewExtensions e as funções da classe Easing para criar algumas animações simples.

A classe ViewExtensions possui os seguintes métodos:

CancelAnimations(VisualElement) Aborta as animações TranslateTo, LayoutTo, RotateTo, ScaleTo e FadeTo no elemento view.
FadeTo Retorna uma task(tarefa) que executa o fade que é descrita pelos parâmetros de opacidade, comprimento e facilidade.
LayoutTo Retorna uma tarefa que facilita os limites do VisualElement que é especificado pela view para o retângulo que é especificado pelo parâmetro bounds.
RelRotateTo Gira o VisualElement que é especificado pela view a partir da sua rotação atual por derivação.
RelScaleTo Retorna uma tarefa que dimensiona o VisualElement que é especificado pela view a partir da sua escala atual para dscale.
RotateTo Retorna uma tarefa que executa a rotação descrita pelos parâmetros de rotação, comprimento e facilitação.
RotateXTo Retorna uma tarefa que distorce o eixo Y pela opacidade, levando tempo e usando a flexibilização.
RotateYTo Retorna uma tarefa que distorce o eixo Y pela opacidade, levando tempo e usando a flexibilização.
ScaleTo Retorna uma tarefa que dimensiona o VisualElement que é especificado pela view para escala absoluta.
TranslateTo Anima as propriedades TranslationX and TranslationY de um elemento a partir de seus valores atuais para novos valores.

A classe Easing do Xamarin.Forms permite especificar uma função de transferência que controla como as animações aceleram ou diminuem a velocidade enquanto estão sendo executadas. Esta classe define as seguintes funções que podem ser usadas para criar animações simples:

Dessa forma, podemos combinar os métodos dessas classes fazendo com que o métodos de animação da classe ViewExtensions permitam que uma função de atenuação(Easing) seja definida como parâmetro do método final.

Exemplo:

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

Ao especificar uma função de atenuação para uma animação, a velocidade de animação torna-se não-linear e produz o efeito fornecido pela função de atenuação. A omissão de uma função de atenuação ao criar uma animação faz com que a animação use a função de atenuação Linear padrão, que produz uma velocidade linear.

Depois de toda essa teoria vamos ver na prática como criar algumas animações simples

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o projeto no Visual Studio 2015 Community

Abra o Visual Studio Community 2015 e clique em New Project;

Selecione Visual C#, o template Cross Plataform e a seguir Blank App (Xamarin.Forms Portable);

Nota :  A opção Portable (Portable Class Library - PCL ) - Inclui todo o código comum em uma biblioteca de vínculo dinâmico (DLL) que pode então ser referenciada a partir de outros projetos;

Informe o nome XF_Animation e clique no botão OK;

Ao clicar no botão OK, será criada uma solução contendo 4 projetos. (Dependendo do seu ambiente pode haver alguma variação nos projetos.)

O projeto comum possui a classe App.cs que irá conter o código compartilhado e que vamos usar neste artigo.

Ao final teremos as referências incluídas em todos os projetos da nossa solução.

Selecione o projeto e a seguir clique no menu Project e em Add New Item;

Selecione Cross Platform e o template Forms Xaml Page e informe o nome MainPage.xaml:

Esta será a página principal da nossa aplicação.

Repita o procedimento acima e crie as páginas PageAnimaTexto.xaml e PageAnimaImagem.xaml no projeto.

Então vamos abrir o arquivo App.cs e alterar o código conforme abaixo:

using Xamarin.Forms;
namespace XF_Bindable_Spinner
{
    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new MainPage());
        }
        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
        }
    }
}

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 dois 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"
             x:Class="XF_Animations.MainPage"
             Title="Animação em Xamarin Forms">    
    <StackLayout>
        <Button x:Name="btnAnimaTexto" Text="Animação de Texto" 
                BackgroundColor="Yellow"
                Clicked="btnAnimaTexto_Clicked" />        
        <Button x:Name="btnAnimaImagem" Text="Animação de Imagem" 
                BackgroundColor="Aqua"
                Clicked="btnAnimaImagem_Clicked" />
    </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;
namespace XF_Animations
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void btnAnimaTexto_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new PageAnimaTexto());
        }
        private void btnAnimaImagem_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new PageAnimaImagem());
        }
    }
}

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

Aplicando a animação para texto na página PageAnimaTexto

Abra o arquivo PageAnimacaoTexto.xaml e defina a propriedade Title da página :

<?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_Animations.PageAnimaTexto"
             Title="Animação de Texto">
</ContentPage>

Agora abra o arquivo PageAnimacaoTexto.xaml.cs e vamos criar uma Label com um texto e aplicar a animação usando o código a seguir no evento OnAppearing da página:

using Xamarin.Forms;
namespace XF_Animations
{
    public partial class PageAnimaTexto : ContentPage
    {
        Label lblTexto;
        public PageAnimaTexto()
        {
            InitializeComponent();
            lblTexto = new Label
            {
                Text = "Macoratti .net - Xamarin Forms",
                TextColor = Color.Blue,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                HorizontalTextAlignment = TextAlignment.Center,
                Opacity = 0
            };
            Content = new StackLayout
            {
                VerticalOptions = LayoutOptions.Center,
                Children = { lblTexto }
            };
        }
        protected async override void OnAppearing()
        {
            base.OnAppearing();
            await lblTexto.FadeTo(1, 5750, Easing.BounceOut);
            await lblTexto.ScaleTo(2, 2500, Easing.CubicInOut);
            await lblTexto.ScaleTo(1, 1500, Easing.Linear);
            await lblTexto.ScaleTo(3, 2500, Easing.CubicInOut);
            await lblTexto.ScaleTo(1, 1500, Easing.Linear);
            await lblTexto.RotateTo(45, 2000, Easing.Linear);
            await lblTexto.RotateTo(90, 2000, Easing.Linear);
            await lblTexto.RotateTo(120, 2000, Easing.Linear);
            await lblTexto.RotateTo(180, 3000, Easing.Linear);
            await lblTexto.RotateTo(270, 2000, Easing.Linear);
            await lblTexto.RotateTo(360, 2000, Easing.Linear);
        }
    }
}

Estamos sobrescrevendo o evento OnAppearing() e assim personalizamos o comportamento imediatamente antes de a página se tornar visível aplicando os métodos da classe ViewExtensions e as funções da classe Easing.

Executando o projeto e clicando no botão para animar o texto iremos obter:

Na segunda parte do artigo vamos aplicar a animação a uma imagem.

Pegue o código das páginas aqui :  XF_Animacao1.zip (sem as referências)

Mas a hora vem, e agora é, em que os verdadeiros adoradores adorarão o Pai em espírito e em verdade; porque o Pai procura a tais que assim o adorem.
Deus é Espírito, e importa que os que o adoram o adorem em espírito e em verdade.
 João 4:23,24

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 ?

Referências:

José Carlos Macoratti