AnimationBehavior
O AnimationBehavior é um Behavior que fornece a capacidade de animar qualquer VisualElement ao qual ele está anexado. Por padrão, um TapGestureRecognizer é anexado ao VisualElement e dispara a animação associada quando esse reconhecedor detecta que o usuário tocou ou clicou no VisualElement.
É necessário definir a propriedade AnimationType e as opções possíveis para isso podem ser encontradas em Animações.
Importante
Os comportamentos do .NET MAUI Community Toolkit não definem o BindingContext de um comportamento, porque os comportamentos podem ser compartilhados e aplicados a vários controles por meio de estilos. Para mais informações confira Comportamentos do .NET MAUI
Sintaxe
Os exemplos a seguir mostram como adicionar o AnimationBehavior a um Label e usar o FadeAnimation para animar uma alteração na opacidade.
XAML
Incluir o namespace XAML
Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Portanto, o seguinte:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
</ContentPage>
Seria modificado para incluir o xmlns conforme o seguinte:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
</ContentPage>
Usando o AnimationBehavior
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.AnimationBehaviorPage"
x:Name="Page">
<Label Text="Click this Label">
<Label.Behaviors>
<toolkit:AnimationBehavior>
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation Opacity="0.5" />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Label.Behaviors>
</Label>
</ContentPage>
C#
O AnimationBehavior pode ser usado da seguinte maneira em C#:
class AnimationBehaviorPage : ContentPage
{
public AnimationBehaviorPage()
{
var label = new Label
{
Text = "Click this Label"
};
var animationBehavior = new AnimationBehavior
{
AnimationType = new FadeAnimation
{
Opacity = 0.5
}
};
label.Behaviors.Add(animationBehavior);
Content = label;
}
}
Markup do C#
Nosso pacote CommunityToolkit.Maui.Markup fornece uma maneira muito mais concisa de usar esse Behavior em C#.
using CommunityToolkit.Maui.Markup;
class AnimationBehaviorPage : ContentPage
{
public AnimationBehaviorPage()
{
Content = new Label()
.Text("Click this label")
.Behaviors(new AnimationBehavior
{
AnimationType = new FadeAnimation
{
Opacity = 0.5
}
});
}
}
A captura de tela a seguir mostra o AnimationBehavior resultante no Android: 
Mais exemplos
Lidando com a interação do usuário
O AnimationBehavior responde aos toques e cliques do usuário, é possível lidar com essa interação por meio da propriedade Command no comportamento.
O exemplo a seguir mostra como anexar o AnimationBehavior a uma Image e associar a propriedade Command a uma propriedade em um modelo de exibição.
Exibir
<Image Source="thumbs-up.png" x:Name="ThumbsUpImage">
<Image.Behaviors>
<toolkit:AnimationBehavior
Command="{Binding ThumbsUpCommand}"
BindingContext="{Binding Path=BindingContext, Source={x:Reference ThumbsUpImage}, x:DataType=Image}">
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Image.Behaviors>
</Image>
Exibir modelo
public ICommand ThumbsUpCommand { get; }
public MyViewModel()
{
ThumbsUpCommand = new Command(() => OnThumbsUp())
}
public void OnThumbsUp()
{
// perform the thumbs up logic.
}
Disparando programaticamente a animação
O AnimationBehavior fornece a capacidade de disparar animações programaticamente. O AnimateCommand pode ser executado para disparar o tipo de animação associado.
O exemplo a seguir mostra como adicionar o AnimationBehavior a uma Entry, associar o AnimatedCommand e, em seguida, executar o comando de um modelo de exibição.
Exibir
<Entry Placeholder="First name (Required)"
Text="{Binding FirstName}"
x:Name="FirstNameEntry">
<Entry.Behaviors>
<toolkit:AnimationBehavior
AnimateCommand="{Binding TriggerAnimationCommand}"
BindingContext="{Binding Path=BindingContext, Source={x:Reference FirstNameEntry}, x:DataType=Entry}">
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Entry.Behaviors>
</Entry>
Exibir modelo
private string firstName;
public string FirstName
{
get => firstName;
set => SetProperty(ref firstName, value);
}
public ICommand TriggerAnimationCommand { get; set; }
public void Save()
{
if (string.IsNullOrEmpty(FirstName))
{
TriggerAnimationCommand.Execute(CancellationToken.None);
return;
}
// save code.
}
Observação
A propriedade AnimateCommand é somente leitura e espera um modo de associação de BindingMode.OneWayToSource. Você também não precisa atribuir um valor à propriedade comando em seu modelo de exibição (TriggerAnimationCommand no exemplo acima), isso ocorre porque a associação atribuirá o valor à sua propriedade a partir do valor criado no AnimationBehavior.
Isso fornece a capacidade de disparar uma animação de dentro de um modelo de exibição.
Disparando a animação de eventos de controle
O AnimationBehavior fornece os mesmos recursos subjacentes que o EventToCommandBehavior. Por meio do uso da propriedade EventName, o tipo de animação associado pode ser disparado quando um evento que corresponde ao nome fornecido é acionado.
Usando a seguinte implementação de animação de exemplo:
class SampleScaleToAnimation : BaseAnimation
{
public double Scale { get; set; }
public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}
O exemplo a seguir mostra como podemos atribuir duas instâncias AnimationBehavior a uma Entry; uma para disparar uma animação quando o evento Focalizado é acionado e outra para disparar uma animação diferente quando o evento Sem foco é acionado.
<Entry Placeholder="Animate on Focused and Unfocused">
<Entry.Behaviors>
<toolkit:AnimationBehavior EventName="Focused">
<toolkit:AnimationBehavior.AnimationType>
<behaviorPages:SampleScaleToAnimation
Easing="{x:Static Easing.Linear}"
Length="100"
Scale="1.05"/>
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
<toolkit:AnimationBehavior EventName="Unfocused">
<toolkit:AnimationBehavior.AnimationType>
<behaviorPages:SampleScaleToAnimation
Easing="{x:Static Easing.Linear}"
Length="100"
Scale="1"/>
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Entry.Behaviors>
</Entry>
Exemplos
Você pode encontrar um exemplo desse comportamento em ação no Aplicativo de exemplo do .NET MAUI Community Toolkit.
API
O código-fonte do AnimationBehavior pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.
Links úteis
.NET MAUI Community Toolkit