Mueve las vistas con una animación de desplazamiento

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a usar animaciones en Compose.

La animación basada en desplazamientos usa una fuerza de fricción proporcional a la velocidad del objeto. Úsalo para animar una propiedad de un objeto y finalizar la animación de forma gradual. Tiene un impulso inicial, que se recibe principalmente a partir de la velocidad del gesto, y disminuye gradualmente. La animación llega a su fin cuando la velocidad es lo suficientemente baja como para que no se realicen cambios visibles en la pantalla del dispositivo.

Figura 1: Animación de desplazamiento

Para obtener más información sobre temas relacionados, consulta las siguientes guías:

Agrega la biblioteca de AndroidX

Para usar las animaciones basadas en la física, debes agregar la biblioteca de AndroidX a tu proyecto de la siguiente manera:

  1. Abre el archivo build.gradle del módulo de tu app.
  2. Agrega la biblioteca de AndroidX a la sección dependencies.

    Groovy

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

    Kotlin

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

Cómo crear una animación de desplazamiento

La clase FlingAnimation te permite crear una animación de desplazamiento para un objeto. Para compilar una animación de desplazamiento, crea una instancia de la clase FlingAnimation y proporciona un objeto y la propiedad del objeto que quieras animar.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

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

Cómo establecer la velocidad

La velocidad inicial define la velocidad a la que cambia la propiedad de una animación al comienzo de esta. La velocidad inicial predeterminada se establece en cero píxeles por segundo. Por lo tanto, debes definir una velocidad de inicio para asegurarte de que la animación no termine de inmediato.

Puedes usar un valor fijo como velocidad inicial o puedes basarlo en la velocidad de un gesto táctil. Si eliges proporcionar un valor fijo, debes definirlo en dp por segundo y, luego, convertirlo a píxeles por segundo. Definir el valor en dp por segundo permite que la velocidad sea independiente de la densidad y los factores de forma de un dispositivo. Si quieres obtener más información para convertir la velocidad inicial a píxeles por segundo, consulta la sección Cómo convertir dp por segundo a píxeles por segundo en Animación de resortes.

Para establecer la velocidad, llama al método setStartVelocity() y pasa la velocidad en píxeles por segundo. El método muestra el objeto flotante en el que se establece la velocidad.

Nota: Usa las clases GestureDetector.OnGestureListener y VelocityTracker para recuperar y calcular la velocidad de los gestos táctiles, respectivamente.

Cómo establecer un rango de valores de la animación

Puedes establecer los valores de animación mínimos y máximos cuando desees restringir el valor de la propiedad a un rango determinado. Este control de rango es particularmente útil cuando animas propiedades que tienen un rango intrínseco, como alfa (de 0 a 1).

Nota: Cuando el valor de una animación de desplazamiento alcanza el valor mínimo o máximo, la animación finaliza.

Para establecer los valores mínimos y máximos, llama a los métodos setMinValue() y setMaxValue(), respectivamente. Ambos métodos muestran el objeto de animación para el que estableciste el valor.

Cómo establecer la fricción

El método setFriction() te permite cambiar la fricción de la animación. Este define qué tan rápido se disminuye la velocidad en una animación.

Nota: Si no estableces la fricción al comienzo de la animación, esta usará un valor de fricción predeterminado de 1.

El método muestra el objeto cuya animación usa el valor de fricción que proporcionaste.

Código de muestra

En el siguiente ejemplo, se demuestra un desplazamiento horizontal. La velocidad capturada a partir del rastreador de velocidad es velocityX y los límites de desplazamiento están establecidos en 0 y maxScroll. La fricción se estableció en 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();

Cómo establecer el cambio mínimo visible

Cuando animas una propiedad personalizada que no está definida en píxeles, debes establecer el valor de cambio mínimo de animación visible para los usuarios. Determina un umbral razonable para finalizar la animación.

No es necesario llamar a este método cuando se anima DynamicAnimation.ViewProperty porque el cambio mínimo visible deriva de la propiedad. Por ejemplo:

  • El valor de cambio mínimo visible predeterminado es de 1 píxel para las propiedades de vista, como TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X y SCROLL_Y.
  • Para las animaciones que usan rotación, como ROTATION, ROTATION_X y ROTATION_Y, el cambio mínimo visible es MIN_VISIBLE_CHANGE_ROTATION_DEGREES o 1/10 píxeles.
  • Para las animaciones que usan opacidad, el cambio mínimo visible es MIN_VISIBLE_CHANGE_ALPHA o 1/256.

Para establecer el cambio mínimo visible para una animación, llama al método setMinimumVisibleChange() y pasa una de las constantes mínimas visibles o un valor que debas calcular para una propiedad personalizada. Si deseas obtener más información para calcular este valor, consulta la sección Cómo calcular un valor de cambio mínimo visible.

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Nota: Solo debes pasar un valor cuando animes una propiedad personalizada que no esté definida en píxeles.

Cómo calcular un valor de cambio mínimo visible

Para calcular el valor de cambio mínimo visible de una propiedad personalizada, usa la siguiente fórmula:

Cambio mínimo visible = rango de valor de la propiedad personalizada / rango de animación en píxeles

Por ejemplo, la propiedad que quieres animar avanza de 0 a 100. Esto corresponde a un cambio de 200 píxeles. Según la fórmula, el valor de cambio mínimo visible es 100 / 200 es igual a 0.5 píxeles.