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 interpolaciones: Crea una animación mediante una serie de transformaciones en una sola imagen con un
Animation
. - Animación de marcos: Crea una animación mediante una secuencia de imágenes en orden con un
AnimationDrawable
.
- Animación de interpolaciones: Crea una animación mediante una serie de transformaciones en una sola imagen con un
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 utilizará el nombre de archivo como ID de recurso.- tipo de datos de recursos compilados:
- Puntero del recurso en un
ValueAnimator
,ObjectAnimator
oAnimatorSet
. - 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> ... </set> </set>
El archivo debe tener un único elemento raíz:
<set>
,<objectAnimator>
o<valueAnimator>
. Puedes agrupar elementos de animación dentro del elemento<set>
, incluidos otros elementos<set>
. - elementos:
- ejemplo:
-
Archivo en formato XML guardado en res/animator/property_animator.xml
:<set android:ordering="sequentially"> <set> <objectAnimator android:propertyName="x" android:duration="500" android:valueTo="400" android:valueType="intType"/> <objectAnimator android:propertyName="y" android:duration="500" android:valueTo="300" android:valueType="intType"/> </set> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="1f"/> </set>
A fin de ejecutar esta animación, tienes que aumentar los recursos XML en tu código para un objeto
AnimatorSet
y, luego, establecer los objetos de destino para todas las animaciones antes de comenzar el conjunto de animación. Llamar asetTarget()
establece un único objeto de destino para todos los elementos secundarios delAnimatorSet
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 propiedades
- Demostraciones de API para ver ejemplos sobre cómo usar el sistema de animación de propiedades
Animación de vistas
El framework para la animación de vistas admite tanto animaciones de interpolación como por fotograma, y ambas se pueden declarar 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, como rotación, atenuación, movimiento y estiramiento en un gráfico.
- ubicación del archivo:
res/anim/filename.xml
Se utilizará el nombre de archivo como ID de recurso.- tipo de datos de recursos compilados:
- Puntero del recurso en un
Animation
. - referencia del recurso:
-
En Java:
R.anim.filename
En XML:@[package:]anim/filename
- sintaxis:
-
<?xml version="1.0" encoding="utf-8"?> <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> ... </set> </set>
El archivo debe tener un único elemento raíz: un elemento
<alpha>
,<scale>
,<translate>
,<rotate>
o<set>
que contenga un grupo (o grupos) de otros elementos de animación (incluso elementos<set>
anidados). - elementos:
- ejemplo:
-
Archivo en formato XML guardado en res/anim/hyperspace_jump.xml
:<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="1.4" android:fromYScale="1.0" android:toYScale="0.6" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" /> <set android:interpolator="@android:anim/accelerate_interpolator" android:startOffset="700"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> </set> </set>
Este código de la aplicación aplicará la animación a un
ImageView
y comenzará 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 velocidad 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 clases secundarias de la clase Interpolator
. Para cada clase de interpolador, Android incluye un recurso público al que puedes hacer referencia a fin de aplicar el interpolador a una animación mediante un atributo android:interpolator
.
En la siguiente tabla, se especifica el recurso que corresponde usar para cada interpolador:
Clase de interpolador | ID del recurso |
---|---|
AccelerateDecelerateInterpolator |
@android:anim/accelerate_decelerate_interpolator |
AccelerateInterpolator |
@android:anim/accelerate_interpolator |
AnticipateInterpolator |
@android:anim/anticipate_interpolator |
AnticipateOvershootInterpolator |
@android:anim/anticipate_overshoot_interpolator |
BounceInterpolator |
@android:anim/bounce_interpolator |
CycleInterpolator |
@android:anim/cycle_interpolator |
DecelerateInterpolator |
@android:anim/decelerate_interpolator |
LinearInterpolator |
@android:anim/linear_interpolator |
OvershootInterpolator |
@android:anim/overshoot_interpolator |
Aquí te indicamos cómo puedes aplicar uno de estos con el atributo android:interpolator
:
<set android:interpolator="@android:anim/accelerate_interpolator"> ... </set>
Interpoladores personalizados
Si no estás satisfecho con los interpoladores que proporciona la plataforma (enumerados en la tabla anterior), puedes crear un recurso de interpolador personalizado con atributos modificados.
Por ejemplo, puedes ajustar la velocidad de aceleración del AnticipateInterpolator
o ajustar la cantidad de ciclos para el CycleInterpolator
. Para hacerlo, tienes que crear tu propio recurso de interpolador en un archivo en formato XML.
- ubicación del archivo:
res/anim/filename.xml
Se utilizará el nombre de 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:
-
<?xml version="1.0" encoding="utf-8"?> <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 (enumerados en la tabla anterior).
- elementos:
- Observa que el nombre de cada implementación de
Interpolator
, cuando se define en XML, comienza en minúscula. - ejemplo:
-
Archivo en formato XML guardado en
res/anim/my_overshoot_interpolator.xml
:<?xml version="1.0" encoding="utf-8"?> <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:tension="7.0" />
Este XML de la animación aplicará el interpolador:
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/my_overshoot_interpolator" android:fromXScale="1.0" android:toXScale="3.0" android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%" android:pivotY="50%" android:duration="700" />
Animación de marcos
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 utilizará el nombre de archivo como ID de recurso.- tipo de datos de recursos compilados:
- Puntero del recurso en un
AnimationDrawable
. - referencia del recurso:
-
En Java:
R.drawable.filename
En XML:@[package:]drawable.filename
- sintaxis:
-
<?xml version="1.0" encoding="utf-8"?> <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" /> </animation-list>
- elementos:
- ejemplo:
-
- Archivo en formato XML guardado en
res/drawable/rocket_thrust.xml
: -
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>
- Este código de la aplicación establecerá la animación en segundo plano para un elemento View y luego reproducirá la animación:
-
Kotlin
val rocketImage: ImageView = findViewById(R.id.rocket_image) rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust) val rocketAnimation = rocketImage.background
if (rocketAnimation isAnimatable
) { rocketAnimation.start()
}Java
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust); rocketAnimation = rocketImage.getBackground()
; if (rocketAnimation instanceofAnimatable
) { ((Animatable)rocketAnimation).start()
; }
- Archivo en formato XML guardado en
- consulta también: