Amélioration de l’apparence de l’application .net Maui à l’aide d’animations Lottie

Dans cet article, nous analyserons comment intégrer les animations Lottie dans vos applications .net Maui, vous permettant d’ajouter du mouvement et du professionnalisme à vos écrans graphiques.

Commençons!

Qu’est-ce qu’une animation Lottie?

Une animation Lottie est un type d’animation à base de vecteur, représentée dans Json Format, qui lui permet d’être évolutif, léger et facilement intégré sur diverses plates-formes. Puisqu’il est basé sur des vecteurs et du code, il est beaucoup moins lourd qu’une animation GIF ou une vidéo.

Où peut-on trouver des animations Lottie?

Il existe plusieurs sites Web qui ont une grande collection de fichiers Lottie. L’un des plus connus est Lot de lotationqui vous permet de télécharger gratuitement plusieurs de ces fichiers. De plus, ce site a un outil puissant qui vous permet de créer des animations Lottie à partir de zéro, avec une interface intuitive.

Voyons maintenant comment utiliser ces animations à partir de vos propres applications .net Maui.

Implémentation de Lottie Animations dans .NET MAUI PROJETS

L’utilisation d’animations Lottie dans .NET Maui Projects est très simple grâce aux projets créés par la communauté. Je recommande de m’assurer que vous avez recherché et téléchargé une animation Lottie d’intérêt pour tester avec les exemples suivants.

Préparer le projet pour jouer à Lottie Animations

Bien qu’il existe plusieurs projets open-source qui permettent l’utilisation d’animations Lottie dans les projets .net Maui, le plus populaire et le plus ancien est dirigé par l’équipe derrière Skiharpe. SKISHARP est une API graphique 2D .NET multiplateform, qui a un projet appelé Skiasharp.extended.ui.mauienglobant les contrôles utilisables dans les projets .net Maui. C’est là que nous trouverons le Sklottiview contrôle.

Pour utiliser le contrôle SklotETIEW dans vos propres projets, suivez simplement ces étapes:

1. Dans votre projet, recherchez et ajoutez le package SkiaSharp.Extended.UI.Maui.
2. Modifier le MauiProgram.cs fichier en ajoutant le UseSkiaSharp() Méthode au constructeur, comme ceci:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
    ...
}

3. Ajoutez les fichiers Lottie avec le .json extension dans le Ressources \ brut dossier.
4. Sur la page où vous ajouterez l’animation Lottie, ajoutez une référence à l’espace de noms du contrôle, similaire à celle-ci (vous pouvez modifier le nom si vous préférez):
   xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"

Exécution des animations Lottie dans .Net Maui Projects

Une fois que vous avez configuré le projet avec les étapes précédentes, il est temps d’utiliser le contrôle. La manière la plus simple est la suivante:

<lottie:SKLottieView
    HeightRequest="400"
    RepeatCount="-1"
    Source="button.json"
    WidthRequest="400" />

À partir du code ci-dessus, nous pouvons voir les propriétés suivantes:

• HeightRequest: Représente la hauteur de l’animation sur la page.
• WidthRequest: Représente la largeur de l’animation sur la page.
• Source: Le nom du fichier JSON qui contient l’animation Lottie.
• RepeatCount: Le nombre de fois que l’animation doit répéter. Si c’est -1il se répétera indéfiniment.

Lors de l’exécution de l’application, nous verrons l’animation exécutée comme indiqué dans l’image suivante:

En plus des propriétés de base illustrées ci-dessus, le contrôle SklotETIEW propose également les propriétés supplémentaires suivantes:

• Duration: Permet de récupérer la durée totale de l’animation.
• Progress: Obtient les progrès actuels de l’animation.
• RepeatMode: Permet de spécifier comment répéter l’animation, avec des valeurs possibles redémarrer et inverser.
• IsAnimationEnabled: Définit si l’animation doit jouer ou non.
• IsComplete: Obtient si l’animation est terminée.

Événements disponibles dans le contrôle SklotTIEview

Le contrôle de SklotTIEW a trois événements qui peuvent vous aider à savoir quand les choses se produisent dans l’animation, qui sont les suivantes:

• AnimationLoaded: Tiré lorsque l’animation a été chargée avec succès.
• AnimationFailed: Tiré lorsqu’il y a eu une erreur de chargement de l’animation.
• AnimationCompleted: Se produit lorsque le nombre total de répétitions s’est terminé. Avec une valeur de -1cet événement n’est jamais licencié.

Ces événements sont très utiles si vous souhaitez effectuer une action immédiatement après la fin de l’animation, tel que l’affichage d’un logo de l’entreprise animé, puis la transition immédiatement vers l’écran de connexion.

Exemple pratique: remplacer un indicateur d’activité par une animation Lottie

Supposons que nous ayons une application de générateur d’images AI. Ces applications prennent souvent un certain temps lors de la génération de l’image, il est donc conseillé de fournir des commentaires à l’utilisateur que sa demande est en cours de traitement. Traditionnellement, nous pourrions utiliser un indicateur d’activité pour montrer que l’image est générée. L’exemple de code XAML est le suivant:

<ContentPage
    x:Class="SkLottieAnimationDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
    BackgroundColor="{StaticResource BackgroundColor}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="BackgroundColor">#121212</Color>
            <Color x:Key="PrimaryTextColor">#FFFFFF</Color>
            <Color x:Key="SecondaryTextColor">#888888</Color>
            <Color x:Key="ControlBackgroundColor">#1E1E1E</Color>
            <Color x:Key="ButtonBackgroundColor">#333333</Color>
            <Color x:Key="BorderColor">#2E2E2E</Color>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid>
        <VerticalStackLayout Padding="20" Spacing="20">
            <Label
                FontAttributes="Bold"
                FontSize="24"
                HorizontalOptions="Center"
                Text="AI Image Generator"
                TextColor="{StaticResource PrimaryTextColor}" />
            <Entry
                x:Name="PromptEntry"
                BackgroundColor="{StaticResource ControlBackgroundColor}"
                HeightRequest="40"
                Placeholder="Enter your prompt..."
                PlaceholderColor="{StaticResource SecondaryTextColor}"
                TextColor="{StaticResource PrimaryTextColor}" />
            <Button
                x:Name="GenerateButton"
                BackgroundColor="{StaticResource ButtonBackgroundColor}"
                Clicked="GenerateButton_Clicked"
                CornerRadius="6"
                HeightRequest="45"
                Text="Generate Image"
                TextColor="{StaticResource PrimaryTextColor}" />
            <Border
                Padding="0"
                BackgroundColor="{StaticResource ControlBackgroundColor}"
                HeightRequest="400"
                Stroke="{StaticResource BorderColor}"
                StrokeShape="RoundRectangle 8">
                <Image
                    x:Name="GeneratedImage"
                    Aspect="AspectFill"
                    Source="{x:Null}" />
            </Border>
        </VerticalStackLayout>
        <Grid
            x:Name="Overlay"
            BackgroundColor="Black"
            IsVisible="False"
            Opacity=".8">
            <ActivityIndicator
                HeightRequest="35"
                IsRunning="True"
                Color="Blue" />
        </Grid>
    </Grid>
</ContentPage>

D’un autre côté, le code C # est le suivant:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void GenerateButton_Clicked(object sender, EventArgs e)
    {
        Overlay.IsVisible = true;
        Overlay.IsEnabled = true;

        await Task.Delay(2500);

        GeneratedImage.Source = "ai.jpg";

        Overlay.IsVisible = false;
        Overlay.IsEnabled = false;
    }
}

Vous pouvez voir que l’exemple est simulé pour éviter de compliquer trop le code. Maintenant, l’application en cours d’exécution ressemble à ceci:

L’application n’a pas l’air mauvaise, mais elle pourrait être plus belle. Dans l’environnement .net Maui, nous avons plusieurs solutions qui nous permettraient d’afficher facilement des animations comme des fenêtres contextuelles, comme je l’ai démontré dans l’article Découvrir plusieurs façons de créer des fenêtres contextuelles dans .net Maui. Dans notre exemple, je choisirai d’utiliser un Contrôle popup .net Maui De Progress Telerik Ui pour .net Mauien raison de sa facilité d’utilisation. Changeons la grille qui contient le ActivityIndicator au RadPopup contrôle:

<Grid Padding="20">
    <telerik:RadPopup.Popup>
        <telerik:RadPopup
            x:Name="popup"
            OutsideBackgroundColor="#E6000000"
            Placement="Center"
            VerticalOffset="8">
            <Grid>
                <lottie:SKLottieView
                    HeightRequest="300"
                    HorizontalOptions="Center"
                    RepeatCount="-1"
                    Source="loader.json"
                    WidthRequest="300" />
            </Grid>
        </telerik:RadPopup>
    </telerik:RadPopup.Popup>
</Grid>

De même, modifions le code derrière pour contrôler lorsque la fenêtre contextuelle doit apparaître à l’écran:

private async void GenerateButton_Clicked(object sender, EventArgs e)
{
    popup.IsOpen = true;

    await Task.Delay(2500);

    GeneratedImage.Source = "ai.jpg";

    popup.IsOpen = false;
}

De cette façon, nous aurons une meilleure animation pour montrer à l’utilisateur que sa demande est en cours de traitement:

C’est à quel point il est facile de combiner une animation Lottie avec une popup.

Conclusion

Tout au long de cet article, vous avez appris ce que sont les animations Lottie et comment les utiliser à votre avantage, en les intégrant dans vos applications .net Maui grâce à l’utilisation du contrôle SklotTIEW. Je vous encourage à explorer d’autres endroits où vous pouvez ajouter de l’interactivité à vos applications en utilisant ce type d’animation.