Tuto – Créer une animation d’attente en Swift

Non nous n’allons pas créer une animation pour quand tu attends l’ascenseur mais bien une animation pour ton application ! Il est indispensable de créer des animations en Swift pour ton application mobile. En effet, l’utilisateur a besoin de voir qu’il se passe quelque chose quand il effectue une action. Sinon, il se dira simplement que « bon, l’application ne marche pas » et il la quittera, probablement pour toujours [musique dramatique 🎺].

Bon, j’exagère un peu. On ne va quand même pas remettre sa vie en question à cause d’un smartphone. Mais tout de même, rappelle toi que l’UI/UX est important à prendre en compte pour le développement d’une application mobile.

Tu es convaincu(e) ? Nous allons donc apprendre ensemble à créer une animation pour faire patienter nos utilisateurs et utilisatrices.

Voici le projet que je t’ai préparé :

Juste ici, je te donne le code complet de l’exercice que tu peux directement coller dans XCode. Je te détaille juste en dessous les différentes parties.

import SwiftUI
struct ExampleView: View {
    
    @State private var isLoading = false
    
    var body: some View {
        ZStack{
            Rectangle()
                .fill(Gradient(colors: [.indigo, .purple]))
                .ignoresSafeArea()
            
            Text("C'est chargé !")
                .bold()
                .font(.title)
                .foregroundColor(.white)
            
            if isLoading {
                LoadingView()
            }
            
        }
        .onAppear {
            startFakeNetworkCall()
        }
    }
    
    func startFakeNetworkCall(){
        isLoading = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            isLoading = false
        }
    }
}

struct LoadingView: View {
    var body: some View {
        ZStack{
            Color(.systemBackground) //Prend en compte le light ou dark mode
                .ignoresSafeArea()
            ProgressView()
                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
                .scaleEffect(6)
        }
    }
}

Projet réalisé sous XCode 14, Swift 5.8 & iOS 16.

Je l’ai créé grâce au tuto complet et rapide de Sean Allen, référence en développement iOS anglophone. J’ai essayé de te retranscrire le tuto sous forme écrite et d’y ajouter ma petite touche avec les informations que j’ai apprises grâce à ce tuto.

Explications de la vue ExampleView

• Propriété d’état

On créé une propriété d’état isLoading. Elle sera utilisée pour afficher ou masquer l’animation de chargement. La propriété isLoading est définie avec @State pour indiquer que cette propriété peut être modifiée et que les vues qui en dépendent doivent être mises à jour lorsqu’elle change.

@State private var isLoading = false

• body

Dans le body, on créé notre vue principale, celle qui est chargée quand l’utilisateur veut afficher la page.

var body: some View {
        ZStack{
            Rectangle()
                .fill(Gradient(colors: [.indigo, .purple]))
                .ignoresSafeArea()
            
            Text("C'est chargé !")
                .bold()
                .font(.title)
                .foregroundColor(.white)
            
            if isLoading {
                LoadingView()
            }
            
        }
        .onAppear {
            startFakeNetworkCall()
        }
    }

Le corps de la vue est donc défini avec body et utilise une <a href="https://objectif-appli.com/hstack-vstack-zstack-swiftui/" target="_blank" rel="noreferrer noopener">ZStack</a> pour superposer les éléments de la vue.

La première vue de la ZStack est un Rectangle rempli d’un Gradient. La méthode ignoresSafeArea() est utilisée pour remplir l’ensemble de l’écran, même si la zone de sécurité de l’appareil n’est pas disponible.

Ensuite, un texte « C’est chargé ! » est affiché en gras et en taille de police de titre, avec une couleur de texte blanche.

Si isLoading est vrai, la vue LoadingView() est affichée. Cette vue affiche une animation de chargement qui tourne en boucle.

.onAppear est utilisé pour définir une action à exécuter lorsque la vue apparaît pour la première fois. Dans cet exemple, la méthode startFakeNetworkCall() est appelée lorsque la vue est affichée.

• Fonction startFakeNetworkCall()

Comme tu peux le voir dans le code complet juste au dessus, il y a plusieurs éléments distincts dont nous pouvons parler.

func startFakeNetworkCall(){
    isLoading = true
    DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
        isLoading = false
    }
}

La fonction startFakeNetworkCall()  est une méthode qui simule une demande réseau en modifiant la valeur de la propriété isLoading à true pendant 3 secondes, puis en la remettant à false. C’est cette valeur true qui va nous permettre de voir apparaître le cercle qui fait patienter.

DispatchQueue.main.asyncAfter 

Le DispatchQueue.main.asyncAfter est une fonction qui permet de planifier l’exécution d’un bloc de code sur la file principale de l’application après un délai donné. Dans cet exemple, la constante .now() est utilisée pour spécifier que le bloc de code doit être exécuté immédiatement. Et + 3 est utilisé pour ajouter un délai de 3 secondes à l’heure actuelle, qui est utilisé comme moment où le bloc de code doit être exécuté.

Explications de la vue LoadingView

struct LoadingView: View {
    var body: some View {
        ZStack{
            Color(.systemBackground) //Prend en compte le light ou dark mode
                .ignoresSafeArea()
            ProgressView()
                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
                .scaleEffect(6)
        }
    }
}

La structure LoadingView définit une vue SwiftUI qui peut être utilisée dans l’interface utilisateur. Comme on l’a vu précédemment, elle est appelée lorsque le booléen isLoading vaut true.

La première vue de la ZStack est un fond coloré qui utilise la couleur du système en fonction du mode (dark ou light) défini dans les paramètres de l’utilisateur.

Ensuite, un indicateur de progression est affiché en utilisant la vue ProgressView(). La méthode progressViewStyle() est utilisée pour personnaliser l’apparence de l’indicateur de progression. Dans cet exemple, une CircularProgressViewStyle est utilisée et affiche une roue tournante. La couleur de la roue est définie avec tint à bleu.

.scaleEffect() est utilisé pour agrandir l’indicateur de progression. Dans cet exemple, il est agrandi 6 fois sa taille normale. Tu peux t’amuser à changer la taille pour voir ce que ça donne.

Où trouver des exemples d’animation ?

1. YouTube regorge de tutos en tout genre, c’est une mine d’or pour ce genre de choses.
2. Le site iOSExamples est aussi une très bonne sources d’inspiration. Tu peux choisir le type de projets que tu souhaites rechercher. Grâce aux tags, le site te propose une série d’articles liés au thème choisi et te renvoie au projet GitHub de la personne qui a créé ce que tu as recherché. Tu peux trouver des exemples iOS sur du JSON, les menus, les applis météo, des jeux, etc. Bref, plein d’exemples inspirants.
3. L’application Playground d’Apple fournit des petits tutos et des exercices pour t’entraîner à créer des applications iOS. Il y a des exercices pour t’entraîner à créer des animations lors des interactions utilisateur.
4. Tu peux également effectuer une recherche sur les repositories GitHub avec les mots clés « animation » et « SwiftUI ». En recherchant les plus récents ou les mieux notés, tu peux tomber sur des petites pépites !

Voilà, nous avons créé notre première animation en Swift ! J’espère que cette approche t’a plu et t’a donné envie d’aller voir plein d’autres tutos ou autres répertoires GitHub.

Dis nous pour quelle application tu souhaites développer une animation d’attente 👩‍💻 👨‍💻