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:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
duration = 2000
start()
}
Java
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:
Kotlin
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
}
Java
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:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
PathInterpolator(0.67f, 0.33f)
} else {
LinearInterpolator()
}
Java
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:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
LinearInterpolator()
}
Java
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:
Kotlin
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()
}
Java
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.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
interpolator = myInterpolator
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setInterpolator(myInterpolator); animation.start();