Mueve las vistas con una animación de desplazamiento

Prueba la forma de Compose

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

Spring AnimationSpec →

La animación basada en lanzamientos utiliza una fuerza de fricción proporcional a la velocidad del objeto. Úsala para animar una propiedad de un objeto y finalizar la animación de manera gradual. Tiene un impulso inicial que se recibe principalmente a partir de la velocidad del gesto y disminuye poco a poco. La animación llega a su fin cuando la velocidad es tan baja que no se produce ningún cambio visible en la pantalla del dispositivo.

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

• Movimiento basado en la física
• Cómo animar movimiento con física de resortes

Cómo agregar 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 correspondiente que quieras animar.

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

Cómo establecer la velocidad

La velocidad inicial define a qué velocidad cambia la propiedad de una animación cuando se empieza a reproducir. 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 configurarlo en función de 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. Si defines el valor en dp por segundo, permites que la velocidad sea independiente de la densidad y los factores de forma de un dispositivo. Para obtener más información sobre cómo convertir la velocidad inicial a píxeles por segundo, consulta la sección Cómo convertir dp por segundo a píxeles por segundo del artículo sobre animación con 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 que va a desplazar en el que se establecerá la velocidad.

Nota: Usa las clasesGestureDetector.OnGestureListener y VelocityTracker para obtener y calcular respectivamente la velocidad de los gestos táctiles.

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 se animan propiedades que tienen un rango intrínseco, como alfa (de 0 a 1).

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

Para establecer los valores mínimo y máximo, 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 configuras la fricción al principio 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 proporcionas.

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 se establecieron en 0 y maxScroll. La fricción se estableció en 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();

Cómo establecer el cambio mínimo visible

Cuando animes una propiedad personalizada que no esté definida en píxeles, deberás 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 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. Para obtener más información sobre cómo calcular este valor, consulta la sección Cómo calcular un valor de cambio mínimo visible.

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Nota: Solo debes pasar un valor cuando animas 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 valores 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 de 100 / 200 equivale a 0.5 píxeles.