Déplacer une vue avec animation

Essayer Compose

Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.

Animate position →

Les objets à l'écran doivent souvent être repositionnés en raison d'une interaction de l'utilisateur ou d'un traitement en arrière-plan. Au lieu de mettre immédiatement à jour la position de l'objet, ce qui le fait clignoter d'une zone à une autre, utilisez une animation pour le déplacer de sa position de départ à sa position finale.

Pour qu'Android vous permette de repositionner vos objets View à l'écran, vous pouvez utiliser ObjectAnimator. Vous indiquez la position finale que vous souhaitez que l'objet occupe, ainsi que la durée de l'animation. Vous pouvez également utiliser des interpolateurs temporels pour contrôler l'accélération ou la décélération de l'animation.

Modifier la position de la vue avec ObjectAnimator

L'API ObjectAnimator permet de modifier les propriétés d'une vue avec une durée spécifiée. Il contient des méthodes statiques permettant de créer des instances de ObjectAnimator en fonction du type d'attribut que vous animez. Lorsque vous repositionnez vos vues à l'écran, utilisez les attributs translationX et translationY.

Voici un exemple de ObjectAnimator qui déplace la vue à une position de 100 pixels à partir de la gauche de l'écran en deux secondes:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

Cet exemple utilise la méthode ObjectAnimator.ofFloat(), car les valeurs de traduction doivent être des valeurs flottantes. Le premier paramètre est la vue que vous souhaitez animer. Le deuxième paramètre correspond à la propriété que vous animez. Étant donné que la vue doit se déplacer horizontalement, la propriété translationX est utilisée. Le dernier paramètre correspond à la valeur de fin de l'animation. Dans cet exemple, la valeur de 100 indique une position à de nombreux pixels de la gauche de l'écran.

La méthode suivante spécifie la durée de l'animation, en millisecondes. Dans cet exemple, l'animation s'exécute pendant deux secondes (2 000 millisecondes).

La dernière méthode déclenche l'exécution de l'animation, ce qui met à jour la position de la vue à l'écran.

Pour en savoir plus sur l'utilisation de ObjectAnimator, consultez la section Animer des animations à l'aide d'ObjectAnimator.

Ajouter un mouvement incurvé

Bien que l'utilisation de ObjectAnimator soit pratique, elle repositionne par défaut la vue sur une ligne droite entre les points de début et de fin. Material Design s'appuie sur les courbes pour le mouvement spatial des objets à l'écran et la durée d'une animation. L'utilisation de mouvements incurvés donne à votre application un aspect plus matériel, tout en rendant vos animations plus intéressantes.

Définir votre propre chemin

La classe ObjectAnimator comporte des constructeurs qui vous permettent d'animer des coordonnées à l'aide de deux propriétés ou plus à la fois, ainsi que d'un tracé. Par exemple, l'animateur suivant utilise un objet Path pour animer les propriétés X et Y d'une vue:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Voici à quoi ressemble l'animation en arc :

Figure 1 : Animation de trajectoire courbe.

Un Interpolator est une implémentation d'une courbe d'atténuation. Pour en savoir plus sur le concept de lissage des courbes, consultez la documentation Material Design. Un Interpolator définit le mode de calcul des valeurs spécifiques d'une animation en fonction du temps. Le système fournit des ressources XML pour les trois courbes de base de la spécification Material Design :

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

Utiliser PathInterpolator

La classe PathInterpolator est un interpolateur introduit dans Android 5.0 (API 21). Elle est basée sur une courbe de Bézier ou un objet Path. Les exemples Android de la documentation Material Design sur l'atténuation utilisent PathInterpolator.

PathInterpolator comporte des constructeurs basés sur différents types de courbes de Bézier. Les points de départ et d'arrivée de toutes les courbes de Bézier sont fixés respectivement à (0,0) et (1,1). Les autres arguments du constructeur dépendent du type de courbe de Bézier créé.

Par exemple, pour une courbe de Bézier quadratique, seules les coordonnées X et Y d'un point de contrôle sont nécessaires :

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Cela produit une courbe de lissage de vitesse qui démarre rapidement et ralentit à l'approche de la fin.

Le constructeur cubique de Bézier possède également des points de départ et d'arrivée fixes, mais il nécessite deux points de contrôle:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Il s'agit d'une implémentation de la courbe d'atténuation accentuée de Material Design.

Pour un contrôle plus précis, vous pouvez utiliser un Path arbitraire pour définir la courbe :

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

Cela produit la même courbe de lissage de vitesse que l'exemple de Bézier cubique, mais utilise un Path à la place.

Vous pouvez également définir un interpolateur de chemin en tant que ressource XML:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

Une fois que vous avez créé un objet PathInterpolator, vous pouvez le transmettre à la méthode Animator.setInterpolator(). Animator utilise l'interpolater pour déterminer le timing ou la courbe de tracé au démarrage.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();