AnimationBehavior

AnimationBehavior est un Behavior qui permet d’animer tout VisualElement auquel il est attaché. Par défaut, un TapGestureRecognizer est attaché au VisualElement associé et déclenche l’animation associée lorsque ce module de reconnaissance détecte que l’utilisateur a appuyé ou cliqué sur le VisualElement.

La propriété AnimationType doit être définie, et les options possibles pour ce faire sont disponibles dans Animations.

Syntaxe

Les exemples suivants montrent comment ajouter un AnimationBehavior à un Label et utiliser FadeAnimation pour animer une modification de l’opacité.

XAML

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Il en résulte ce qui suit :

<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>

Serait modifié pour inclure le xmlns de la manière suivante :

<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>

Utiliser 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#

Le AnimationBehavior peut être utilisé de la manière suivante dans 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;
    }
}

Balisage C#

Notre package CommunityToolkit.Maui.Markup offre un moyen beaucoup plus concis d’utiliser ce 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
                }
            });
    }
}

La capture d’écran suivante montre l’AnimationBehavior obtenu sur Android :

Exemples supplémentaires

Gérer l’interaction utilisateur

AnimationBehavior répond aux appuis et aux clics de l’utilisateur et il est possible de gérer cette interaction via la propriété Command sur le comportement.

L’exemple suivant montre comment attacher AnimationBehavior à une Image et lier la propriété Command à une propriété sur un modèle d’affichage.

Affichage

<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>

Afficher le modèle

public ICommand ThumbsUpCommand { get; }

public MyViewModel()
{
    ThumbsUpCommand = new Command(() => OnThumbsUp())
}

public void OnThumbsUp()
{
    // perform the thumbs up logic.
}

Déclencher l’animation de manière programmatique

AnimationBehavior permet de déclencher des animations de manière programmatique. AnimateCommand être exécuté pour déclencher le type d’animation associé.

L’exemple suivant montre comment ajouter le AnimationBehavior à une Entry, lier la AnimatedCommand et exécuter la commande depuis un modèle d’affichage.

Affichage

<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>

Afficher le modèle

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.
}

Cela permet de déclencher une animation depuis un modèle d’affichage.

Déclencher l’animation depuis des évènements de contrôle

AnimationBehavior fournit les mêmes fonctionnalités sous-jacentes que EventToCommandBehavior. Grâce à l’utilisation de la propriété EventName, le type d’animation associé peut être déclenché lorsqu’un évènement correspondant au nom fourni est déclenché.

Utiliser l’exemple d’implémentation d’animation suivant :

class SampleScaleToAnimation : BaseAnimation
{
    public double Scale { get; set; }

    public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}

L’exemple suivant montre comment affecter deux instances AnimationBehavior à une Entry ; une pour déclencher une animation lorsque l’évènement Focus est déclenché, et une autre pour déclencher une animation différente lorsque l’événement Unfocused est déclenché.

<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>

Exemples

Vous trouverez un exemple de ce comportement en action dans l’Exemple d’application du kit de ressources de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deAnimationBehavior sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.

Liens utiles

• Comportements du kit d’outils de la communauté .NET MAUI
• Créer des animations personnalisées