Déplacer une vue avec animation

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

Android vous permet de repositionner vos objets View à l'écran à l'aide de ObjectAnimator. Vous indiquez la position finale que l'objet s'installe et la durée de l'animation. Vous pouvez également utiliser des interpolateurs de temps pour contrôler l'accélération ou la décélération de l'animation.

Modifier la position de la vue avec ObjectAnimator

ObjectAnimator L'API 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 de le type d'attribut que vous animez. Lorsque vous repositionnez vos vues sur utilisez les attributs translationX et translationY.

Voici un exemple de ObjectAnimator qui déplace la vue à la position 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 ObjectAnimator.ofFloat() , car les valeurs de traduction doivent être des nombres à virgule flottante. Le premier paramètre est la vue que vous souhaitez animer. Le deuxième paramètre est la propriété et l'animation. Étant donné que la vue doit se déplacer horizontalement, translationX est utilisée. Le dernier paramètre correspond à la valeur de fin de l'animation. Dans ce exemple, la valeur 100 indique une position à laquelle de nombreux pixels l'écran.

La méthode suivante spécifie la durée de l'animation, en millisecondes. Dans ce exemple, l'animation s'exécute pendant 2 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 Animer à l'aide de ObjectAnimator.

Ajouter un mouvement incurvé

Bien que l'utilisation de ObjectAnimator soit pratique, elle repositionne par défaut les voir le long d'une ligne droite entre les points de départ et d'arrivée. Matière s'appuie sur les courbes pour le mouvement spatial des objets à l'écran et le minutage d'une animation. L'utilisation d'un mouvement incurvé donne à votre application une apparence plus matérielle tout en rendant vos animations plus intéressantes.

Définir votre propre chemin d'accès

La classe ObjectAnimator comporte des constructeurs qui vous permettent d'animer des coordonnées. en utilisant deux ou plusieurs propriétés à la fois avec un tracé. Pour exemple, l'animateur suivant utilise Un objet Path pour animer les 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
}

L'animation de l'arc se présente comme suit:

Figure 1 : Animation représentant un tracé incurvé.

Un Interpolator est l'implémentation d'une courbe de lissage de vitesse. Consultez le Documentation Material Design pour en savoir plus sur le concept de lissage des courbes. Interpolator définit la manière dont les valeurs spécifiques d'une animation sont calculées en tant que fonction de en temps réel. 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 PathInterpolator est un interpolateur introduit dans Android 5.0 (API 21). Elle se base sur une la courbe de Bézier ou Path. Les exemples Android présentés dans la documentation Material Design pour lissage de vitesse utilisez 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 fixes à (0,0) et (1,1). respectivement. Les autres arguments du constructeur dépendent du type de Bézier la courbe en cours de création.

Par exemple, pour une courbe quadratique de Bézier, 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 au fur et à mesure approche de la fin.

De même, le constructeur cubique de Bézier a 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 Material Design accentuée ralentir de lissage de vitesse.

Pour un meilleur contrôle, vous pouvez définir la courbe à l'aide d'une fonction Path arbitraire:

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 dans l'exemple de Bézier cubique, mais elle 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 Animator.setInterpolator() . Animator utilise l'interpolateur pour déterminer la durée ou le 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();