Commencer une activité à l'aide d'une animation

Dans les applications Material Design, les transitions d'activité fournissent des connexions visuelles entre différents états par le biais du mouvement et des transformations entre les éléments communs. Vous pouvez spécifier des animations personnalisées pour les transitions d'entrée et de sortie, ainsi que pour les transitions d'éléments partagés entre les activités.

Figure 1 : Transition avec des éléments partagés

  • Une transition d'entrée détermine la façon dont les vues d'une activité entrent dans la scène. Par exemple, lors de la transition d'entrée explode, les vues entrent dans la scène depuis l'extérieur et se déplacent vers le centre de l'écran.
  • Une transition de sortie détermine la manière dont les vues d'une activité quittent la scène. Par exemple, dans la transition de sortie explode, les vues quittent la scène en s'éloignant du centre.
  • Une transition d'éléments partagés détermine la manière dont les vues partagées entre deux activités passent d'une activité à une autre. Par exemple, si deux activités ont la même image dans des positions et des tailles différentes, la transition d'élément partagé changeImageTransform se traduit et met à l'échelle l'image de manière fluide entre ces activités.

Les transitions d'entrée et de sortie sont acceptées sur Android:

  • explode: déplace les vues vers l'intérieur ou l'extérieur du centre de la scène.
  • slide: déplace les vues vers ou depuis l'un des bords de la scène.
  • fade: ajoute ou supprime une vue de la scène en modifiant son opacité.

Toute transition qui étend la classe Visibility est acceptée en tant que transition d'entrée ou de sortie. Pour en savoir plus, consultez la documentation de référence de l'API sur la classe Transition.

Android est également compatible avec les transitions d'éléments partagés suivantes:

  • changeBounds: anime les modifications des limites de mise en page des vues cibles.
  • changeClipBounds: anime les changements des limites de clip dans les vues cibles.
  • changeTransform: anime les changements d'échelle et de rotation des vues cibles.
  • changeImageTransform: anime les changements de taille et d'échelle des images cibles.

Lorsque vous activez les transitions d'activité dans votre application, la transition en fondu enchaîné par défaut s'active entre les activités d'entrée et de sortie.

Figure 2. Transition de scène avec un élément partagé.

Pour obtenir un exemple de code qui s'anime entre des activités à l'aide d'éléments partagés, consultez ActivitySceneTransitionBasic.

Vérifier la version du système

Les API de transition d'activités sont disponibles sur Android 5.0 (API 21) ou version ultérieure. Pour préserver la compatibilité avec les versions antérieures d'Android, vérifiez le système version au moment de l'exécution avant d'appeler les API pour l'une des fonctionnalités suivantes:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Spécifier des transitions personnalisées

Tout d'abord, activez les transitions de contenu de fenêtre avec l'attribut android:windowActivityTransitions lorsque vous définissez un style qui hérite du thème Material. Vous pouvez également spécifier des transitions d'entrée, de sortie et d'élément partagé dans la définition de votre style:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

Dans cet exemple, la transition change_image_transform est définie comme suit:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

L'élément changeImageTransform correspond à la classe ChangeImageTransform. Pour en savoir plus, consultez la documentation de référence de l'API pour Transition.

Pour activer les transitions de contenu de fenêtre dans votre code, appelez la fonction Window.requestFeature():

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

Pour spécifier des transitions dans votre code, appelez ces fonctions avec un objet Transition:

Les fonctions setExitTransition() et setSharedElementExitTransition() définissent la transition de sortie pour l'activité d'appel. Les fonctions setEnterTransition() et setSharedElementEnterTransition() définissent la transition d'entrée pour l'activité appelée.

Pour tirer pleinement parti d'une transition, vous devez activer les transitions de contenu de fenêtre à la fois sur les activités appelantes et appelées. Sinon, l'activité d'appel lance la transition de sortie, puis les transitions entre les fenêtres (comme le scaling ou le fondu).

Pour lancer une transition d'entrée dès que possible, utilisez la fonction Window.setAllowEnterTransitionOverlap() sur l'activité appelée. Les transitions d'entrée sont ainsi plus spectaculaires.

Démarrer une activité à l'aide de transitions

Si vous activez les transitions et définissez une transition de sortie pour une activité, celle-ci s'active lorsque vous lancez une autre activité, comme suit:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Si vous définissez une transition d'entrée pour la deuxième activité, cette transition s'active également au début de l'activité. Pour désactiver les transitions lorsque vous démarrez une autre activité, fournissez un groupe d'options null.

Démarrer une activité avec un élément partagé

Pour créer une animation de transition d'écran entre deux activités comportant un élément partagé, procédez comme suit:

  1. Activer les transitions de contenu de fenêtre dans votre thème.
  2. Spécifiez une transition d'éléments partagés dans votre style.
  3. Définissez votre transition en tant que ressource XML.
  4. Attribuez un nom commun aux éléments partagés dans les deux mises en page à l'aide de l'attribut android:transitionName.
  5. Utilisez la fonction ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

Pour les affichages dynamiques partagés que vous générez dans votre code, utilisez la fonction View.setTransitionName() pour spécifier un nom d'élément commun dans les deux activités.

Pour inverser l'animation de transition de scène lorsque vous terminez la deuxième activité, appelez la fonction Activity.finishAfterTransition() au lieu de Activity.finish().

Démarrer une activité avec plusieurs éléments partagés

Pour créer une animation de transition de scène entre deux activités comportant plusieurs éléments partagés, définissez les éléments partagés dans les deux mises en page avec l'attribut android:transitionName ou utilisez la fonction View.setTransitionName() dans les deux activités, puis créez un objet ActivityOptions comme suit:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));