Salut ! Jour 55 de formation et 32ème jour des 100 Days of SwiftUI. Nous voilà maintenant dans la partie un peu plus corsée de SwiftUI !

Et pour commencer cette nouvelle phase, Paul Hudson s’attaque directement aux animations. Franchement, c’est à la fois impressionnant et un peu intimidant de voir tout ce qu’on peut faire ! Les animations, c’est vraiment ce qui donne vie à une interface.

# Un après-midi de codage : QuizGame prend forme

Cet après-midi, j’ai commencé à coder QuizGame, ma deuxième application du portfolio. C’était satisfaisant de pouvoir appliquer concrètement ce que j’apprends dans les 100 Days !

Tu peux voir sur la capture d’écran que j’ai déjà une belle structure de projet avec différentes vues et un système de couleurs. J’ai créé mes premières vues, mes premiers composants et même commencer la logique métier.

# Apprentissages du jour : Les animations SwiftUI

## Les animations implicites : la magie automatique

Les animations implicites sont probablement ce que j’ai trouvé de plus impressionnant aujourd’hui. L’idée, c’est qu’on dit à SwiftUI : “À chaque fois que cette valeur change, anime la transition.”

@State private var animationAmount = 1.0

var body: some View {
    Button("Tap me") {
        animationAmount += 1
    }
    .padding(50)
    .background(Color.red)
    .foregroundStyle(.white)
    .clipShape(.circle)
    .scaleEffect(animationAmount)
    .animation(.default, value: animationAmount)
}

Le truc génial : chaque fois que tu tapes le bouton et que animationAmount change, SwiftUI anime automatiquement le passage à la nouvelle taille. Pas besoin de gérer manuellement les étapes intermédiaires !

## Les courbes d’animation : choisir la bonne sensation

Ce qui m’a fasciné, c’est qu’on peut complètement changer le “feeling” d’une animation juste en changeant sa courbe :

• .linear : vitesse constante, parfait pour les rotations continues
• .easeInOut : démarre lentement, accélère, puis ralentit - très naturel
• .spring : effet de rebond, idéal pour les interactions tactiles

.animation(.spring(duration: 1, bounce: 0.9), value: animationAmount)

Le paramètre bounce va de 0 (pas de rebond) à 1 (beaucoup de rebond).

## Effets visuels animables : la boîte à outils

On peut animer plein d’effets différents :

• .scaleEffect : agrandir/rétrécir (1.0 = taille normale)
• .blur : effet de flou (0 = net)
• .opacity : transparence (0 = invisible, 1 = opaque)

## L’overlay : superposer des animations

L’overlay permet d’ajouter des éléments par-dessus une vue. J’ai adoré l’exemple de l’effet d’ondulation :

.overlay(
    Circle()
        .stroke(.red)
        .scaleEffect(animationAmount)
        .opacity(2 - animationAmount)
        .animation(
            .easeOut(duration: 1)
            .repeatForever(autoreverses: false),
            value: animationAmount
        )
)

Ça crée un cercle qui grandit en devenant transparent, comme des ondulations dans l’eau. L’effet .repeatForever fait que ça tourne en boucle !

## Animations explicites : le contrôle total

Les animations explicites avec withAnimation donnent un contrôle précis :

Button("Tap me") {
    withAnimation(.spring(duration: 1, bounce: 0.5)) {
        animationAmount += 360
    }
}
.rotation3DEffect(.degrees(animationAmount), axis: (x: 0, y: 1, z: 0))

La différence : au lieu d’animer automatiquement tous les changements, on choisit exactement quelles modifications animer.

## Rotations 3D : les trois axes expliqués simplement

Les rotations 3D m’ont vraiment impressionné ! Il y a trois axes :

• Axe X : rotation horizontale (comme hocher la tête “oui”)
• Axe Y : rotation verticale (comme secouer la tête “non”)
• Axe Z : rotation dans le plan (comme tourner la tête sur le côté)

Astuce mnémotechnique : X = hochement, Y = secouement, Z = roulement !

## Animation Binding : attacher l’animation aux contrôles

Concept que j’ai trouvé super pratique :

Stepper("Scale Amount", value: $animationAmount.animation(.easeInOut(duration: 1)), in: 1...10)

L’animation se déclenche automatiquement quand la valeur change via le Stepper. Plus besoin de gérer ça manuellement !

# QuizGame prend forme

Cet après-midi, j’ai continué à implémenter QuizGame et j’ai vraiment pris la peine de réfléchir aux différentes choses apprises afin de les intégrer au mieux dans les éléments suivants:

• Structure du projet : avec une organisation propre en dossiers
• Système de couleurs : avec des couleurs personnalisées pour l’identité visuelle
• Premières vues : QuestionView, SettingsView, TopScoresView…
• Composants réutilisables : comme ButtonQuizGame

# Réflexions sur cette étape

J’ai quand même pris une belle claque avec les animations SwiftUI. Si je compare a reanimated de React Native, c’est quand même plus simple et l’approche de composition de SwiftUI est vraiment étonnante (et parfois déroutante).

À demain pour la suite !

Alessandro