Cómo mover una vista con animación

A menudo, es necesario reposicionar los objetos en pantalla debido a la interacción del usuario en segundo plano. En lugar de actualizar de inmediato el estado que hace que parpadee de un área a otra, usa una animación para moverlo de la posición de inicio a su posición final.

Una forma en que Android te permite reposicionar tus objetos View en la pantalla es con ObjectAnimator. Tú proporcionas la posición final que y la duración de la animación. Puedes también puedes usar interpoladores de tiempo para controlar la aceleración o desaceleración de la velocidad animación.

Cómo cambiar la posición de la vista con ObjectAnimator

La ObjectAnimator La API proporciona una forma de cambiar las propiedades de una vista con una duración especificada. Contiene métodos estáticos para crear instancias de ObjectAnimator según qué tipo de atributo estás animando. Si reposicionas tus vistas en usa los atributos translationX y translationY.

Este es un ejemplo de un objeto ObjectAnimator que mueve la vista a la posición 100. píxeles desde la izquierda de la pantalla en 2 segundos:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

En este ejemplo, se usa el ObjectAnimator.ofFloat() porque los valores de traducción deben ser flotantes. El primer parámetro es la vista que quieres animar. El segundo parámetro es la propiedad animaciones. Como la vista debe moverse horizontalmente, translationX una propiedad de Google Cloud. El último parámetro es el valor final de la animación. En este ejemplo, el valor de 100 indica una posición en la que muchos píxeles desde la izquierda de la pantalla.

El siguiente método especifica cuánto tarda la animación en milisegundos. En este Por ejemplo, la animación se ejecuta durante 2 segundos (2,000 milisegundos).

El último método hace que se ejecute la animación y se actualice la posición de la vista. en la pantalla.

Para obtener más información sobre el uso de ObjectAnimator, consulta Anima con ObjectAnimator.

Cómo agregar movimientos curvos

Si bien conviene usar ObjectAnimator, de forma predeterminada, este reposiciona la en una línea recta entre los puntos de inicio y finalización. Material diseño se basa en las curvas para el movimiento espacial de los objetos en la pantalla y la el tiempo de una animación. El uso de movimientos curvos le brinda a tu app más sensación de material y hacer que tus animaciones sean más interesantes.

Cómo definir tu propia trayectoria

La clase ObjectAnimator tiene constructores que te permiten animar coordenadas. usando dos o más propiedades a la vez junto con una ruta. Para ejemplo, el siguiente animador usa un El objeto Path para animar la imagen X e Y Propiedades de una vista:

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
}

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
}

La animación de arco se ve de la siguiente manera:

Figura 1: Una animación de ruta curva.

Un objeto Interpolator es la implementación de una curva de aceleración. Consulta la Documentación de Material Design para obtener más información sobre el concepto de curvas de aceleración. Un Interpolator define cómo se calculan los valores específicos en una animación como una función de tiempo. El sistema proporciona recursos XML para las tres curvas básicas del Especificación de Material Design:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

Cómo usar PathInterpolator

El PathInterpolator es un interpolador que se introdujo en Android 5.0 (API 21). Se basa en un Curva Bézier o una Objeto Path. Los ejemplos de Android en la documentación de Material Design para flexibilización usa PathInterpolator.

PathInterpolator tiene constructores basados en diferentes tipos de curvas Bézier. Todas las curvas Bézier tienen puntos de inicio y finalización fijos en (0,0) y (1,1), respectivamente. Los otros argumentos del constructor dependen del tipo de Bézier. que se está creando.

Por ejemplo, para una curva Bézier cuadrática, solo las coordenadas X e Y de un punto de control:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Esto produce una curva de aceleración que comienza rápidamente y se desacelera a medida que se acerca al final.

El constructor cúbico Bézier también ha corregido los puntos de inicio y finalización, pero requiere dos puntos de control:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

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

Esta es una implementación de Material Design destacada desacelerar curva de aceleración.

Si deseas tener un mayor control, se puede usar un Path arbitrario para definir la curva:

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()
}

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

Esto produce la misma curva de aceleración que el ejemplo de Bézier cúbico, pero utiliza un Path en su lugar.

También puedes definir un interpolador para la trayectoria como un recurso 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"/>

Cuando crees un objeto PathInterpolator, podrás pasarlo al Animator.setInterpolator() . Animator usa el interpolador para determinar el tiempo o la ruta cuando se inicia.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();