Déplacer une vue avec animation

Essayer Compose

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

Animer la position →

Les objets à l'écran doivent souvent être repositionnés en raison de l'interaction de l'utilisateur ou du traitement en arrière-plan. Au lieu de mettre à jour immédiatement 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 de fin.

Android vous permet de repositionner vos objets de vue à l'écran à l'aide de ObjectAnimator. Vous indiquez la position finale dans laquelle vous souhaitez que l'objet se stabilise, 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 vers une position située à 100 pixels de la gauche de l'écran en 2 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 nombres à virgule flottante. Le premier paramètre correspond à 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 100 indique une position à 100 pixels du bord gauche de l'écran.

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

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

Pour en savoir plus sur l'utilisation de ObjectAnimator, consultez Animer avec ObjectAnimator.

Ajouter un mouvement incurvé

Bien que l'utilisation de ObjectAnimator soit pratique, elle repositionne par défaut la vue le long d'une ligne droite entre les points de départ et d'arrivée. Le Material Design repose sur des courbes pour le déplacement spatial des objets à l'écran et le timing d'une animation. L'utilisation de mouvements courbes donne à votre application une apparence plus matérielle 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 qu'un chemin d'accès. 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 d'arc :

Figure 1. Animation de trajectoire courbe.

Un Interpolator est une implémentation d'une courbe de lissage de vitesse. Pour en savoir plus sur le concept de courbes d'accélération, consultez la documentation Material Design. Une Interpolator définit la façon dont des valeurs spécifiques d'une animation sont calculées 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'interpolation utilisent PathInterpolator.

PathInterpolator possède des constructeurs basés sur différents types de courbes de Bézier. Toutes les courbes de Bézier ont des points de départ et d'arrivée fixes à (0,0) et (1,1), respectivement. 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 commence rapidement et ralentit à mesure qu'elle approche de la fin.

Le constructeur de Bézier cubique a é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 de lissage de vitesse emphasized decelerate de Material Design.

Pour plus de contrôle, un Path arbitraire peut être utilisé 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 d'accès 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'interpolateur pour déterminer la courbe de timing ou de chemin lorsqu'il est démarré.

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

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