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 les animations dans Compose.

Spring AnimationSpec →

L'animation de balayage utilise une force de friction proportionnelle à la vitesse d'un objet. Utilisez-la pour animer une propriété d'un objet et terminer l'animation progressivement. Elle a une impulsion initiale, qui est principalement reçue de la vitesse du geste, et ralentit progressivement. L' animation se termine lorsque sa vitesse est suffisamment faible pour ne pas entraîner de changement visible à l'écran de l'appareil.

Pour en savoir plus sur des sujets connexes, consultez les guides suivants :

• Mouvement basé sur la physique
• Animer le mouvement à l'aide d'une animation à effet ressort

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 de votre module d'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 balayage

La classe FlingAnimation vous permet de créer une animation de balayage pour un objet. Pour créer une animation de balayage, créez une instance de la classe FlingAnimation et fournissez un objet ainsi que la propriété de l'objet que vous souhaitez animer.

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

Définir la vitesse

La vitesse de démarrage définit la vitesse à laquelle une propriété d'animation change au début de l'animation. La vitesse de démarrage par défaut est définie sur zéro pixel par seconde. Vous devez donc définir une vitesse de démarrage pour vous assurer que l'animation ne se termine pas immédiatement.

Vous pouvez utiliser une valeur fixe comme vitesse de démarrage ou la baser sur la vitesse d'un geste tactile. Si vous choisissez de fournir une valeur fixe, vous devez la définir en dp par seconde, puis la convertir en pixels par seconde. Définir la valeur en dp par seconde permet à la vélocité 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émarrage en pixels par seconde, consultez la section Convertir des dp par seconde en pixels par seconde dans Animation de rétroaction.

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 balayage 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 d'animation minimale et maximale lorsque vous souhaitez limiter 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 qui ont une plage intrinsèque comme l'alpha (de 0 à 1).

Remarque : Lorsque la valeur d'une animation de balayage 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.

Définir la friction

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 la 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 fournissez.

Exemple de code

L'exemple ci-dessous illustre un balayage horizontal. La vitesse capturée par le suivi de la vitesse est velocityX et, les limites de défilement sont définies sur 0 et maxScroll. La friction est définie sur 1,1.

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

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

Définir le changement visible minimal

Lorsque vous animez une propriété personnalisée qui n'est pas définie en pixels, vous devez définir le changement minimal de la valeur d'animation visible pour les utilisateurs. Cela 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 DynamicAnimation.ViewProperty car le changement visible minimal est dérivé de la propriété. Exemple :

• La valeur de changement visible minimale 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, le changement visible minimal est MIN_VISIBLE_CHANGE_ROTATION_DEGREES, soit 1/10 de pixel.
• Pour les animations qui utilisent l'opacité, le changement visible minimal est MIN_VISIBLE_CHANGE_ALPHA, soit 1/256.

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

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Remarque : Vous ne devez transmettre une valeur que lorsque vous animez une propriété personnalisée qui n'est pas définie en pixels.

Calculer une valeur de changement visible minimale

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

Changement visible minimal = Plage de valeurs de la 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. Selon la formule, la valeur de changement visible minimale est de 100 / 200, soit 0,5 pixel.