Dot.Blog

 Dans le monde du développement d'applications mobiles, l'animation est un élément crucial pour améliorer l'expérience utilisateur. .NET MAUI Community Toolkit offre une panoplie d'outils pour créer des animations personnalisées de manière simplifiée. Dans cet article, nous explorerons comment utiliser les classes BaseAnimation et AnimationBehavior fournies par le toolkit pour créer des animations sur mesure.

Configuration du Package NuGet

Avant de plonger dans le code, il est nécessaire d'installer le package NuGet CommunityToolkit.Maui. Pour ce faire, effectuez un clic droit sur le nom de votre projet dans le panneau "Solution Explorer" et sélectionnez "Manage NuGet Packages". Recherchez et installez CommunityToolkit.Maui. Après l'installation, assurez-vous d'activer CommunityToolkit.Maui dans MauiProgram.cs comme suit :

var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>();
builder.UseMauiCommunityToolkit();

BaseAnimation

La classe BaseAnimation est une classe abstraite qui introduit des propriétés liables telles que Length et Easing, ainsi qu'une méthode abstraite Animate.

Je partirai ici d'une idée simpliste, presque un dessin d'enfant, un fond (à votre guise) et deux images (des PNG par exemple), l'une pour le soleil et l'autre pour un nuage (vous pourrez en ajouter des copies selon si votre humeur est plus ou moins bonne !). Il ne s'agit donc pas d'art pictural, mais de vous montrer le code permettant d'animer facilement des objets visuels. Il n'y aura pas de capture écran car cela impliquerait des GIF animés ou des petites vidéos, ce qui ne me semble pas avoir de valeur ajoutée ici (vous êtes capables d'imaginer un soleil et un nuage sans que je vous en montre, j'en suis convaincu !).

Animation Simple

Supposons que vous ayez un VisualElement qui représente le soleil. Vous souhaitez que ce soleil effectue une rotation de 360 degrés tout en changeant d'échelle. Voici comment vous pouvez créer une telle animation :

public class SunAnimation : CommunityToolkit.Maui.Animations.BaseAnimation
{
    Animation Sun(VisualElement view)
    {
        var animation = new Animation();
        animation.WithConcurrent(f => view.Rotation = f, 0, 360, Microsoft.Maui.Easing.Linear);
        animation.WithConcurrent(f => view.Scale = f, 1, 1.4, Microsoft.Maui.Easing.Linear);
        return animation;
    }
    
    public override Task Animate(VisualElement view)
    {
        view.Animate("Sun", Sun(view), 16, Length, repeat: () => true);
        return Task.CompletedTask;
    }
}

Pour exécuter cette animation, vous pouvez faire comme suit :

var animation = new SunAnimation();
animation.Length = 5000;
animation.Animate(Sun);

Animation pour un Élément Personnalisé

Imaginons maintenant que vous ayez un élément personnalisé appelé Cloud. Vous souhaitez animer ce nuage pour qu'il se déplace et change d'échelle. Voici comment vous pouvez le faire :

public class CloudAnimation : CommunityToolkit.Maui.Animations.BaseAnimation<Cloud>
{
    Animation Cloud(Cloud view)
    {
        var animation = new Animation();
        animation.WithConcurrent(f => view.TranslationX = f, view.TranslationX - 500, view.TranslationX + 1200, Microsoft.Maui.Easing.Linear);
        animation.WithConcurrent(f => view.TranslationY = f, view.TranslationY, view.TranslationY + 300, Microsoft.Maui.Easing.Linear);
        animation.WithConcurrent(f => view.Scale = f, 1, 1.5, Microsoft.Maui.Easing.Linear);
        return animation;
    }
    
    public override Task Animate(Cloud view)
    {
        view.Animate("Cloud", Cloud(view), 16, Length, repeat: () => true);
        return Task.CompletedTask;
    }
}

Dans cet exemple, nous appliquons explicitement l'animation au contrôle Cloud. Nous définissons une animation pour exécuter simultanément 3 animations : TransitionX, TransitionY et Scale. Ensuite, dans la méthode Animate, nous exécutons cette animation pour notre vue.

AnimationBehavior

Si vous souhaitez déclencher l'animation depuis XAML, .NET MAUI Community Toolkit propose AnimationBehavior. Ce comportement permet de déclencher une animation sur n'importe quel VisualElement lorsque la commande AnimateCommand est appelée ou lorsque l'utilisateur appuie sur le contrôle.

<Cloud>
    <Cloud.Behaviors>
        <toolkit:AnimationBehavior>
            <toolkit:AnimationBehavior.AnimationType>
                <animations:CloudAnimation />
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Cloud.Behaviors>
</Cloud>

Conclusion

.NET MAUI Community Toolkit offre une manière élégante et efficace de créer des animations personnalisées dans vos applications MAUI. Grâce à des classes bien conçues comme BaseAnimation et des comportements tels que AnimationBehavior, l'ajout d'animations devient un jeu d'enfant (comme mon dessin naïf facile à imaginer !).

Stay Tuned !