AnimationBehavior
AnimationBehavior es un Behavior que proporciona la capacidad de animar cualquier VisualElement al que se adjunte. De forma predeterminada, un TapGestureRecognizer se adjunta al VisualElement y desencadena la animación asociada cuando ese reconocedor detecta que el usuario pulsó o clicó en el VisualElement.
La propiedad AnimationType debe establecerse. Se pueden encontrar posibles opciones para esto en Animaciones.
Importante
Los comportamientos del kit de herramientas de la comunidad .NET MAUI no establecen el elemento BindingContext de un comportamiento, ya que los comportamientos se pueden compartir y aplicar a varios controles a través de estilos. Para obtener más información, consulte Comportamientos de .NET MAUI
Sintaxis
En los ejemplos siguientes, se muestra cómo agregar el AnimationBehavior a un Label y usar el FadeAnimation para animar un cambio en la opacidad.
XAML
Incluir el espacio de nombres XAML
Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Por lo tanto, el siguiente:
<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>
Se modificaría para incluir el xmlns de la siguiente manera:
<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>
Uso de 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#
El AnimationBehavior se puede usar de la siguiente manera en 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;
}
}
Marcado de C#
Nuestro paquete CommunityToolkit.Maui.Markup proporciona una forma mucho más concisa de usar este Behavior en 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
}
});
}
}
En la captura de pantalla siguiente, se muestra el AnimationBehavior resultante en Android: 
Ejemplos adicionales
Control de la interacción del usuario
AnimationBehavior responde a pulsaciones y clics por el usuario. Es posible controlar esta interacción a través de la propiedad Command en el comportamiento.
En el ejemplo siguiente, se muestra cómo adjuntar el AnimationBehavior a un Image y enlazar la propiedad Command a una propiedad en un modelo de vista.
Ver
<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>
Modelo de vista
public ICommand ThumbsUpCommand { get; }
public MyViewModel()
{
ThumbsUpCommand = new Command(() => OnThumbsUp())
}
public void OnThumbsUp()
{
// perform the thumbs up logic.
}
Desencadenamiento mediante programación de la animación
AnimationBehavior proporciona la capacidad de desencadenar animaciones mediante programación. AnimateCommand se puede ejecutar para desencadenar el tipo de animación asociado.
En el ejemplo siguiente, se muestra cómo agregar el AnimationBehavior a un Entry, enlazar el AnimatedCommand y, a continuación, ejecutar el comando desde un modelo de vista.
Ver
<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>
Modelo de vista
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.
}
Nota:
La propiedad AnimateCommand es de solo lectura y espera un modo de enlace de BindingMode.OneWayToSource. Tampoco es necesario asignar un valor a la propiedad de comando en el modelo de vista (TriggerAnimationCommand en el ejemplo anterior). Esto se debe a que el enlace asignará el valor a la propiedad a partir del valor creado en el AnimationBehavior.
Esto proporciona la capacidad de desencadenar una animación desde un modelo de vista.
Desencadenamiento de la animación a partir de eventos de control
El AnimationBehavior proporciona las mismas características subyacentes que el EventToCommandBehavior. Mediante el uso de la propiedad EventName, se puede desencadenar el tipo de animación asociado cuando se genere un evento que coincida con el nombre proporcionado.
Con la siguiente implementación de animación de ejemplo:
class SampleScaleToAnimation : BaseAnimation
{
public double Scale { get; set; }
public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}
En el ejemplo siguiente, se muestra cómo se pueden asignar dos instancias de AnimationBehavior a un Entry; una para desencadenar una animación cuando se genere el evento Centrado y otra para desencadenar una animación diferente cuando se genere el evento Descentrado.
<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>
Ejemplos
Puede encontrar un ejemplo de este comportamiento en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.
API
Puede encontrar el código fuente de AnimationBehavior en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.
Vínculos útiles
.NET MAUI Community Toolkit