Recursos de animación
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Un recurso de animación puede definir uno de dos tipos de animaciones:
- Animación de propiedades
- Crea una animación mediante la modificación de los valores de propiedades de un objeto durante un período establecido con un
Animator
.
- Animación de vistas
-
Hay dos tipos de animaciones que puedes hacer con el framework de animación de vistas:
Animación de propiedades
Se trata de una animación definida en XML que modifica las propiedades del objeto de destino, como el color de fondo o el valor Alfa, durante un período determinado.
- ubicación del archivo:
res/animator/filename.xml
Se utiliza el nombre del archivo como ID de recurso.
- tipo de datos de recursos compilados:
- Puntero del recurso en un
ValueAnimator
, ObjectAnimator
o AnimatorSet
- referencia del recurso:
-
En código basado en Java o Kotlin:
R.animator.filename
En XML: @[package:]animator/filename
- sintaxis:
-
<set
android:ordering=["together" | "sequentially"]>
<objectAnimator
android:propertyName="string"
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["restart" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["restart" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<set>
...
El archivo debe tener un único elemento raíz:
,
o
. Puedes agrupar elementos de animación dentro del elemento
, incluidos otros elementos
.
- elementos:
-
- Un contenedor que contiene otros elementos de animación (
,
o algún otro elemento
). Representa un AnimatorSet
.
Puedes especificar etiquetas de
anidadas para agrupar más animaciones. Cada
puede definir su propio atributo de ordering
.
Atributos:
-
android:ordering
-
Palabra clave. Especifica el orden de reproducción de las animaciones en este conjunto.
Valor | Descripción |
sequentially | Reproduce animaciones en este conjunto de manera secuencial. |
together (predeterminado) | Reproduce animaciones en este conjunto al mismo tiempo. |
- Anima una propiedad específica de un objeto durante un lapso específico. Representa un
ObjectAnimator
.
Atributos:
-
android:propertyName
-
Cadena. Obligatoria. La propiedad del objeto que se animará, a la que se hace referencia por su nombre. Por ejemplo, puedes especificar
"alpha"
o "backgroundColor"
para un objeto View
.
Sin embargo, el elemento objectAnimator
no expone un atributo target
, por lo que no puedes establecer la animación del objeto en la declaración de XML. Para aumentar el recurso XML de la animación, tienes que llamar a loadAnimator()
; además, llama a setTarget()
para establecer el objeto de destino que contiene esta propiedad.
-
android:valueTo
-
flotante, int o color. Obligatorio. Es el valor donde termina la propiedad animada. Los colores se representan como números hexadecimales de seis dígitos, como #333333.
-
android:valueFrom
-
flotante, int o color. Es el valor donde comienza la propiedad animada. Si no se especifica, la animación comienza en el valor obtenido por el método
get
de la propiedad. Los colores se representan como números hexadecimales de seis dígitos, como #333333.
-
android:duration
-
int. Es el tiempo en milisegundos de la animación. 300 milisegundos es el valor predeterminado.
-
android:startOffset
-
int. La cantidad de milisegundos que tarda la animación después de llamar a
start()
.
-
android:repeatCount
-
int. Cuántas veces repetir una animación. Se establece en
"-1"
a fin de repetir infinitamente o para un número entero positivo. Por ejemplo, un valor de "1"
significa que la animación se repite una vez después de su ejecución inicial, de modo que se reproduce un total de dos veces. El valor predeterminado es "0"
, y esto significa que no hay repeticiones.
-
android:repeatMode
-
int. Cómo se comporta una animación cuando llega al final de la animación.
android:repeatCount
se debe establecer en un número entero positivo o "-1"
para que este atributo tenga efecto. Configúralo en "reverse"
de modo que la animación revierta la dirección con cada iteración o configúralo en "restart"
para que se repita indefinidamente desde el principio cada vez.
-
android:valueType
-
Palabra clave. No especifiques este atributo si el valor es un color. El framework de animación maneja los valores de color automáticamente.
Valor | Descripción |
intType | Especifica que los valores animados son números enteros. |
floatType (predeterminado) | Especifica que los valores animados son números de punto flotante. |
- Ejecuta una animación durante un lapso especificado.
Representa un
ValueAnimator
.
Atributos:
-
android:valueTo
-
flotante, int o color. Obligatorio. Es el valor donde finaliza la animación. Los colores se representan como números hexadecimales de seis dígitos, como #333333.
-
android:valueFrom
-
flotante, int o color. Obligatorio. Es el valor donde comienza la animación. Los colores se representan como números hexadecimales de seis dígitos, como #333333.
-
android:duration
-
int. Es el tiempo en milisegundos de la animación. 300 milisegundos es el valor predeterminado.
-
android:startOffset
-
int. La cantidad de milisegundos que tarda la animación después de llamar a
start()
.
-
android:repeatCount
-
int. Cuántas veces repetir una animación. Se establece en
"-1"
a fin de repetir infinitamente o para un número entero positivo. Por ejemplo, un valor de "1"
significa que la animación se repite una vez después de su ejecución inicial, de modo que se reproduce un total de dos veces. El valor predeterminado es "0"
, y esto significa que no hay repeticiones.
-
android:repeatMode
-
int. Cómo se comporta una animación cuando llega al final de la animación.
android:repeatCount
se debe establecer en un número entero positivo o "-1"
para que este atributo tenga efecto. Configúralo en "reverse"
de modo que la animación revierta la dirección con cada iteración o configúralo en "restart"
para que se repita indefinidamente desde el principio cada vez.
-
android:valueType
-
Palabra clave. No especifiques este atributo si el valor es un color. El framework de animación maneja los valores de color automáticamente.
Valor | Descripción |
intType | Especifica que los valores animados son números enteros. |
floatType (predeterminado) | Especifica que los valores animados son números de punto flotante. |
- ejemplo:
-
Archivo en formato XML guardado en res/animator/property_animator.xml
:
Para ejecutar esta animación, aumenta los recursos XML en tu código a un objeto AnimatorSet
y, luego, establece los objetos de destino para todas las animaciones antes de comenzar el conjunto de animación. Llamar a setTarget()
establece un único objeto de destino para todos los elementos secundarios del AnimatorSet
como método de conveniencia. El siguiente código muestra cómo hacer esto:
Kotlin
val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
.apply {
setTarget(myObject)
start()
}
Java
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
R.animator.property_animator);
set.setTarget(myObject);
set.start();
- consulta también:
-
Animación de vistas
El framework para la animación de vistas admite tanto animaciones de interpolación como por fotograma, y ambas se declaran en XML. En las secciones siguientes, se describe cómo usar ambos métodos.
Animación de interpolación
Se trata de una animación definida en XML que realiza transiciones en un gráfico, como rotación, atenuación, movimiento y estiramiento.
- ubicación del archivo:
res/anim/filename.xml
Se utiliza el nombre del archivo como ID de recurso.
- tipo de datos de recursos compilados:
- Puntero del recurso a un
Animation
- referencia del recurso:
-
En Java:
R.anim.filename
En XML: @[package:]anim/filename
- sintaxis:
-
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true" | "false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float" />
<set>
...
El archivo debe tener un único elemento raíz: un elemento
,
,
,
o
que contenga un grupo (o grupos) de otros elementos de animación (incluso elementos
anidados).
- elementos:
-
- Un contenedor que contiene otros elementos de animación (
,
,
,
) o algún otro elemento
. Representa un AnimationSet
.
Atributos:
android:interpolator
- Recurso de interpolador.
Es un
Interpolator
para aplicar en la animación.
El valor debe ser una referencia a un recurso que especifique un interpolador (no un nombre de clase de interpolador). Hay recursos de interpoladores predeterminados disponibles en la plataforma, o puedes crear tu propio recurso de interpolador.
Consulta el siguiente debate para obtener más información sobre interpoladores.
android:shareInterpolator
- Booleano. Es
"true"
si deseas compartir el mismo interpolador entre todos los elementos secundarios.
- Es una animación de atenuación de entrada o de salida. Representa un
AlphaAnimation
.
Atributos:
android:fromAlpha
- Número de punto flotante. Compensación de opacidad inicial, donde 0.0 es transparente y 1.0 es opaco.
android:toAlpha
- Flotante. Es la compensación de opacidad final, donde 0.0 es transparente y 1.0 es opaco.
Para obtener más atributos compatibles con
, consulta la referencia de clase para Animation
(este elemento hereda los atributos XML de dicha referencia).
- Es una animación de cambio de tamaño. Puedes especificar
pivotX
y pivotY
para indicar el punto central de la imagen desde donde se expande hacia afuera o hacia adentro. Por ejemplo, si estos valores son 0,0 (la esquina superior izquierda), toda la expansión es hacia abajo y hacia la derecha. Representa un ScaleAnimation
.
Atributos:
android:fromXScale
- Número de punto flotante. Compensación de tamaño X inicial, donde 1.0 implica ausencia de cambio.
android:toXScale
- Flotante. Compensación de tamaño X final, donde 1.0 implica ausencia de cambio.
android:fromYScale
- Flotante. Compensación de tamaño Y inicial, donde 1.0 implica ausencia de cambio.
android:toYScale
- Flotante. Compensación de tamaño Y final, donde 1.0 implica ausencia de cambio.
android:pivotX
- Flotante. La coordenada X permanece fija cuando se escala el objeto.
android:pivotY
- Flotante. Es la coordenada Y que permanecerá fija cuando el objeto se escale.
Para obtener más atributos compatibles con
, consulta la referencia de clase para Animation
(este elemento hereda los atributos XML de dicha referencia).
- Es un movimiento horizontal o vertical. Representa un
TranslateAnimation
.
Admite los siguientes atributos en cualquiera de estos tres formatos:
- Valores de -100 a 100 que terminan en "%", que indican un porcentaje relativo a sí mismo
- Valores de -100 a 100 que terminan en "%p", que indican un porcentaje en relación con su elemento superior
- Un valor de punto flotante sin sufijo, que indica un valor absoluto
Atributos:
android:fromXDelta
- Número de punto flotante o porcentaje. Es la compensación X inicial. Se expresa en píxeles relativos a la posición normal (como
"5"
), en un porcentaje relativo al ancho del elemento (como "5%"
) o en un porcentaje relativo al ancho del elemento superior (como "5%p"
).
android:toXDelta
- Número de punto flotante o porcentaje. Es la compensación X final. Se expresa en píxeles relativos a la posición normal (como
"5"
), en un porcentaje relativo al ancho del elemento (como "5%"
) o en un porcentaje relativo al ancho del elemento superior (como "5%p"
).
android:fromYDelta
- Número de punto flotante o porcentaje. Es la compensación Y inicial. Se expresa en píxeles relativos a la posición normal (como
"5"
), en un porcentaje relativo a la altura del elemento (como "5%"
) o en un porcentaje relativo a la altura del elemento superior (como "5%p"
).
android:toYDelta
- Número de punto flotante o porcentaje. Es la compensación Y final. Se expresa en píxeles relativos a la posición normal (como
"5"
), en un porcentaje relativo a la altura del elemento (como "5%"
) o en un porcentaje relativo a la altura del elemento superior (como "5%p"
).
Para obtener más atributos compatibles con
, consulta la referencia de clase para Animation
(este elemento hereda los atributos XML de dicha referencia).
- Es una animación de rotación. Representa un
RotateAnimation
.
Atributos:
android:fromDegrees
- Número de punto flotante. Posición angular inicial, en grados.
android:toDegrees
- Flotante. Posición angular final, en grados.
android:pivotX
- Flotante o porcentual. Es la coordenada X del centro de rotación. Se expresa en píxeles relativos al borde izquierdo del objeto (como
"5"
), en un porcentaje relativo al borde izquierdo del objeto (como "5%"
) o en un porcentaje relativo al borde izquierdo del contenedor superior (como "5%p"
).
android:pivotY
- Número de punto flotante o porcentaje. Es la coordenada Y del centro de rotación. Se expresa en píxeles relativos al borde superior del objeto (como
"5"
), en un porcentaje relativo al borde superior del objeto (como "5%"
) o en un porcentaje relativo al borde superior del contenedor superior (como "5%p"
).
Para obtener más atributos compatibles con
, consulta la referencia de clase para Animation
(este elemento hereda los atributos XML de dicha referencia).
- ejemplo:
-
Archivo en formato XML guardado en res/anim/hyperspace_jump.xml
:
El siguiente código de la aplicación aplica la animación a una ImageView
e inicia la animación:
Kotlin
val image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation
(this, R.anim.hyperspace_jump)
image.startAnimation
(hyperspaceJump)
Java
ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation
(this, R.anim.hyperspace_jump);
image.startAnimation
(hyperspaceJump);
- consulta también:
-
Interpoladores
Un interpolador es un modificador de animación definido en XML que afecta la tasa de cambio en una animación. Esto permite que los efectos de animación existentes se aceleren, se desaceleren, se repitan, reboten, etc.
Se aplica un interpolador a un elemento de animación con el atributo android:interpolator
, cuyo valor es una referencia a un recurso de interpolador.
Todos los interpoladores disponibles en Android son subclases de la clase Interpolator
. Para cada clase de interpolador, Android incluye un recurso público al que puedes hacer referencia para aplicar el interpolador a una animación mediante el atributo android:interpolator
.
En la siguiente tabla, se especifica el recurso que corresponde usar para cada interpolador:
Aquí te indicamos cómo puedes aplicar uno de estos con el atributo android:interpolator
:
...
Interpoladores personalizados
Si los interpoladores que proporciona la plataforma no te satisfacen, puedes crear un recurso de interpolador personalizado con atributos modificados.
Por ejemplo, puedes ajustar la tasa de aceleración del AnticipateInterpolator
o ajustar la cantidad de ciclos del CycleInterpolator
. Para hacerlo, crea tu propio recurso de interpolador en un archivo en formato XML.
- ubicación del archivo:
res/anim/filename.xml
Se utiliza el nombre del archivo como ID de recurso.
- tipo de datos de recursos compilados:
- Puntero del recurso en el objeto interpolador correspondiente
- referencia del recurso:
-
En XML:
@[package:]anim/filename
- sintaxis:
-
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
android:attribute_name="value"
/>
Si no aplicas ningún atributo, tu interpolador funcionará exactamente igual a como lo hacen los que proporciona la plataforma y que se enumeran en la tabla anterior.
- elementos:
- Observa que cada implementación de
Interpolator
, cuando se define en XML, tiene un nombre que comienza con una letra minúscula.
- La tasa de cambio comienza y finaliza lentamente, pero se acelera en la mitad.
Sin atributos.
- La tasa de cambio comienza lentamente y, luego, se acelera.
Atributos:
android:factor
- Número de punto flotante. Es la tasa de aceleración. El valor predeterminado es 1.
- El cambio comienza hacia atrás y, luego, se lanza hacia adelante.
Atributos:
android:tension
- Número de punto flotante. Es la tensión que se debe aplicar. El valor predeterminado es 2.
- El cambio comienza hacia atrás, se lanza hacia adelante, supera el valor objetivo y luego se establece en el valor final.
Atributos:
android:tension
- Número de punto flotante. Es la tensión que se debe aplicar. El valor predeterminado es 2.
android:extraTension
- Número de punto flotante. Es la cantidad por la cual multiplicar la tensión. El valor predeterminado es 1.5.
- El cambio rebota en el final.
Sin atributos
- Repite la animación durante una cantidad específica de ciclos. La tasa de cambio sigue un patrón sinusoidal.
Atributos:
android:cycles
- Entero. Es la cantidad de ciclos. El valor predeterminado es 1.
- La tasa de cambio comienza rápidamente y, luego, se desacelera.
Atributos:
android:factor
- Número de punto flotante. Es la tasa de desaceleración. El valor predeterminado es 1.
- La tasa de cambio es constante.
Sin atributos.
- El cambio se lanza hacia adelante, supera el último valor y luego regresa.
Atributos:
android:tension
- Número de punto flotante. Es la tensión que se debe aplicar. El valor predeterminado es 2.
- ejemplo:
-
Archivo en formato XML guardado en res/anim/my_overshoot_interpolator.xml
:
Este XML de la animación aplica el interpolador:
Animación de fotogramas
Se trata de una animación definida en XML que muestra una secuencia de imágenes en orden, como una película.
- ubicación del archivo:
res/drawable/filename.xml
Se utiliza el nombre del archivo como ID de recurso.
- tipo de datos de recursos compilados:
- Puntero del recurso a un
AnimationDrawable
- referencia del recurso:
-
En Java:
R.drawable.filename
En XML: @[package:]drawable.filename
- sintaxis:
-
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource_name"
android:duration="integer" />
- elementos:
-
- Obligatorio. Debe ser el elemento raíz. Contiene uno o más elementos
.
Atributos:
android:oneshot
- Booleano. Es
"true"
si deseas realizar la animación una vez y "false"
si quieres repetir la animación indefinidamente.
- Un solo marco de animación. Tiene que ser un elemento secundario de un elemento
.
Atributos:
android:drawable
- Recurso de elementos de diseño. El elemento de diseño que corresponde usar para este marco.
android:duration
- Entero. El tiempo durante el que se mostrará este marco, en milisegundos.
- ejemplo:
-
Archivo en formato XML guardado en res/drawable/rocket_thrust.xml
:
El siguiente código de la aplicación establece la animación como fondo para una View
y, luego, reproduce la animación:
Java
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource
(R.drawable.rocket_thrust);
rocketAnimation = rocketImage.getBackground()
;
if (rocketAnimation instanceof Animatable
) {
((Animatable)rocketAnimation).start()
;
}
- consulta también:
-