Créer une animation de transition personnalisée

Une transition personnalisée vous permet de créer une animation qui n'est disponible dans aucun des les classes de transition intégrées. Par exemple, vous pouvez définir une transition personnalisée la couleur de premier plan du texte et des champs de saisie en gris pour indiquer que les champs sont désactivés. sur l'écran qui s'affiche. Ce type de modification permet aux utilisateurs de voir les champs que vous avez désactivés.

Une transition personnalisée, comme l'un des types de transition intégrés, applique des animations à des vues enfants des scènes de début et de fin. Toutefois, contrairement aux types de transition intégrés, vous devez fournir le code permettant de capturer les valeurs des propriétés et de générer des animations. Vous pouvez également définir un sous-ensemble de vues cibles pour votre animation.

Cette page vous explique comment capturer les valeurs des propriétés et générer des animations pour créer des transitions personnalisées.

Étendre la classe Transition

Pour créer une transition personnalisée, ajoutez à votre projet une classe qui étend la classe Transition et remplacez les fonctions présentées dans l'extrait de code suivant:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

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

}

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) {}
}

Les sections suivantes expliquent comment remplacer ces fonctions.

Capturer les valeurs des propriétés de la vue

Les animations de transition utilisent le système d'animation des propriétés décrit dans la section Présentation de l'animation des propriétés Propriété les animations font passer une propriété de vue d'une valeur de départ à une valeur de fin au cours d'une d'une période donnée. Le framework doit donc avoir les valeurs de début et de fin la propriété pour construire l'animation.

Toutefois, une animation de propriété ne nécessite généralement qu'un petit sous-ensemble des propriétés de la vue. valeurs. Par exemple, une animation couleur nécessite des valeurs de propriétés de couleur, alors qu'un mouvement l'animation nécessite des valeurs de propriété de position. Étant donné que les valeurs de propriété requises pour une animation sont spécifiques à une transition, le framework dédié ne fournit pas toutes les valeurs de propriété à une transition. Au lieu de cela, le framework appelle des fonctions de rappel qui permettent une transition ne capturer que les valeurs de propriété dont il a besoin et les stocker dans le framework.

Capturer les valeurs de départ

Pour transmettre les valeurs de la vue de départ au framework, implémentez la captureStartValues(transitionValues) . Le framework appelle cette fonction pour chaque vue de la scène de départ. La fonction l'argument est un objet TransitionValues qui contient une référence à la vue et une instance Map dans laquelle vous pouvez stocker les valeurs de vue que vous voulez. Dans votre implémentation, récupérez ces valeurs de propriété et transmettez-les à la en les stockant sur la carte.

Pour garantir que la clé d'une valeur de propriété n'entre pas en conflit avec d'autres TransitionValues, utilisez le schéma de nommage suivant:

package_name:transition_name:property_name

L'extrait de code suivant montre une implémentation de la fonction captureStartValues():

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
    }

    ...

}

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());
    }
    ...
}

Capturer les valeurs de fin

Le framework appelle la fonction captureEndValues(TransitionValues) une fois pour chaque vue cible de la scène de fin. À tous les autres égards, captureEndValues() fonctionne de la même manière que captureStartValues().

L'extrait de code suivant illustre une implémentation de la fonction captureEndValues():

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

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

Dans cet exemple, captureStartValues() et captureEndValues() appellent captureValues() pour récupérer et stocker des valeurs. Propriété "view" récupérée par captureValues() est identique, mais a des valeurs différentes dans le les scènes de début et de fin. Le framework gère des cartes distinctes pour le début et la fin d'une vue.

Créer une animation personnalisée

Pour animer les changements de vue entre son état dans la scène de départ et son état dans la scène de fin, fournissez une animation en remplaçant createAnimator() . Lorsque le framework appelle cette fonction, il passe à la vue racine de la scène et Objets TransitionValues contenant les valeurs de début et de fin que vous avez capturées.

Le nombre de fois que le framework appelle la fonction createAnimator() dépend des les modifications qui se produisent entre les scènes de début et de fin.

Prenons l'exemple d'une fermeture en fondu ou Animation de fondu intégrée en tant que transition personnalisée. Si la scène de départ comporte cinq cibles, dont les deux sont retirés de la scène de fin, et que celle-ci comporte les trois cibles scène de départ plus une nouvelle cible, le framework appelle createAnimator() six fois. Trois de ces appels animent le fondu et le fondu des cibles qui se trouvent dans les deux scènes. d'objets. Deux autres appels animent la fermeture en fondu des cibles supprimées de la scène de fin. Un anime le fondu de la nouvelle cible dans la scène de fin.

Pour les vues cibles qui existent à la fois dans les scènes de début et de fin, le framework fournit un objet TransitionValues pour startValues et endValues arguments. Pour les vues cibles qui n'existent que dans le la scène finale, le framework fournit un objet TransitionValues pour l'argument correspondant et null pour l'autre.

Pour implémenter la fonction createAnimator(ViewGroup, TransitionValues, TransitionValues) lorsque vous créez transition personnalisée, utilisez les valeurs de propriété de vue que vous avez capturées pour créer un objet Animator et le renvoyer au framework. Pour obtenir un exemple d'implémentation, consultez la classe ChangeColor dans Exemple CustomTransition. Pour en savoir plus sur les animateurs de propriétés, consultez Animation des propriétés :

Appliquer une transition personnalisée

Les transitions personnalisées fonctionnent de la même manière que les transitions intégrées. Vous pouvez appliquer une transition personnalisée à l'aide d'un gestionnaire de transition, comme décrit dans Appliquer une transition ;