View Transitions API: animações de página nativas sem biblioteca

Introdução

O desenvolvimento de software tem sido cada vez mais dominado pela utilização de bibliotecas e frameworks para implementar funcionalidades complexas, como animações de página. Embora essas soluções proporcionem facilidade e agilidade no desenvolvimento, elas podem apresentar problemas de desempenho, compatibilidade e manutenção a longo prazo.

A View Transitions API é uma opção nativa para implementação de animações de página, oferecendo benefícios em termos de desempenho e controle detalhado sobre os efeitos. Esta abordagem pode ser mais adequada quando se busca criar experiências de usuário personalizadas ou otimizar o fluxo de navegação das aplicações.

Neste artigo, exploraremos a View Transitions API em profundidade, fornecendo informações práticas para implementá-la corretamente e aproveitando seus recursos para melhorar as aplicativos móveis.

O que é e por que importa

A View Transitions API (API de Transições de Visualização) é uma interface de programação de aplicativos desenvolvida para Android, que permite aos desenvolvedores criar animações nativas entre telas sem a necessidade de bibliotecas externas. Ela oferece um controle detalhado sobre os efeitos visuais e otimiza o desempenho das transições de página.

A View Transitions API visa resolver problemas comuns associados à utilização de bibliotecas para animações, como:

Peso extra: Bibliotecas podem adicionarem peso extra ao projeto, afetando o tamanho do aplicativo e a experiência do usuário.
Compatibilidade: Problemas de compatibilidade entre diferentes versões do Android ou dispositivos pode causar falhas na execução das animações.
Manutenção: A necessidade contínua de atualizar as bibliotecas para garantir compatibilidade com novas versões do sistema operacional e melhorias em termos de desempenho pode ser um problema.

A utilização da View Transitions API pode proporcionar benefícios significativos, incluindo:

Desempenho otimizado: A transição entre telas é processada nativamente pelo sistema operacional, o que reduz a carga na CPU e melhora o desempenho.
Controle detalhado: Os desenvolvedores têm acesso completo aos parâmetros de animação, permitindo uma personalização mais sutil das experiências do usuário.

Como funciona na prática

A View Transitions API trabalha interligando-se ao mecanismo de transição de telas nativas do Android, conhecido como TransitionManager. Aqui está uma visão geral simplificada das etapas envolvidas no processo de animação:

Definição da transição: O desenvolvedor cria uma instância da classe Transition e configura seus parâmetros para controlar a animação (por exemplo, durata, tipo de transição, etc.).
Anotações de Transição: As anotações de transição são um recurso fundamental para configurar as propriedades de animação em elementos visuais da tela. Elas permitem que os desenvolvedores defina o comportamento específico das transições entre diferentes tipos de elementos visuais, como Views e Fragments.
Configuração dos parâmetros: O Transition é configurado com as informações necessárias sobre a animação, incluindo as propriedades dos objetos que serão afetados pela transição.
Definição do evento de transição: O desenvolvedor define o tipo de evento de transição (por exemplo, quando uma tela é mostrada ou oculta), associado com a instância de Transition.
Registo da Transição: A Transition é registrada no gerenciamento de transições do sistema Android.
Execução da Transição: Quando o evento de transição ocorre (por exemplo, quando uma tela é exibida ou oculta), a instância de Transition é executada automaticamente pelo sistema operacional.

Exemplo real

Vamos considerar um exemplo de como utilizar a View Transitions API para criar uma animação de transição entre telas. Suponha que você esteja criando uma aplicação de lista de tarefas e deseja criar uma animação quando o usuário navega entre as diferentes telas da lista.

// No layout XML da tela inicial (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/listViewTarefas"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

// No layout XML da tela de detalhes (activity_tarefa.xml)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tituloTarefa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/descriçãoTarefa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

// No código Kotlin da Activity Main
private lateinit var transitionSet: TransitionSet

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // Configuração inicial do TransitionSet
    transitionSet = TransitionSet()
        .addTransition(ChangeBounds())
        .addTransition(ChangeTransform())
        .setDuration(resources.getDimensionPixelSize(R.dimen.transition_duration))

    // Definição da transição para a tela de detalhes
    val detalheTransition = DetailTransition()
    detailTransition.apply {
        setTransitionName("detalhes_tarefa")
        transitionSet.addTransition(this)
    }

    // Registra o TransitionSet no gerenciamento de transições do sistema Android
    TransitionManager.beginDelayedTransition(root, transitionSet)
}

override fun onBackPressed() {
    super.onBackPressed()
    val transition = DetailTransition()
    transition.apply {
        setTransitionName("detalhes_tarefa")
        transitionSet.addTransition(this)
    }
    TransitionManager.goToState(root, R.id.activity_main)
}

// No código Kotlin da Activity Detalhes
override fun onBackPressed() {
    super.onBackPressed()
    val transition = DetailTransition()
    transition.apply {
        setTransitionName("detalhes_tarefa")
        transitionSet.addTransition(this)
    }
    TransitionManager.goToState(root, R.id.activity_main)
}

Esse exemplo demonstra como criar uma transição de tela entre as telas da lista e a tela de detalhes. A transição é configurada para ser executada automaticamente quando o usuário navega entre as telas, criando uma animação suave e atraente.

Boas práticas

Utilize a hierarquia de transições

Organize suas transições utilizando uma estrutura hierárquica, evitando a criação de múltiplos TransitionSets desnecessários.

Defina nomes únicos para as transições

Assegure-se de que cada transição tenha um nome único e significativo. Isso facilita a identificação e manutenção das transições no código.

Evite sobrecarregar o TransitionSet

Mantenha o TransitionSet simples e focado em uma ou duas transições principais. A inclusão excessiva de transições pode levar à complexidade desnecessária.

Utilize o gerenciamento de transições do sistema Android

Registre as transições no gerenciador de transições do sistema para que elas sejam executadas corretamente, mesmo em telas diferentes.

Armadilhas comuns

Não adicione transições ao TransitionSet após a execução da transitionManager.beginDelayedTransition()

Adicionar transições ao TransitionSet após a execução de TransitionManager.beginDelayedTransition() pode levar à exceção do tipo java.lang.IllegalStateException: Transition is not allowed to be added when already in progress.

Evite o uso excessivo de detalhes nas transições

Muitos detalhes nas transições podem levar ao aumento da complexidade e possivelmente causar problemas de performance. Mantenha as transições simples e eficientes.

Não repita código para a definição de transitions em telas diferentes

Evite o código repetido ao definir transições em telas diferentes. Utilize herança ou composição para reutilizar o código existente.

Conclusão

A View Transitions API fornece uma maneira eficiente e elegante de criar animações de página nativas sem a necessidade de bibliotecas externas. Ao seguir os princípios apresentados aqui, você pode criar transições de página personalizadas e complexas que melhorem a experiência do usuário em sua aplicação Android.

Alguns próximos passos incluem:

Aprofundar-se na utilização da API para animações avançadas, como o uso de Keyframes.
Estudar casos de uso práticos, como transições entre telas e dentro de fragments.
Explorar a integração com outras APIs do Android, como as Views animadas.

Ao dominar esses conceitos, você estará bem preparado para criar aplicativos Android interativos e atraentes que oferecem uma experiência de usuário inovadora.

Referências

Lister, Tim. Transitioning Views. Disponível em: https://developer.android.com/reference/android/transition/TransitionManager#beginDelayedTransition(AnimatorSet). Acesso: 2024.
Google. View Transitions API. Disponível em: https://developer.android.com/jetpack/compose/animations#view-transitions-api. Acesso: 2024.
Android Open Source Project (AOSP). TransitionSets. Disponível em: https://cs.android.com/android/platform/superproject/+/master%5E!/android/frameworks/base/core/java/android/transition/TransitionSet.java. Acesso: 2024.
Kirthika Senthilnathan. Mastering View Transitions in Android. Disponível em: https://medium.com/@ksenthilnath/mastering-view-transitions-in-android-5a11f0e3bb9d. Acesso: 2024.
Google. AnimatorSet API Documentation. Disponível em: https://developer.android.com/reference/android/animation/AnimatorSet. Acesso: 2024.