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…”.
Digite “Xamanimation” e selecione o plugin como demonstrado na imagem a seguir.
Selecione todos os projetos e clique no botão “Install”.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:RelRotateToAnimation Rotation="360" Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Fade
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:FadeInAnimation Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Heart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:HeartAnimation Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Translate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Veja como fica o Xaml completo utilizando a animação Translate.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 
Parabens pelos artigos, tenho acompanhado e tem me ajudado bastante. Sempre claro e objetivo. Obrigado…
CurtirCurtir
Obrigado Anderson,
Fico feliz em saber disso. 🙂
Sim, a ideia é exatamente essa, postagens claras e objetivas.
CurtirCurtir