Cómo iniciar una actividad con una animación

Las transiciones de actividades en las apps de Material Design proporcionan conexiones visuales entre diferentes estados a través del movimiento y las transformaciones entre elementos comunes. Puedes especificar animaciones personalizadas para entrar y salir de las transiciones y para las transiciones de elementos compartidos entre actividades.

Figura 1. R transición con elementos compartidos.

  • Una transición de entrada determina cómo las vistas en una actividad entrar en escena. Por ejemplo, en la transición de entrada explode, el vistas ingresan a la escena desde el exterior y vuelan hacia adentro, hasta el centro de la en la pantalla.
  • Una transición de salida determina cómo salen las vistas en una actividad. a la escena. Por ejemplo, en la transición de salida explode, las vistas salir de escena lejos del centro.
  • Una transición de elementos compartidos determina cómo se compartida entre dos actividades realiza una transición entre estas. Por ejemplo: Si dos actividades tienen la misma imagen en diferentes posiciones y tamaños, el La transición de elementos compartidos changeImageTransform traduce y ajusta la imagen suavemente entre estas actividades.

Android admite las siguientes transiciones de entrada y salida:

  • explode: Mueve vistas hacia adentro o hacia afuera del centro de la escena.
  • slide: mueve vistas hacia adentro o hacia afuera de uno de los bordes de la escena.
  • fade: Agrega o quita una vista de la escena cambiando su opacidad.

Toda transición que extiende la clase Visibility se admite como una transición de entrada o salida. Para obtener más información, consulta la referencia de la API para Transition .

Android también admite las siguientes transiciones de elementos compartidos:

  • changeBounds: Anima los cambios en los límites de diseño del objetivo. vistas.
  • changeClipBounds: Anima los cambios en los límites de recorte del objetivo. vistas.
  • changeTransform: anima los cambios en escala y rotación de vistas objetivo.
  • changeImageTransform: anima los cambios de tamaño y escala de imágenes de destino.

Cuando habilitas las transiciones de actividades en tu app, el encadenado predeterminado de entrada y salida se activa entre las actividades que ingresan y salen.

Figura 2: Una transición de escena con un elemento compartido

Para ver un código de muestra que anima entre actividades con elementos compartidos, consulta ActivitySceneTransitionBasic.

Comprueba la versión del sistema

Las API de transición de actividad están disponibles en Android 5.0 (API nivel 21) y versiones posteriores. Para conservar la compatibilidad con versiones anteriores de Android, consulta la el sistema version durante el tiempo de ejecución Invoca las APIs para cualquiera de estas funciones:

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
}

Cómo especificar transiciones personalizadas

Primero, habilita las transiciones del contenido de la ventana con el android:windowActivityTransitions cuando defines un estilo que hereda del tema Material. También puedes especificar las transiciones de entrada, salida y elementos compartidos en tu definición de estilo:

<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>

La transición change_image_transform en este ejemplo se define en la siguiente forma:

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

El elemento changeImageTransform corresponde al Clase ChangeImageTransform. Para obtener más información, consulta la API referencia de Transition.

Para habilitar las transiciones del contenido de las ventanas en tu código, llama al Función 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());

Para especificar transiciones en tu código, llama a estas funciones con una Objeto Transition:

Los operadores setExitTransition() y Las funciones setSharedElementExitTransition() definen la salida para la actividad de llamada. Los operadores setEnterTransition() y Las funciones setSharedElementEnterTransition() definen la tecla Intro para la actividad llamada.

Para obtener el efecto completo de una transición, debes habilitar el contenido de la ventana las transiciones en las actividades de llamada y las llamadas. De lo contrario, la llamada la actividad comienza la transición de salida, pero luego ves la ventana transiciones, como escalar o atenuar.

Para iniciar una transición de entrada lo antes posible, usa el Window.setAllowEnterTransitionOverlap() en la actividad llamada. Esto te permite tener transiciones de entrada más intensas.

Inicia una actividad mediante transiciones

Si habilitas transiciones y estableces una transición de salida para una actividad, el transición se activa cuando inicias otra actividad, como se indica a continuación:

Kotlin

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

Java

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

Si estableces una transición de entrada para la segunda actividad, esa transición también se activa cuando comienza la actividad. Para inhabilitar las transiciones al iniciar otra actividad, proporciona un paquete de opciones null.

Cómo iniciar una actividad con un elemento compartido

Para hacer una animación de transición de pantalla entre dos actividades que tienen una compartido, haz lo siguiente:

  1. Habilita las transiciones del contenido de las ventanas en tu tema.
  2. Especifica una transición de elementos compartidos en tu estilo.
  3. Cómo definir tu transición como un recurso XML.
  4. Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo android:transitionName.
  5. Usa la función 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());
    }
});

Para las vistas dinámicas compartidas que generes en tu código, usa el elemento La función View.setTransitionName() para especificar un nombre de elemento común en ambos de datos.

Para invertir la animación de transición de escena cuando termines la segunda actividad, llama al Activity.finishAfterTransition() en lugar de Activity.finish().

Cómo iniciar una actividad con varios elementos compartidos

Para hacer una animación de transición de escenas entre dos actividades que tienen más de un elemento compartido, define los elementos compartidos en ambos diseños con las atributo android:transitionName, o usa el la función View.setTransitionName() en ambas actividades, y crear un ActivityOptions objeto de la siguiente manera:

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"));