Afficher ou masquer une vue à l'aide d'une animation

Essayer Compose
Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment utiliser les animations dans Compose.
Fondu enchaîné →

Lorsque votre application est utilisée, de nouvelles informations s'affichent à l'écran et les anciennes sont supprimées. Changer immédiatement ce qui s'affiche à l'écran peut être déroutant, et les utilisateurs peuvent manquer le nouveau contenu qui apparaît soudainement. Les animations ralentissent les changements et attirent l'attention de l'utilisateur avec le mouvement afin que les mises à jour soient plus évidentes.

Vous pouvez utiliser trois animations courantes pour afficher ou masquer une vue : les animations de révélation, de fondu enchaîné et de retournement de carte.

Créer une animation de fondu enchaîné

Une animation de fondu enchaîné, également appelée fondu, fait disparaître progressivement un View ou un ViewGroup tout en faisant apparaître un autre élément. Cette animation est utile dans les situations où vous souhaitez changer de contenu ou de vue dans votre application. L'animation de fondu enchaîné présentée ici utilise ViewPropertyAnimator, qui est disponible pour Android 3.1 (niveau d'API 12) et versions ultérieures.

Voici un exemple de fondu enchaîné entre un indicateur de progression et du contenu textuel :

Figure 1. Animation de fondu enchaîné.

Créer les vues

Créez les deux vues que vous souhaitez fondre enchaîner. L'exemple suivant crée un indicateur de progression et un affichage de texte défilant :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

Configurer l'animation de fondu enchaîné

Pour configurer l'animation de fondu enchaîné :

  1. Créez des variables membres pour les vues que vous souhaitez effectuer en fondu enchaîné. Vous aurez besoin de ces références ultérieurement pour modifier les vues pendant l'animation.
  2. Définissez la visibilité de la vue qui est en train d'apparaître sur GONE. Cela empêche la vue d'utiliser l'espace de mise en page et l'omet des calculs de mise en page, ce qui accélère le traitement.
  3. Mettez en cache la propriété système config_shortAnimTime dans une variable membre. Cette propriété définit une durée "courte" standard pour l'animation. Cette durée est idéale pour les animations subtiles ou fréquentes. config_longAnimTime et config_mediumAnimTime sont également disponibles.

Voici un exemple utilisant la mise en page de l'extrait de code précédent comme vue de contenu de l'activité :

Kotlin

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_crossfade)

        contentView = findViewById(R.id.content)
        loadingView = findViewById(R.id.loading_spinner)

        // Initially hide the content view.
        contentView.visibility = View.GONE

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
    }
    ...
}

Java

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        contentView = findViewById(R.id.content);
        loadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        contentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }
    ...
}

Fondu enchaîné entre les vues

Lorsque les vues sont correctement configurées, effectuez un fondu enchaîné en procédant comme suit :

  1. Pour la vue qui apparaît progressivement, définissez la valeur alpha sur 0 et la visibilité sur VISIBLE à partir de son paramètre initial de GONE. La vue est alors visible, mais transparente.
  2. Pour la vue qui apparaît progressivement, animez sa valeur alpha de 0 à 1. Pour la vue qui disparaît, animez la valeur alpha de 1 à 0.
  3. En utilisant onAnimationEnd() dans un Animator.AnimatorListener, définissez la visibilité de la vue qui s'estompe sur GONE. Même si la valeur alpha est définie sur 0, définir la visibilité de la vue sur GONE empêche la vue d'utiliser l'espace de mise en page et l'omet des calculs de mise en page, ce qui accélère le traitement.

La méthode suivante montre comment procéder :

Kotlin

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    private fun crossfade() {
        contentView.apply {
            // Set the content view to 0% opacity but visible, so that it is
            // visible but fully transparent during the animation.
            alpha = 0f
            visibility = View.VISIBLE

            // Animate the content view to 100% opacity and clear any animation
            // listener set on the view.
            animate()
                    .alpha(1f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(null)
        }
        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration.toLong())
                .setListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        loadingView.visibility = View.GONE
                    }
                })
    }
}

Java

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    private void crossfade() {

        // Set the content view to 0% opacity but visible, so that it is
        // visible but fully transparent during the animation.
        contentView.setAlpha(0f);
        contentView.setVisibility(View.VISIBLE);

        // Animate the content view to 100% opacity and clear any animation
        // listener set on the view.
        contentView.animate()
                .alpha(1f)
                .setDuration(shortAnimationDuration)
                .setListener(null);

        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        loadingView.setVisibility(View.GONE);
                    }
                });
    }
}

Créer une animation de retournement de carte

Les retours de carte permettent de basculer entre les vues de contenu en affichant une animation qui simule le retournement d'une carte. L'animation de retournement de carte présentée ici utilise FragmentTransaction.

Voici à quoi ressemble un retournement de carte :

Figure 2. Animation de retournement de carte.

Créer les objets de l'animateur

Pour créer l'animation de retournement de carte, vous avez besoin de quatre animateurs. Deux animateurs sont utilisés : l'un pour l'animation de la face avant de la carte qui sort de l'écran et se déplace vers la gauche, et l'autre pour l'animation de la face avant de la carte qui entre dans l'écran et se déplace depuis la gauche. Les deux autres animateurs sont utilisés lorsque le dos de la carte apparaît et disparaît depuis la droite.

card_flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

Créer les vues

Chaque côté de la carte est une mise en page distincte qui peut contenir le contenu de votre choix, comme deux vues de texte, deux images ou n'importe quelle combinaison de vues entre lesquelles basculer. Utilisez les deux mises en page dans les fragments que vous animerez plus tard. La mise en page suivante crée un côté d'une carte, qui affiche du texte :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#a6c"
    android:padding="16dp"
    android:gravity="bottom">

    <TextView android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:textStyle="bold"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_title" />

    <TextView style="?android:textAppearanceSmall"
        android:textAllCaps="true"
        android:textColor="#80ffffff"
        android:textStyle="bold"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_description" />

</LinearLayout>

La mise en page suivante crée l'autre côté de la carte, qui affiche un ImageView :

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image1"
    android:scaleType="centerCrop"
    android:contentDescription="@string/description_image_1" />

Créer les fragments

Créez des classes de fragment pour le recto et le verso de la carte. Dans vos classes de fragment, renvoyez les mises en page que vous avez créées à partir de la méthode onCreateView(). Vous pouvez ensuite créer des instances de ce fragment dans l'activité parent où vous souhaitez afficher la fiche.

L'exemple suivant montre des classes de fragment imbriquées dans l'activité parente qui les utilise :

Kotlin

class CardFlipActivity : FragmentActivity() {
    ...
    /**

                    *   A fragment representing the front of the card.
     */
    class CardFrontFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_front, container, false)
    }

    /**
    *   A fragment representing the back of the card.
    */
    class CardBackFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_back, container, false)
    }
}

Java

public class CardFlipActivity extends FragmentActivity {
    ...
    /**
    *   A fragment representing the front of the card.
    */
    public class CardFrontFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
    }
    }

    /**
    *   A fragment representing the back of the card.
    */
    public class CardBackFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
    }
    }
}

Animer le retournement de la carte

Affichez les fragments dans une activité parente. Pour ce faire, créez la mise en page de votre activité. L'exemple suivant crée un FrameLayout auquel vous pouvez ajouter des fragments au moment de l'exécution :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Dans le code de l'activité, définissez la vue de contenu sur la mise en page que vous créez. Il est recommandé d'afficher un fragment par défaut lorsque l'activité est créée. L'exemple d'activité suivant montre comment afficher le recto de la carte par défaut :

Kotlin

class CardFlipActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_activity_card_flip)
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                    .add(R.id.container, CardFrontFragment())
                    .commit()
        }
    }
    ...
}

Java

public class CardFlipActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_card_flip);

        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new CardFrontFragment())
                    .commit();
        }
    }
    ...
}

Une fois le recto de la carte affiché, vous pouvez afficher le verso de la carte avec l'animation de retournement au moment opportun. Créez une méthode pour afficher l'autre côté de la carte, qui effectue les opérations suivantes :

  • Définit les animations personnalisées que vous avez créées pour les transitions de fragment.
  • Remplace le fragment affiché par un nouveau fragment et anime cet événement avec les animations personnalisées que vous avez créées.
  • Ajoute le fragment précédemment affiché à la pile "Retour" des fragments. Ainsi, lorsque l'utilisateur appuie sur le bouton Retour, la fiche se retourne.

Kotlin

class CardFlipActivity : FragmentActivity() {
    ...
    private fun flipCard() {
        if (showingBack) {
            supportFragmentManager.popBackStack()
            return
        }

        // Flip to the back.

        showingBack = true

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        supportFragmentManager.beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is tapped.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out
                )

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // the Back button to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit()
    }
}

Java

public class CardFlipActivity extends FragmentActivity {
    ...
    private void flipCard() {
        if (showingBack) {
            getSupportFragmentManager().popBackStack();
            return;
        }

        // Flip to the back.

        showingBack = true;

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        getSupportFragmentManager()
                .beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is pressed.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out)

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, new CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // Back to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit();
    }
}

Créer une animation de révélation circulaire

Les animations de révélation offrent aux utilisateurs une continuité visuelle lorsque vous affichez ou masquez un groupe d'éléments d'interface utilisateur. La méthode ViewAnimationUtils.createCircularReveal() vous permet d'animer un cercle de découpage pour afficher ou masquer une vue. Cette animation est fournie dans la classe ViewAnimationUtils, qui est disponible pour Android 5.0 (niveau d'API 21) et les versions ultérieures.

Voici un exemple montrant comment afficher une vue précédemment invisible :

Kotlin

// A previously invisible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the final radius for the clipping circle.
    val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animator for this view. The start radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
    // Make the view visible and start the animation.
    myView.visibility = View.VISIBLE
    anim.start()
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.INVISIBLE
}

Java

// A previously invisible view.
View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the final radius for the clipping circle.
    float finalRadius = (float) Math.hypot(cx, cy);

    // Create the animator for this view. The start radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);

    // Make the view visible and start the animation.
    myView.setVisibility(View.VISIBLE);
    anim.start();
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.setVisibility(View.INVISIBLE);
}

L'animation ViewAnimationUtils.createCircularReveal() prend cinq paramètres. Le premier paramètre est la vue que vous souhaitez masquer ou afficher à l'écran. Les deux paramètres suivants sont les coordonnées X et Y du centre du cercle de masquage. Il s'agit généralement du centre de la vue, mais vous pouvez également utiliser le point sur lequel l'utilisateur appuie pour que l'animation commence à l'endroit qu'il sélectionne. Le quatrième paramètre correspond au rayon de départ du cercle de clipping.

Dans l'exemple précédent, le rayon initial est défini sur zéro afin que la vue affichée soit masquée par le cercle. Le dernier paramètre correspond au rayon final du cercle. Lorsque vous affichez une vue, définissez un rayon final plus grand que la vue afin que celle-ci puisse être entièrement révélée avant la fin de l'animation.

Pour masquer une vue précédemment visible :

Kotlin

// A previously visible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the initial radius for the clipping circle.
    val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animation. The final radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)

    // Make the view invisible when the animation is done.
    anim.addListener(object : AnimatorListenerAdapter() {

        override fun onAnimationEnd(animation: Animator) {
            super.onAnimationEnd(animation)
            myView.visibility = View.INVISIBLE
        }
    })

    // Start the animation.
    anim.start()
} else {
    // Set the view to visible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.VISIBLE
}

Java

// A previously visible view.
final View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the initial radius for the clipping circle.
    float initialRadius = (float) Math.hypot(cx, cy);

    // Create the animation. The final radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);

    // Make the view invisible when the animation is done.
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            myView.setVisibility(View.INVISIBLE);
        }
    });

    // Start the animation.
    anim.start();
} else {
    // Set the view to visible without a circular reveal animation below Android
    // 5.0.
    myView.setVisibility(View.VISIBLE);
}

Dans ce cas, le rayon initial du cercle de découpage est défini sur la taille de la vue afin que celle-ci soit visible avant le début de l'animation. Le rayon final est défini sur zéro afin que la vue soit masquée à la fin de l'animation. Ajoutez un écouteur à l'animation afin que la visibilité de la vue puisse être définie sur INVISIBLE lorsque l'animation est terminée.

Ressources supplémentaires