TP14 Réaliser des Animations en Flutter
TP14 Réaliser des Animations en Flutter
-
Objectifs
- Comprendre et appliquer les concepts d’animations explicites et implicites dans Flutter.
- Utiliser des classes comme AnimationController, Tween, et CurvedAnimation pour créer des animations complexes.
- Mettre en place des animations déclenchées par des interactions, comme des clics, des gestes ou des sélections dans l’interface.
- Gérer les états des animations en réponse aux événements utilisateur.
-
Application
-
Exigences Fonctionnelles :
- Création et Gestion des Animations
- L’application doit inclure des animations continues (par exemple, rotation ou changement de couleur).
- Les animations doivent pouvoir être déclenchées par des interactions utilisateur, comme un clic sur un bouton ou un geste (glissement).
- Animations avec Interaction
- L’utilisateur doit pouvoir contrôler certaines animations via des boutons (agrandissement/rétrécissement, changement de couleur).
- Des animations doivent être déclenchées par des gestes, comme un glissement (swipe).
- Transitions Animées
- Les changements de position (slide), de taille (scale), ou d’opacité (fade) doivent être animés.
- Les transformations doivent inclure des rotations ou des changements d’échelle.
- Effets d’Animations Implicites
- Les animations implicites doivent être implémentées via des widgets comme AnimatedContainer ou TweenAnimationBuilder.
- Les transitions implicites doivent combiner plusieurs propriétés (taille, couleur, bordure).
- Interface Dynamique et Intuitive
- Tous les widgets animés doivent être disposés de manière claire et intuitive.
- L’application doit inclure un menu animé (Drawer) qui s’ouvre avec une transition fluide.
- Un bouton doit être utilisé pour déclencher ou contrôler chaque animation distincte.
- Arrière-Plan Animé
- L’application doit inclure un arrière-plan dynamique avec un changement de couleur graduel et continu.
- Gestion des Durées d’Animation
- Chaque animation doit respecter une durée définie (entre 2 et 7 secondes).
- Comportement des Widgets Animés
- Les animations doivent se comporter de manière fluide et sans discontinuité.
- Les widgets animés doivent être réactifs et adaptés aux actions de l’utilisateur.
- Compatibilité Multiplateforme
- L’application doit fonctionner correctement sur les appareils Android et iOS.
-
Contexte
- Vous allez créer une application Flutter démontrant une variété d’animations et interactions. Cet examen vous permettra d’explorer et de mettre en œuvre différentes techniques d’animation en Flutter, y compris des transitions implicites et explicites, des animations liées à des gestes, et des transformations dynamiques.
-
Instructions
- Création de l’application
- Créez un nouveau projet Flutter nommé AnimationMasteryExam.
- Ouvrez le fichier principal main.dart sous le dossier lib.
- Partie 1 : Animations de Base
- 1. Animation Continue :
- Créez un conteneur carré vert (100×100 pixels) qui effectue une rotation continue.
- Utilisez un AnimationController pour gérer cette animation.
- 2. Animation de Couleur :
- Créez un conteneur rond (cercle) de 80 pixels de diamètre.
- Ce conteneur doit passer progressivement du bleu au rouge lorsqu’un bouton est pressé.
- Utilisez un ColorTween avec un bouton pour déclencher cette animation.
- 3. Animation de Taille avec Interaction :
- Créez un conteneur carré initialement de 100×100 pixels.
- Ajoutez un bouton permettant d’alterner entre deux tailles (100×100 et 200×200 pixels).
- Utilisez un ScaleTransition pour animer cette transformation.
- Partie 2 : Animations Avancées
- 4. Animation d’Opacité (Fade In/Out) :
- Créez un texte au centre de l’écran.
- Lorsqu’un bouton est pressé, le texte doit disparaître ou réapparaître avec un effet de fondu (FadeTransition).
- 5. Animation de Position (Slide) :
- Ajoutez une barre (rectangle de 300 pixels de largeur et 50 pixels de hauteur) qui glisse horizontalement d’un côté de l’écran à l’autre en boucle.
- Utilisez un SlideTransition pour gérer cette animation.
- 6. Animation liée aux gestes :
- Créez une image ou un conteneur coloré (par exemple, 150×150 pixels).
- Lorsque l’utilisateur effectue un geste de glissement (swipe), le conteneur doit changer de position ou de taille.
- Utilisez un GestureDetector combiné avec un AnimatedBuilder.
- Partie 3 : Animations Implicites
- 7. Animation avec AnimatedContainer :
- Créez un conteneur ayant une couleur, une taille, et une bordure qui changent simultanément lorsqu’un bouton est pressé.
- Utilisez AnimatedContainer pour gérer cette animation.
- 8. Animation de Transformation :
- Ajoutez un bouton qui fait pivoter un conteneur de 45° sur l’axe Z tout en augmentant sa taille.
- Utilisez un Transform ou AnimatedTransform.
- Partie 4 : Interface Utilisateur et Animation Combinée
- 9. Menu Animé (Drawer) :
- Implémentez un Drawer qui s’ouvre avec une animation personnalisée. Par exemple, le menu glisse de la gauche tout en changeant légèrement de taille.
- 10. Animation d’Arrière-Plan :
- Ajoutez un arrière-plan dynamique où une couleur change graduellement en boucle (par exemple, du bleu au violet en passant par le rose).
- Utilisez un TweenAnimationBuilder.
- Partie 5 : classe AppTheme
- Créez une classe AppTheme qui définit deux thèmes principaux :
- Thème clair (Light) : Utilisez une palette de couleurs lumineuses.
- Thème sombre (Dark) : Utilisez une palette de couleurs adaptées aux environnements peu éclairés.
- Ajoutez la logique pour permettre à l’utilisateur de basculer entre les deux thèmes à l’aide d’un Switch sur une page dédiée aux paramètres.
- Intégrez la classe AppTheme dans l’application pour que le thème sélectionné soit appliqué uniformément sur toutes les pages et les animations.
- Les pages doivent s’adapter dynamiquement au changement de thème sans nécessiter de redémarrage de l’application.
-
Critères de Durée
- Toutes les animations doivent avoir une durée entre 2 et 7 secondes selon leur complexité.
-
Interface Utilisateur
- Disposez les widgets de manière claire et intuitive.
- Assurez-vous que chaque animation est bien séparée et que les interactions sont explicites (par exemple, des boutons ou des gestes clairement identifiables).
-
Critères d’Évaluation
- 1. Fonctionnalité :
- Toutes les animations fonctionnent comme prévu.
- Les gestes et boutons déclenchent les animations correspondantes.
- 2. Qualité du Code :
- Utilisation correcte des outils d’animation en Flutter (comme AnimationController, Tween, Transition, etc.).
- Code structuré, lisible et commenté.
- 3. Interface et Expérience Utilisateur :
- Interface propre et bien organisée.
- Les animations améliorent l’expérience utilisateur sans surcharger l’interface.
- 4. Créativité :
- Ajout d’animations supplémentaires ou d’effets visuels (par exemple, transitions entre les écrans, sons, etc.).
- 5. La classe AppTheme :
- La classe AppTheme est bien définie et respecte les conventions de Flutter.
- Le changement de thème est fluide et n’entraîne pas de latence perceptible.
- Les animations et widgets respectent les couleurs définies dans le thème sélectionné.
- Les styles du thème incluent : la couleur principale, la couleur d’accent, les polices, et les arrière-plans.
