Animations fluides et faciles sur les applications Android – Dev Genius
Voici la disposition de la scène 1. Ne regardez pas id(s) mais regardez les contraintes.
Voici la disposition de la scène 2. Regardez id(s) mais regardez aussi les contraintes. Dans le cas où vous l’avez manqué, id(s) sont les mêmes, mais les contraintes sont différentes.
Une fois que vous avez créé les deux scènes, il est temps de faire une transition.
Ayons un code pas à pas ligne par ligne:
1. Premièrement, nous créons ConstraintSet , qui vous permet de définir par programmation un ensemble de contraintes à utiliser avec , et nous clonons les contraintes de la scène 2 [activity_main_v2].
2. Ensuite, nous enregistrons un clickListener sur l’image, qui servira de déclencheur à la transition.
3. En cliquant, nous disons TransitionManager pour animer une nouvelle scène définie par tous les changements dans la racine de scène donnée entre l’appel de cette méthode et la prochaine image de rendu. L’appel de cette méthode oblige TransitionManager à capturer les valeurs actuelles dans la racine de la scène, puis à publier une demande pour exécuter une transition sur l’image suivante.
4. Enfin, nous appliquons de nouvelles contraintes à la mise en page d’origine.
La pièce manquante dans le dernier code était createTransition(). Voici à quoi ressemble le code.
Nous créons une transition et spécifions divers paramètres disponibles pour moduler l’animation en conséquence. Par exemple, j’ai spécifié duration être 3000ms. Le résultat après tout ce serait quelque chose comme montré dans le gif
Nous pouvons utiliser diverses transitions ensemble pour créer plusieurs effets.
L’extrait de code ci-dessus entraînerait quelque chose comme le gif ci-dessous. Pour info, j’ai marqué la visibilité de no_use_motivation comme disparu dans la scène 1 et visible dans la scène 2.
Il existe différents types de transitions disponibles, qui peuvent être combinées pour créer de belles expériences utilisateur.
Il y a quelques limites à cela ainsi que mentionné ici:
1. Animations appliquées à un peut ne pas apparaître correctement. Les instances sont mises à jour à partir d’un thread non UI afin que les mises à jour puissent être désynchronisées avec les animations d’autres vues.
2. Certains types de transition spécifiques peuvent ne pas produire l’effet d’animation souhaité lorsqu’ils sont appliqués à un .
3. Classes qui s’étendent , tel que , gérer les opinions de leur enfant d’une manière incompatible avec le cadre de transition. Si vous essayez d’animer une vue basée sur , l’affichage de l’appareil peut se bloquer.
4. Si vous essayez de redimensionner un avec une animation, le texte apparaîtra à un nouvel emplacement avant que l’objet ne soit entièrement redimensionné. Pour éviter ce problème, n’animez pas le redimensionnement des vues contenant du texte.
