Iniciar uma atividade usando uma animação

As transições de atividades em aplicativos com Material Design fornecem conexões visuais entre estados diferentes por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para transições de entrada e saída e para as transições de elementos compartilhados entre as atividades.

Figura 1. Um a transição com elementos compartilhados.

  • Uma transição de entrada determina como as visualizações em uma atividade entrar em cena. Por exemplo, na transição de entrada explode, a que as vistas entram na cena de fora e voam para dentro, em direção ao centro da tela.
  • Uma transição de saída determina como as visualizações em uma atividade saem na cena. Por exemplo, na transição de saída explode, as visualizações para sair de cena longe do centro.
  • Uma transição de elementos compartilhados determina como as visualizações que são compartilhadas entre duas atividades fazem uma transição entre essas atividades. Por exemplo: se duas atividades têm a mesma imagem em posições e tamanhos diferentes, a A transição de elemento compartilhado do changeImageTransform traduz e dimensiona a imagem suavemente entre essas atividades.

O Android é compatível com estas transições de entrada e saída:

  • explode: move as visualizações para dentro ou para fora partindo do centro da cena.
  • slide: move as visualizações para dentro ou para fora de uma das bordas do cena
  • fade: adiciona ou remove uma visualização de uma cena mudando a opacidade.

Qualquer transição que estenda a classe Visibility é suportada como uma transição de entrada ou de saída. Para obter mais informações, consulte a referência de API para a Transition .

O Android também é compatível com estas transições de elementos compartilhados:

  • changeBounds: anima as mudanças nos limites do layout do destino. visualizações.
  • changeClipBounds: anima as mudanças nos limites de corte do destino. visualizações.
  • changeTransform: anima as mudanças de escala e rotação do visualizações desejadas.
  • changeImageTransform: anima as mudanças de tamanho e escala do imagens de destino.

Quando você ativa as transições de atividades no app, o esmaecimento cruzado padrão é ativada entre as atividades de entrada e saída.

Figura 2. Uma transição de cena com um elemento compartilhado.

Para ver um exemplo de código que executa a animação entre atividades usando elementos compartilhados, consulte ActivitySceneTransitionBasic:

Verificar a versão do sistema

As APIs de transição de atividade estão disponíveis no Android 5.0 (API 21) e versões posteriores. Para preservar a compatibilidade com versões anteriores do Android, confira o version do sistema durante a execução invoquem as APIs para qualquer um destes recursos:

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
}

Especificar transições personalizadas

Primeiro, ative as transições de conteúdo da janela com o android:windowActivityTransitions ao definir um estilo herdado do tema do Material Design. Também é possível especificar transições de entrada, saída e elemento compartilhado na definição 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>

A transição change_image_transform desse exemplo é definida da seguinte maneira:

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

O elemento changeImageTransform corresponde ao ChangeImageTransform. Para mais informações, consulte a documentação referência para Transition.

Para ativar transições de conteúdo da janela no código, chame o método Função 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 transições no código, chame essas funções com uma Objeto Transition:

Os métodos setExitTransition() e As funções setSharedElementExitTransition() definem o valor para a atividade de chamada. Os métodos setEnterTransition() e As funções setSharedElementEnterTransition() definem a entrada para a atividade chamada.

Para obter o efeito total de uma transição, você precisa ativar o conteúdo da janela transições tanto na atividade chamada quanto na atividade chamada. Caso contrário, a função de saída inicia a transição de saída, mas você vê a janela transições, como escala ou esmaecimento.

Para iniciar uma transição de entrada o mais rápido possível, use o Window.setAllowEnterTransitionOverlap() na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.

Iniciar uma atividade usando transições

Se você ativar as transições e definir uma transição de saída para uma atividade, a de transição é ativada quando você inicia outra atividade, da seguinte maneira:

Kotlin

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

Java

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

Se você definir uma transição de entrada para a segunda atividade, essa transição também é ativado quando a atividade é iniciada. Para desativar as transições ao começar outra atividade, forneça um pacote de opções null.

Iniciar uma atividade com um elemento compartilhado

Para fazer uma animação de transição de tela entre duas atividades que têm um elemento compartilhado, faça o seguinte:

  1. Ative transições de conteúdo da janela no tema.
  2. Especifique uma transição de elementos compartilhados no estilo.
  3. Defina a transição como um recurso XML.
  4. Atribua um nome comum aos elementos compartilhados em ambos os layouts com o android:transitionName.
  5. Use a função 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 visualizações dinâmicas compartilhadas geradas no código, use a propriedade Função View.setTransitionName() para especificar um nome de elemento comum em ambos atividades.

Para inverter a animação de transição de cena ao terminar a segunda atividade, chame o método Activity.finishAfterTransition() em vez de Activity.finish().

Iniciar uma atividade com diversos elementos compartilhados

Para fazer uma animação de transição de cena entre duas atividades com mais de um elemento compartilhado, defina os elementos compartilhados em ambos os layouts com o android:transitionName ou use o a função View.setTransitionName() em ambas as atividades crie um ActivityOptions da seguinte forma:

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