Créer une animation de transition personnalisée

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Essayer Compose

Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment ajouter des animations dans Compose.

Ajoutez plusieurs propriétés avec une transition dans Compose →

Une transition personnalisée vous permet de créer une animation qui n'est disponible dans aucune des classes de transition intégrées. Par exemple, vous pouvez définir une transition personnalisée qui transforme la couleur de premier plan du texte et des champs de saisie en gris pour indiquer que les champs sont désactivés sur le nouvel écran. 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 aux 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 qui capture les valeurs de propriété et génère des animations. Vous pouvez également définir un sous-ensemble de vues cibles pour votre animation.

Cette page vous explique comment capturer les valeurs de propriété 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 une classe à votre projet qui étend la classe Transition et remplacez les fonctions indiquées dans l'extrait 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. Les animations de propriété font passer une propriété de vue d'une valeur de début à une valeur de fin sur une période spécifiée. Le framework doit donc disposer à la fois des valeurs de début et de fin de la propriété pour créer l'animation.

Toutefois, une animation de propriété ne nécessite généralement qu'un petit sous-ensemble de toutes les valeurs de propriété de la vue. Par exemple, une animation de couleur nécessite des valeurs de propriété de couleur, tandis qu'une animation de mouvement 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 de transition ne fournit pas toutes les valeurs de propriété à une transition. À la place, le framework appelle des fonctions de rappel qui permettent à une transition de ne capturer que les valeurs de propriété dont elle a besoin et de 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 fonction captureStartValues(transitionValues). Le framework appelle cette fonction pour chaque vue de la scène de départ. L'argument de la fonction est un objet TransitionValues contenant une référence à la vue et une instance Map dans laquelle vous pouvez stocker les valeurs de vue souhaitées. Dans votre implémentation, récupérez ces valeurs de propriété et renvoyez-les au framework en les stockant dans la carte.

Pour vous assurer que la clé d'une valeur de propriété n'entre pas en conflit avec d'autres clés TransitionValues, utilisez le schéma d'attribution de nom suivant:

package_name:transition_name:property_name

L'extrait de code suivant présente 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. Pour le reste, captureEndValues() fonctionne de la même manière que captureStartValues().

L'extrait de code suivant présente 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, les fonctions captureStartValues() et captureEndValues() appellent captureValues() pour récupérer et stocker des valeurs. La propriété de vue que captureValues() récupère est la même, mais elle a des valeurs différentes dans les scènes de début et de fin. Le framework gère des cartes distinctes pour les états de début et de fin d'une vue.

Créer un animateur personnalisé

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

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

Prenons l'exemple d'une animation de fermeture ou d'ouverture en fondu implémentée en tant que transition personnalisée. Si la scène de départ comporte cinq cibles, dont deux sont supprimées de la scène de fin, et que la scène de fin comporte les trois cibles de la scène de départ plus une nouvelle cible, le framework appelle createAnimator() six fois. Trois des appels animent l'atténuation et l'atténuation des cibles qui restent dans les deux objets de scène. Deux autres appels animent le fondu des cibles supprimées de la scène de fin. Un seul appel anime l'apparition 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 les arguments startValues et endValues. Pour les vues cibles qui n'existent que dans la scène de début ou de fin, 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 une transition personnalisée, utilisez les valeurs de propriété de la 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 l'exemple CustomTransition. Pour en savoir plus sur les animateurs de propriétés, consultez Animation de 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 transitions, comme décrit dans la section Appliquer une transition.