Animações – Xamarin.Forms

Neste artigo demonstro como você pode implementar animações em suas aplicações Xamarin.Forms.

 

 

ADICIONANDO O NUGET PACKAGE

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

1

 

Digite “Xamanimation” e selecione o plugin como demonstrado na imagem a seguir.

2

 

Selecione todos os projetos e clique no botão “Install”.

2

Animações

Comece referenciando o plugin no seu Xaml.

xmlns:xamanimation=”clr-namespace:Xamanimation;assembly=Xamanimation”

Em seguida crie um StoryBoard dentro de ResourceDictionary com a animação desejada, segue alguns exemplos, para saber a lista completa de animações acesse:  https://github.com/jsuarezruiz/Xamanimation

  • x:Key – O Nome da sua animação
  • Target – Referência ao elemento que vai receber a animação.

Rotate

ezgif.com-video-to-gif (1)

<ContentPage.Resources>
<ResourceDictionary>
<xamanimation:StoryBoard
x:Key="LogoAnimation"
Target="{x:Reference Logo}">
<xamanimation:RelRotateToAnimation Rotation="360" Duration="750" />
</xamanimation:StoryBoard>
</ResourceDictionary>
</ContentPage.Resources>

view raw
Rotate.xaml
hosted with ❤ by GitHub

 

Fade

ezgif.com-video-to-gif (2)

<ContentPage.Resources>
<ResourceDictionary>
<xamanimation:StoryBoard
x:Key="LogoAnimation"
Target="{x:Reference Logo}">
<xamanimation:FadeInAnimation Duration="750" />
</xamanimation:StoryBoard>
</ResourceDictionary>
</ContentPage.Resources>

view raw
Fade.xaml
hosted with ❤ by GitHub

 

Heart

ezgif.com-video-to-gif (3)

<ContentPage.Resources>
<ResourceDictionary>
<xamanimation:StoryBoard
x:Key="LogoAnimation"
Target="{x:Reference Logo}">
<xamanimation:HeartAnimation Duration="750" />
</xamanimation:StoryBoard>
</ResourceDictionary>
</ContentPage.Resources>

view raw
Heart.xaml
hosted with ❤ by GitHub

 

Translate

ezgif.com-video-to-gif (4)

<ContentPage.Resources>
<ResourceDictionary>
<xamanimation:StoryBoard
x:Key="LogoAnimation"
Target="{x:Reference Logo}">
<xamanimation:TranslateToAnimation TranslateY="180" TranslateX="95" Duration="750" />
<xamanimation:TranslateToAnimation TranslateY="-180" TranslateX="-95" Duration="750" />
<xamanimation:TranslateToAnimation TranslateY="0" TranslateX="0" Duration="750" />
</xamanimation:StoryBoard>
</ResourceDictionary>
</ContentPage.Resources>

view raw
Translate.xaml
hosted with ❤ by GitHub

ContentPage

Adicione uma Image e um Button.
Dentro do Button crie um EventTrigger, para quando o usuário clicar no botão a animação seja acionada.

<ContentPage.Content>
<StackLayout>
<Image x:Name="Logo" Source="logo.png" VerticalOptions="CenterAndExpand"/>
<Button Text="Start Animation" VerticalOptions="End">
<Button.Triggers>
<EventTrigger Event="Clicked">
<xamanimation:BeginAnimation Animation="{StaticResource LogoAnimation}" />
</EventTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>

view raw
ContentPage.xaml
hosted with ❤ by GitHub

 

Veja como fica o Xaml completo utilizando a animação Translate.

<?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:PlayGroundDemo"
xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"
x:Class="PlayGroundDemo.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<xamanimation:StoryBoard
x:Key="LogoAnimation"
Target="{x:Reference Logo}">
<xamanimation:TranslateToAnimation TranslateY="180" TranslateX="95" Duration="750" />
<xamanimation:TranslateToAnimation TranslateY="-180" TranslateX="-95" Duration="750" />
<xamanimation:TranslateToAnimation TranslateY="0" TranslateX="0" Duration="750" />
</xamanimation:StoryBoard>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<Image x:Name="Logo" Source="logo.png" VerticalOptions="CenterAndExpand"/>
<Button Text="Start Animation" VerticalOptions="End">
<Button.Triggers>
<EventTrigger Event="Clicked">
<xamanimation:BeginAnimation Animation="{StaticResource LogoAnimation}" />
</EventTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “Animações – Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s