Présentation des animations

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.

Les animations peuvent ajouter des repères visuels qui informent les utilisateurs de ce qui se passe dans votre application. Elles sont particulièrement utiles lorsque l'interface utilisateur change d'état, par exemple lorsque de nouveaux contenus se chargent ou que de nouvelles actions deviennent disponibles. Les animations ajoutent également un aspect soigné à votre application, ce qui lui donne un aspect et une convivialité de meilleure qualité.

Android inclut différentes API d'animation en fonction du type d'animation souhaité. Cette documentation présente les différentes façons d'ajouter du mouvement à votre UI.

Pour savoir quand utiliser des animations, consultez également le guide Material Design sur le mouvement.

Animer des bitmaps

Figure 1 : Drawable animé.

Pour animer un graphique bitmap tel qu'une icône ou une illustration, utilisez les API d'animation drawable. En règle générale, ces animations sont définies de manière statique avec une ressource drawable, mais vous pouvez également définir le comportement de l'animation au moment de l'exécution.

Par exemple, un bon moyen de communiquer à l'utilisateur que deux actions sont liées consiste à animer un bouton de lecture qui se transforme en bouton de pause lorsque l'utilisateur appuie dessus.

Pour en savoir plus, consultez Animer des graphiques drawable.

Animer la visibilité et les mouvements de l'interface utilisateur

Figure 2. Une animation subtile lorsqu'une boîte de dialogue apparaît et disparaît, ce qui rend l'UI modifiée moins brutalement.

Lorsque vous devez modifier la visibilité ou la position des vues dans votre mise en page, il est préférable d'inclure des animations subtiles pour aider l'utilisateur à comprendre les modifications de l'interface utilisateur.

Pour déplacer, afficher ou masquer des vues dans la mise en page actuelle, vous pouvez utiliser le système d'animation des propriétés fourni par le package android.animation, disponible dans Android 3.0 (niveau d'API 11) ou version ultérieure. Ces API mettent à jour les propriétés de vos objets View sur une période donnée, en redessinant continuellement la vue à mesure que les propriétés changent. Par exemple, lorsque vous modifiez les propriétés de position, la vue se déplace sur l'écran. Lorsque vous modifiez la propriété alpha, la vue apparaît ou disparaît en fondu.

Pour créer ces animations le plus simplement possible, activez-les dans votre mise en page afin qu'une animation s'applique automatiquement lorsque vous modifiez la visibilité d'une vue. Pour en savoir plus, consultez Animer automatiquement les mises à jour de mise en page.

Pour apprendre à créer des animations à l'aide du système d'animation des propriétés, consultez la présentation de l'animation des propriétés. Vous pouvez également consulter les pages suivantes pour créer des animations courantes:

Mouvement basé sur la physique

Figure 3. Animation créée avec ObjectAnimator.

Figure 4. Animation créée avec des API basées sur la physique.

Dans la mesure du possible, appliquez la physique réelle à vos animations pour qu'elles aient un aspect naturel. Par exemple, elles doivent maintenir la dynamique lorsque leur cible change et effectuer des transitions en douceur en cas de changement.

Pour fournir ces comportements, la bibliothèque Android Support inclut des API d'animation basées sur la physique qui s'appuient sur les lois de la physique pour contrôler la façon dont vos animations se produisent.

Voici deux animations courantes basées sur la physique:

Les animations qui ne sont pas basées sur la physique, telles que celles créées avec les API ObjectAnimator, sont assez statiques et ont une durée fixe. Si la valeur cible change, vous devez annuler l'animation au moment de la modification de la valeur cible, reconfigurer l'animation avec une nouvelle valeur comme valeur de début, puis ajouter la nouvelle valeur cible. Visuellement, ce processus crée un arrêt brusque dans l'animation, puis un mouvement incohérent par la suite, comme illustré dans la figure 3.

Les animations créées à l'aide d'API d'animation basées sur la physique, telles que DynamicAnimation, sont générées par la force. La modification de la valeur cible entraîne un changement de force. La nouvelle force s'applique à la vitesse existante, ce qui effectue une transition continue vers la nouvelle cible. Ce processus produit une animation plus naturelle, comme illustré dans la figure 4.

Animer les modifications de mise en page

Figure 5 : Vous pouvez créer une animation affichant plus de détails en modifiant la mise en page ou en lançant une nouvelle activité.

Sur Android 4.4 (niveau d'API 19) ou version ultérieure, vous pouvez utiliser le framework de transition pour créer des animations lorsque vous permutez la mise en page dans l'activité ou le fragment actuels. Il vous suffit de spécifier la mise en page de début et de fin, ainsi que le type d'animation que vous souhaitez utiliser. Ensuite, le système détermine et exécute une animation entre les deux mises en page. Vous pouvez l'utiliser pour permuter l'ensemble de l'UI, ou pour déplacer ou remplacer uniquement certaines vues.

Par exemple, lorsque l'utilisateur appuie sur un élément pour afficher plus d'informations, vous pouvez remplacer la mise en page par les détails de l'élément, en appliquant une transition comme celle illustrée dans la figure 5.

Les mises en page de début et de fin sont chacune stockées dans un Scene, bien que la scène de début soit généralement déterminée automatiquement à partir de la mise en page actuelle. Créez un Transition pour indiquer le type d'animation souhaité au système, puis appelez TransitionManager.go() pour que le système exécute l'animation pour permuter les mises en page.

Pour en savoir plus, consultez Animer les modifications de mise en page à l'aide d'une transition. Pour obtenir un exemple de code, consultez BasicTransition.

Créez des animations entre les activités

Sur Android 5.0 (niveau d'API 21) ou version ultérieure, vous pouvez également créer des animations qui effectuent une transition entre vos activités. Il est basé sur le même framework de transition que celui décrit dans la section précédente, mais il vous permet de créer des animations entre les mises en page dans des activités distinctes.

Vous pouvez appliquer des animations simples, par exemple faire glisser la nouvelle activité sur le côté ou la faire en fondu, mais vous pouvez également créer des animations qui passent d'une vue partagée à une autre dans chaque activité. Par exemple, lorsque l'utilisateur appuie sur un élément pour voir plus d'informations, vous pouvez passer à une nouvelle activité avec une animation qui l'agrandit de manière fluide pour remplir l'écran, comme l'animation illustrée dans la figure 5.

Comme d'habitude, vous appelez startActivity(), mais vous lui transmettez un ensemble d'options fournis par ActivityOptions.makeSceneTransitionAnimation(). Ce lot d'options peut inclure les vues partagées entre les activités afin que le framework de transition puisse les connecter pendant l'animation.

Pour accéder à des ressources supplémentaires, consultez les pages suivantes: