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
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:RelRotateToAnimation Rotation="360" Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Fade
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:FadeInAnimation Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Heart
| <ContentPage.Resources> | |
| <ResourceDictionary> | |
| <xamanimation:StoryBoard | |
| x:Key="LogoAnimation" | |
| Target="{x:Reference Logo}"> | |
| <xamanimation:HeartAnimation Duration="750" /> | |
| </xamanimation:StoryBoard> | |
| </ResourceDictionary> | |
| </ContentPage.Resources> |
Translate
| <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.
| <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.
| <?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.
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