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