Xamarin Forms  -  Aplicando Animações - II  
 Neste artigo vou mostrar como aplicar animações em aplicações Xamarin Forms usando o Visual Studio com Xamarin e a linguagem C#.

Na primeira parte do artigo apresentei os conceitos básicos sobre as classes de animação do Xamarin Forms e aplicamos uma animação a um texto.

Vamos agora aplicar uma animação a uma imagem.

Recursos usados:

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

Aplicando a animação a uma imagem na página PageAnimaImagem

Abra o projeto XF_Animation criado na primeira parte do artigo usando o Visual Studio Community 2015;

Então vamos abrir o arquivo PageAnimaImagem.xaml e definir a propriedade Title desta página conforme 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_Animations.PageAnimaImagem"
             Title="Animação de Imagem">
</ContentPage>

Precisamos definir a imagem que vamos usar e como eu vou usar imagens locais teremos que selecionar uma imagem e copiar esta imagem para a respectiva pasta de cada projeto onde pretendemos fazer o deploy da aplicação.

Vou usar a imagem monkey.jpg :

Para aplicações Android a pasta das imagens fica localizada dentro da pasta Resources/drawable e demais pastas conforme a resolução da imagem utilizada.

A seguir temos um resumo com orientações para você saber onde deve copiar a imagem quando usar imagens locais para cada um dos projetos criado no Xamarin Forms:

Como eu vou emular e testar o projeto somente no Android vou copiar a imagem monkey.jpg na pasta Resources/drawable. (Lembre-se que imagens no Android não podem conter espaços no nome)

Agora abra o arquivo PageAnimacaoImagem.xaml.cs e vamos criar uma Image 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 PageAnimaImagem : ContentPage
    {
        Image imagem;
        public PageAnimaImagem()
        {
            InitializeComponent();
            imagem = new Image
            {
                Source= "monkey.jpg",
                Aspect=Aspect.AspectFit,
            };
            Content = new StackLayout
            {
                VerticalOptions = LayoutOptions.Center,
                Children = { imagem }
            };
        }
        protected async override void OnAppearing()
        {
            base.OnAppearing();
            await imagem.TranslateTo(0, 200, 2000, Easing.BounceIn);
            await imagem.ScaleTo(2, 2000, Easing.CubicIn);
            await imagem.RotateTo(360, 2000, Easing.SinInOut);
            await imagem.ScaleTo(1, 2000, Easing.CubicOut);
            await imagem.TranslateTo(0, -200, 2000, Easing.BounceOut);
            await imagem.ScaleTo(2, 2000, Easing.CubicIn);
            await imagem.TranslateTo(0, 200, 2000, Easing.BounceIn);
        }
    }
}

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 a imagem iremos obter:

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

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