Criar uma animação de transição personalizada

Uma transição personalizada permite criar uma animação que não está disponível em nenhum as classes de transição integradas. Por exemplo, você pode definir uma transição personalizada que transforma a cor do primeiro plano do texto e dos campos de entrada em cinza para indicar que os campos estão desativados na nova tela. Esse tipo de alteração ajuda os usuários a ver os campos que você desativou.

Uma transição personalizada, como um dos tipos de transição integrados, aplica animações a visualizações filhas das cenas inicial e final. No entanto, ao contrário dos tipos de transição integrados, você precisa fornecer o código que captura os valores das propriedades e gera animações. Também é possível definir um subconjunto de visualizações de destino para sua animação.

Esta página ensina como capturar valores de propriedade e gerar animações para criar e transições personalizadas.

Estender a classe Transition

Para criar uma transição personalizada, adicione uma classe ao seu projeto que estende a classe Transition e modifica as funções mostradas no snippet a seguir:

Kotlin

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

Java

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

As seções a seguir explicam como modificar essas funções.

Capturar valores de propriedade da visualização

As animações de transição usam o sistema de animação de propriedades descrito em Visão geral da animação de propriedades. Propriedade animações mudam uma propriedade de visualização de um valor inicial para um valor final em um determinado de tempo, portanto, o framework precisa ter os valores inicial e final do a propriedade para criar a animação.

No entanto, uma animação de propriedade geralmente precisa de apenas um pequeno subconjunto de todas as propriedades da visualização e a distribuição dos valores dos dados. Por exemplo, uma animação de cor precisa de valores de propriedade de cor, enquanto um movimento A animação precisa de valores da propriedade de posição. Como os valores de propriedade necessários para uma animação são específicos de uma transição, o framework de transições não fornece todos os valores de propriedade para uma transição. Em vez disso, o framework invoca funções de callback que permitem uma transição para capture apenas os valores de propriedade necessários e armazene-os no framework.

Capturar valores iniciais

Para transmitir os valores iniciais de visualização para o framework, implemente o captureStartValues(transitionValues) função. O framework chama essa função para todas as visualizações na cena inicial. A função é um objeto TransitionValues que contém uma referência à visualização e uma instância Map em que é possível armazenar os valores de visualização que você querem. Na implementação, recupere esses valores de propriedade e passe-os de volta para o da infraestrutura armazenando-os no mapa.

Para garantir que a chave de um valor de propriedade não entre em conflito com outros TransitionValues, use o seguinte esquema de nomenclatura:

package_name:transition_name:property_name

O snippet a seguir mostra uma implementação da função captureStartValues():

Kotlin

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

Java

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

Capturar valores finais

O framework chama a função captureEndValues(TransitionValues) uma vez para cada visualização de destino na cena final. Em todos os outros aspectos, captureEndValues() funciona da mesma forma que captureStartValues().

O snippet de código a seguir mostra uma implementação da função captureEndValues():

Kotlin

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

Java

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

Neste exemplo, captureStartValues() e captureEndValues() as funções invocam captureValues() para recuperar e armazenar valores. A propriedade de visualização que captureValues() recupera é o mesmo, mas tem valores diferentes no cenas iniciais e finais. O framework mantém mapas separados para os períodos inicial e final estados de uma visualização.

Criar um animador personalizado

Para animar as mudanças em uma visualização entre seu estado na cena inicial e seu estado na cena final, forneça um animador substituindo a createAnimator() função. Quando o framework chama essa função, ele passa a visualização raiz da cena e o Objetos TransitionValues que contêm os valores inicial e final capturado.

O número de vezes que o framework chama a função createAnimator() depende do mudanças que ocorrem entre as cenas inicial e final.

Por exemplo, considere um fade-out animação de exibição gradual implementada como transição personalizada. Se a cena inicial tiver cinco alvos, de quais dois são removidos da cena final, e a cena final tem os três alvos da cena inicial e um novo destino, o framework chama createAnimator() seis vezes. Três das chamadas animam o fade-out e fade-in dos alvos que permanecem em ambas as cenas objetos. Mais duas chamadas animam o esmaecimento dos alvos removidos da cena final. Um anima o aparecimento gradual do novo destino na cena final.

Para visualizações de destino que existem nas cenas inicial e final, o framework fornece um objeto TransitionValues para os métodos startValues e endValues. Para visualizações de destino que existem apenas nas guias inicial ou cena final, o framework fornece um objeto TransitionValues. para o argumento correspondente e null para o outro.

Para implementar a função createAnimator(ViewGroup, TransitionValues, TransitionValues) ao criar uma transição personalizada, use os valores de propriedade de visualização capturados para criar um objeto Animator e retorná-lo ao framework. Para um exemplo de implementação, consulte a classe ChangeColor no CustomTransition (link em inglês). Para mais informações sobre os animadores de propriedade, consulte Animação de propriedades.

Aplicar uma transição personalizada

As transições personalizadas funcionam da mesma forma que as transições integradas. Você pode aplicar uma transição personalizada usando um gerenciador de transição, conforme descrito em Aplicar uma transição.