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