Présentation des animations

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

Les animations peuvent ajouter des repères visuels pour informer les utilisateurs de ce qui se passe dans votre application. Ils 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 permettent également d'améliorer l'aspect général de l'application, pour la rendre plus élégante tout en simplifiant son utilisation.

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

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

Animer des bitmaps

Figure 1 : Un drawable animé.

Pour animer un graphique bitmap tel qu'une icône ou une illustration, utilisez les API d'animation drawable. Généralement, 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, une bonne façon de communiquer à l'utilisateur que deux actions sont liées consiste à animer un bouton de lecture qui se transforme en bouton de pause lorsqu'il est enfoncé.

Pour en savoir plus, consultez Animer des images Drawable.

Animer la visibilité et le mouvement de l'UI

Figure 2. Une animation subtile lorsqu'une boîte de dialogue apparaît et disparaît rend le changement d'interface utilisateur moins choquant.

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 comment l'UI change.

Pour déplacer, afficher ou masquer des vues dans la mise en page actuelle, vous pouvez utiliser le système d'animation de 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 progressivement.

Pour créer ces animations de la manière la plus simple, 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 découvrir comment 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 les lois de 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 du monde réel à vos animations pour qu'elles aient un aspect naturel. Par exemple, il doit maintenir son élan lorsque sa cible change et effectuer des transitions fluides lors de tout 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 le déroulement de vos animations.

Voici deux animations basées sur la physique couramment utilisées:

Les animations qui ne sont pas basées sur la physique, comme 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 du changement de valeur cible, reconfigurer l'animation avec une nouvelle valeur comme nouvelle valeur de début et ajouter la nouvelle valeur cible. Visuellement, ce processus crée un arrêt brutal de l'animation et un mouvement désarticulé par la suite, comme illustré dans la figure 3.

Les animations créées avec des API d'animation basées sur la physique, telles que DynamicAnimation, sont basées sur la force. La modification de la valeur cible entraîne une modification de la force. La nouvelle force s'applique à la vitesse existante, ce qui permet une transition continue vers la nouvelle cible. Ce processus permet d'obtenir une animation plus naturelle, comme illustré à la figure 4.

Animer les changements de mise en page

Figure 5. Pour afficher plus de détails, vous pouvez modifier la mise en page ou démarrer 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 échangez la mise en page dans l'activité ou le fragment actuels. Il vous suffit de spécifier la mise en page de départ et de fin, ainsi que le type d'animation que vous souhaitez utiliser. Le système détermine ensuite et exécute une animation entre les deux mises en page. Vous pouvez l'utiliser pour remplacer l'UI entière, 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 à la figure 5.

La mise en page de début et de fin est chacune stockée 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. Vous créez un Transition pour indiquer au système le type d'animation souhaité, puis appelez TransitionManager.go(). Le système exécute alors l'animation pour échanger les mises en page.

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

Animer des transitions 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 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, comme faire glisser la nouvelle activité depuis le côté ou l'afficher en fondu, mais vous pouvez également créer des animations qui effectuent une transition entre les vues partagées dans chaque activité. Par exemple, lorsque l'utilisateur appuie sur un élément pour afficher plus d'informations, vous pouvez passer à une nouvelle activité avec une animation qui fait grossir cet élément pour qu'il remplisse l'écran, comme illustré dans la figure 5.

Comme d'habitude, vous appelez startActivity(), mais vous lui transmettez un ensemble d'options fournies 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 en savoir plus, consultez les ressources suivantes: