#Créer une animation

#🔧 Exercice 1 ~1h30

A vous de réfléchir un peu ;)

1. Regardez la vidéo suivante jusqu’à 26mn35s~ (pensez à regarder en x1.25 ou 1.5): https://developer.apple.com/wwdc23/10156
2. Réaliser les exemples dans la sections Exemples et ressources ci-dessous

Puis réaliser 5 slides expliquant comment fonctionne une animation avec SwiftUI, comment s’en servir, avec des exemples. (Vous pouvez passer les sujets trop mathématiques)

#Exemples et ressources

• Animations implicites
• Modifier les animations de bases
• Animation explicites

#Retour à notre application

#🔧 Exercice 2 ~25min

Tentez de refaire l’animation suivante :

Voici ce qu’il se passe dans cette animation :

1. On 0.4 secondes avant de commencer l’animation
2. Le texte avec l’émoji du loot réalise alors une rotation de 360° sur l’axe x et 180° sur l’axe y en .spring
3. L’ombre apparait après un délai de 0.2 secondes et possède un radius de 100.0 en fin d’animation (0 au début) avec un .bouncy

#Aide

🛟 Essayez de baser toutes vos animations sur la même variable isAppeared. Vous n’avez normalement pas besoin d’autres variables.

Pour réaliser l’éffet de rotation 3D vous pouvez utiliser le code suivant :

View
    .rotation3DEffect(.degrees(...

Pour attendre avant de commencer l’animation utilisez le code suivant :

var body: some View {
        // Vos view
        { ... }
        .task {
            // Attendre 0.4 secondes
           try? await Task.sleep(for: .seconds(0.4))
            isAppeared = true // Exemple
            // Lancer l'animation
        }
}

Que se passe-t’il si vous n’attendez pas avant de lancer l’animation ?

#🔧 Exercice 3 (Bonus)

• Créer votre propre animation pour la vue de détail de votre loot, lorsque vous entrez dans la vue. Soyez créatif 🧑‍🎨.
• Essayez de réaliser une animation différente lors du clique sur l’image de l’item.