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