Déplacer des vues à l'aide d'une animation de déplacement

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser des animations dans Compose.

L'animation de glissement utilise une force de friction proportionnelle à la vitesse d'un objet. Utilisez-la pour animer une propriété d'un objet et mettre fin à l'animation progressivement. Elle présente un élan initial, qui provient principalement de la vitesse du geste, et ralentit progressivement. L'animation se termine lorsque sa vitesse est suffisamment faible pour qu'elle n'entraîne aucune modification visible sur l'écran de l'appareil.

Figure 1. Animation de retournement

Pour en savoir plus sur des sujets associés, consultez les guides suivants:

Ajouter la bibliothèque AndroidX

Pour utiliser les animations basées sur la physique, vous devez ajouter la bibliothèque AndroidX à votre projet comme suit:

  1. Ouvrez le fichier build.gradle du module de votre application.
  2. Ajoutez la bibliothèque AndroidX à la section dependencies.

    Groovy

            dependencies {
                implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
            }
            

    Kotlin

            dependencies {
                implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
            }
            

Créer une animation de déplacement

La classe FlingAnimation vous permet de créer une animation de déplacement pour un objet. Pour créer une animation de glissement d'un geste vif, créez une instance de la classe FlingAnimation, puis indiquez un objet et sa propriété que vous souhaitez animer.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

Définir la vitesse

La vitesse de départ définit la vitesse à laquelle une propriété d'animation change au début de l'animation. La vitesse de départ par défaut est définie sur 0 pixel par seconde. Par conséquent, vous devez définir une vitesse de début pour que l'animation ne se termine pas immédiatement.

Vous pouvez utiliser une valeur fixe comme vitesse de départ ou la baser sur la vitesse d'un geste tactile. Si vous choisissez de fournir une valeur fixe, vous devez définir la valeur en dp par seconde, puis la convertir en pixels par seconde. Définir la valeur en dp par seconde permet à la vitesse d'être indépendante de la densité et des facteurs de forme d'un appareil. Pour en savoir plus sur la conversion de la vitesse de départ en pixels par seconde, consultez la section Convertir des dp par seconde en pixels par seconde de Spring Animation.

Pour définir la vitesse, appelez la méthode setStartVelocity() et transmettez la vitesse en pixels par seconde. La méthode renvoie l'objet de glissement d'un geste vif sur lequel la vitesse est définie.

Remarque:Utilisez les classes GestureDetector.OnGestureListener et VelocityTracker pour récupérer et calculer la vitesse des gestes tactiles, respectivement.

Définir une plage de valeurs d'animation

Vous pouvez définir les valeurs minimale et maximale de l'animation lorsque vous souhaitez restreindre la valeur de la propriété à une certaine plage. Ce contrôle de plage est particulièrement utile lorsque vous animez des propriétés ayant une plage intrinsèque, telle qu'alpha (de 0 à 1).

Remarque: Lorsque la valeur d'une animation de déplacement atteint la valeur minimale ou maximale, l'animation se termine.

Pour définir les valeurs minimale et maximale, appelez respectivement les méthodes setMinValue() et setMaxValue(). Les deux méthodes renvoient l'objet d'animation pour lequel vous avez défini la valeur.

Créer des frictions

La méthode setFriction() vous permet de modifier la friction de l'animation. Elle définit la vitesse à laquelle la vitesse diminue dans une animation.

Remarque: Si vous ne définissez pas le friction au début de l'animation, celle-ci utilise une valeur de friction par défaut de 1.

La méthode renvoie l'objet dont l'animation utilise la valeur de friction que vous indiquez.

Exemple de code

L'exemple ci-dessous illustre un déplacement horizontal. La vitesse capturée à partir du traceur de vitesse est velocityX et les limites de défilement sont définies sur 0 et maxScroll. La friction est définie sur 1.1.

Kotlin

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

Définir la modification visible minimale

Lorsque vous animez une propriété personnalisée qui n'est pas définie en pixels, vous devez définir la modification minimale de la valeur de l'animation visible par les utilisateurs. Elle détermine un seuil raisonnable pour mettre fin à l'animation.

Il n'est pas nécessaire d'appeler cette méthode lors de l'animation de DynamicAnimation.ViewProperty, car la modification visible minimale est dérivée de la propriété. Par exemple :

  • La valeur minimale de modification visible par défaut est de 1 pixel pour les propriétés de vue telles que TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X et SCROLL_Y.
  • Pour les animations qui utilisent la rotation, telles que ROTATION, ROTATION_X et ROTATION_Y, la modification visible minimale est MIN_VISIBLE_CHANGE_ROTATION_DEGREES, soit 1/10 pixel.
  • Pour les animations qui utilisent l'opacité, la modification visible minimale est MIN_VISIBLE_CHANGE_ALPHA, soit 1/256.

Pour définir la modification visible minimale pour une animation, appelez la méthode setMinimumVisibleChange() et transmettez l'une des constantes visibles minimales ou une valeur à calculer pour une propriété personnalisée. Pour en savoir plus sur le calcul de cette valeur, consultez la section Calculer une valeur d'évolution visible minimale.

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Remarque: Vous ne devez transmettre une valeur que lorsque vous animez une propriété personnalisée non définie en pixels.

Calcul d'une valeur minimale d'évolution visible

Pour calculer la valeur minimale de modification visible d'une propriété personnalisée, utilisez la formule suivante:

Changement visible minimal = plage de valeurs de propriété personnalisée / plage d'animation en pixels

Par exemple, la propriété que vous souhaitez animer passe de 0 à 100. Cela correspond à un changement de 200 pixels. Conformément à la formule, la valeur minimale de modification visible est de 100 / 200, soit 0,5 pixel.