Déplacer une vue avec animation

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 à jour immédiatement la position de l'objet, ce qui le fait clignoter d'une zone à l'autre, utilisez une animation pour le déplacer de la position de départ à sa position de fin.

Pour repositionner les objets de votre vue à l'écran, Android vous permet par exemple d'utiliser ObjectAnimator. Vous indiquez la position de fin à laquelle vous souhaitez que l'objet s'installe, 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 pour 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:

Kotlin

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

Java

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 flottantes. Le premier paramètre est la vue que vous voulez animer. Le deuxième paramètre est 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 est la valeur de fin de l'animation. Dans cet exemple, la valeur de 100 indique une position située en pixels à partir de la gauche de l'écran.

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

La dernière méthode entraîne 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 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 le point de départ et le point d'arrivée. Material Design s'appuie sur les courbes pour le mouvement spatial des objets à l'écran et le timing d'une animation. L'utilisation d'un mouvement incurvé donne à votre application une apparence plus Material tout en rendant vos animations plus intéressantes.

Définissez votre propre chemin d'accès

La classe ObjectAnimator comporte des constructeurs qui vous permettent d'animer des coordonnées à l'aide de plusieurs propriétés à 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:

Kotlin

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
}

Java

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 tracé incurvé

Un Interpolator est une implémentation d'une courbe de lissage de vitesse. Pour en savoir plus sur le concept de lissage de vitesse des courbes, consultez la documentation Material Design. Un Interpolator définit la manière dont les 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). Il est basé sur une courbe de Bézier ou un objet Path. Les exemples Android de la documentation Material Design pour l'accélération de la vitesse utilisent PathInterpolator.

PathInterpolator comporte des constructeurs basés sur différents types de courbes de Bézier. Les points de début et de fin de toutes les courbes de Bézier sont fixes, respectivement, à (0,0) et (1,1). Les autres arguments de 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:

Kotlin

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

Java

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

Vous obtenez ainsi une courbe de lissage de vitesse qui démarre rapidement et ralentit à l'approche de la fin.

De même, le constructeur de Bézier cubique a des points de départ et d'arrivée fixes, mais il nécessite deux points de contrôle:

Kotlin

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

Java

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'accélération du décélération accentuée de Material Design.

Pour un contrôle accru, vous pouvez utiliser un Path arbitraire afin de définir la courbe:

Kotlin

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

Java

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

Cette opération 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'interpolateur pour déterminer la durée ou la courbe du chemin au démarrage.

Kotlin

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

Java

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