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

Les transitions d'activité dans les applications Material Design permettent de créer des liens visuels entre différents états par le mouvement et les transformations entre des é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 : A avec des éléments partagés.

  • Une transition Entrée détermine la façon dont les vues dans une activité d'entrer dans la scène. Par exemple, dans la transition d'entrée explode, le entrent dans la scène depuis l'extérieur et s'envolent vers le centre l'écran.
  • Une transition de sortie détermine la façon dont les vues d'une sortie d'activité la scène. Par exemple, dans la transition de sortie explode, les vues pour sortir du centre de la scène.
  • Une transition d'éléments partagés détermine la façon dont les vues sont partagée entre deux activités passe de l'une à l'autre. Par exemple : Si deux activités ont la même image dans des positions et des tailles différentes, changeImageTransform : la transition d'élément partagé se traduit et adapte l'image de manière fluide entre ces activités.

Android est compatible avec les transitions d'entrée et de sortie suivantes:

  • explode: déplace les vues vers ou depuis le centre de la scène.
  • slide: déplace les vues vers l'intérieur ou à partir de l'un des bords de la .
  • fade: ajoute ou supprime une vue de la scène en modifiant sa l'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 Transition .

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

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

Lorsque vous activez les transitions d'activité dans votre application, le fondu enchaîné par défaut 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 animé entre des activités à l'aide d'éléments partagés, voir ActivitySceneTransitionBasic.

Vérifier la version du système

Les API de transition d'activité sont disponibles sur Android 5.0 (API 21) ou version ultérieure. Pour préserver la compatibilité avec les versions antérieures d'Android, cochez la case système version au moment de l'exécution appeler les API pour les 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

Commencez par activer les transitions de contenu de fenêtre avec android:windowActivityTransitions. lorsque vous définissez un style qui hérite du thème Material. Vous pouvez également spécifier Entrée, sortie et transitions d'éléments partagés 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 à l'élément ChangeImageTransform. Pour en savoir plus, consultez l'API référence pour Transition.

Pour activer les transitions de contenu de fenêtre dans votre code, appelez plutôt la méthode 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 une Objet Transition:

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

Pour profiter pleinement de la transition, vous devez activer le contenu de la fenêtre sur les appels et les activités appelées. Dans le cas contraire, l'appel active la transition de sortie, mais la fenêtre des transitions, comme l'échelle ou le fondu.

Pour démarrer une transition "Entrée" dès que possible, utilisez l' Window.setAllowEnterTransitionOverlap() sur l'activité appelée. Vous pouvez ainsi réaliser des transitions plus spectaculaires.

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

Si vous activez les transitions et que vous définissez une transition de sortie pour une activité, le 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 au début de l'activité. Pour désactiver les transitions au démarrage une autre activité, fournissez un lot 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 ayant une un élément partagé, procédez comme suit:

  1. Activez 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 la 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 méthode 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 avez terminé la deuxième activité, appelez la méthode 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 qui en contiennent davantage plusieurs éléments partagés, définissez les éléments partagés dans les deux mises en page avec le paramètre android:transitionName) ou utilisez l'attribut View.setTransitionName() dans les deux activités, et créer un 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"));