Créer des animations en SwiftUI

Arrivons au coeur de notre projet de création d’application mobile et sautons dans ce que nous voulons tous faire avant tout : créer des animations en SwiftUI !

Je t’ai déjà préparé un tuto pour une animation d’attente. Mais en l’écrivant, je me suis rendue compte que je pouvais faire un article à part entière sur les animations en général, car il y a beaucoup de choses à dire là dessus.

Je t’épargne la tête de l’utilisatrice dubitative et désappointée de la dernière fois. Parlons plutôt de l’effet qu’elles auront sur tes utilisateurs et apportons un peu de magie dans leur vie.

Les bases des animations en SwiftUI

Comme on l’a vu dans l’article sur l’UX, ajouter des animations à notre application permet de signaler à l’utilisateur qu’il se passe quelque chose après son action. C’est à dire créer une interaction. On parle ici principalement d’animation fonctionnelle ou explicite mais nous pouvons créer aussi des animations divertissante. Dans tous les cas, ni l’une, ni l’autre ne doivent jamais compromettre la fonctionnalité de l’interface ou la clarté des informations présentées.

Voyons un peu les différences, avant d’attaquer le code (le code le code le code 🫨 !).

• L’animation fonctionnelle

C’est une animation créée pour un déclenchement automatique. Par exemple, pour des effets de transition ou encore de déclenchement après une certaine durée. Contrairement à l’animation divertissante, elle n’est pas automatique mais planifiée. Elle permet de rendre l’interface plus dynamique et plus agréable à utiliser, en offrant une sensation de continuité et d’harmonie entre les différents éléments.

• L’animation divertissante

C’est avec ce genre d’animation que tu vas apporter ta petite touche et fidéliser tes utilisateurs. C’est une manière de leur faire prendre conscience de leur importance. En effet, c’est grâce à elles que tu vas jouer sur les émotions de tes utilisateurs et rendre l’expérience agréable.

Tu peux, par exemple pour une application de fitness, créer une animation amusante pour féliciter l’utilisateur après une séance d’exercice terminée.

Cependant, il est important de noter que ce genre d’animations doivent être utilisées avec parcimonie et de manière appropriée. Si elles sont trop fréquentes, elles risquent de fatiguer ou de frustrer l’utilisateur.

Créer une animation simple

Plusieurs choix s’offrent à nous pour créer une animation simple. Nous allons voir ici les méthodes animation(_:value) et withAnimation().

• animation(_:value) 

Depuis l’arrivée d’iOS 15, la méthode animation() est dépréciée. C’est à dire qu’elle est obsolète et qu’elle ne sera pas prise en charge dans les versions futures. C’est valable pour iOS mais également pour les autres plateformes (iPadOS, macOS, etc.).

Nous pouvons donc utiliser la version animation(_:value:) à la place. animation() qui permettait d’appliquer l’animation à la vue entière, s’applique maintenant à la valeur désirée affectée à value.

Tu vas mieux comprendre avec cet exemple très joliment illustré, tout droit sorti de notre chapeau magique StackOverflow :

struct AnimationValue: View {
    @State private var offset: CGFloat = 200.0 // Variable d'état
    
    var body: some View {
        
        Image(systemName: "ant") // Image intégrée à XCode
            .font(Font.system(size: 100.0)) // Taille de l'image
            .offset(y: offset) // Position de l'image : variable d'état
            .shadow(radius: 10.0)// Ombre
            .onTapGesture {
                offset -= 100.0 
            }
            .animation(
                Animation.easeInOut(duration: 1.0),
                value: offset
            )
        
    }
}

Lorsque l’utilisateur appuie sur l’image (onTapGesture), la valeur de offset est décrémentée de 100.0.

L’animation est utilisée pour effectuer une transition lisse lorsqu’il y a un changement de valeur pour offset. On utilise ici Animation.easeInOut(duration: 1.0) qui produit une animation en douceur avec une durée d’une seconde. L’animation est liée à la valeur de offset à l’aide du paramètre value de la fonction d’animation, de sorte que chaque fois que offset change, l’animation est déclenchée.

• withAnimation() 

La méthode withAnimation() permet d’exécuter une action avec une animation personnalisée appliquée à une ou plusieurs propriétés d’état. Ainsi, cette méthode nous évite de gérer manuellement les transitions d’état et leurs animations correspondantes.

struct AnimationView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Button("JE GRANDIS !") {
            withAnimation(.spring()) {
                self.scale *= 1.5
            }
        }
        .scaleEffect(scale)
    }
}

Combinaison d’animations en SwiftUI

Tu peux évidemment combiner les animations dans ton projet, comme dans cet exemple :

struct AnimationCombinaison: View {
    @State private var bgColor = Color.red
    @State private var rotationAngle = Angle(degrees: 0)
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        
        Text("Hello, World!")
            .font(.largeTitle) // Police de titre
            .padding() // Espacement
            .background(bgColor) // Couleur d'arrière plan
            .cornerRadius(10) // Arrondi des angles
            .foregroundColor(.white) // Couleur du texte
            .rotationEffect(rotationAngle)
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation(.easeInOut(duration: 1.0)) {
                    bgColor = .blue
                    rotationAngle += Angle(degrees: 360)
                    scale = 1.5
                }
            }
    }
}

• La méthode rotationEffect() fait pivoter le rendu de cette vue autour du point spécifié
• La méthode scaleEffect() met à l’échelle la taille d’une vue en modifiant sa taille par un facteur de scale dans les directions horizontale et verticale.
• onTapGesture ajoute une action à effectuer lorsque lorsque l’utilisateur tape sur le bouton. Elle lance ici l’animation avec withAnimation() pendant 1 seconde et modifie les propriétés d’état

Dans cet exemple, nous avons donc ajouté une animation pour l’échelle (scaleEffect) de la vue en plus de la couleur de fond et de la rotation. Lorsque l’utilisateur tape sur la vue, les trois animations sont déclenchées simultanément avec la fonction withAnimation.

Ressources

• Tu peux t’aider de la recherche de StackOverflow pour trouver les réponses à tes bugs.
• Tu peux également parcourir le site Hacking with Swift qui explique facilement la création d’animations en SwiftUI.
• Comme d’habitude, je t’ai mis le lien de la documentation officielle Apple sur chaque pomme 

---

Ok ok bon, ces animations sont pas ouf ouf comparées à la promesse de l’image d’illustration vue plus haut. Mais rappelle toi, au début, Harry Potter ne savait utiliser que Alohomora (sortilège de déverrouillage). Avec la connaissance de ses bases et de la pratique, il est devenu un grand sorcier. Alors, avec une bonne maîtrise de tes bases et de la pratique, tu peux devenir toi aussi une grande sorcière ou un grand sorcier du développement iOS ! 🧙‍♀️

Quel genre d’animations ou tutos souhaiterais tu retrouver ici ?