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 interpolación: Crea una animación mediante una serie de transformaciones en una sola imagen con una
Animation
. - Animación de marcos: Crea una animación mediante una secuencia de imágenes en orden con un
AnimationDrawable
.
- Animación de interpolación: Crea una animación mediante una serie de transformaciones en una sola imagen con una
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
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>
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 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:
-
- Descripción general de la animación de propiedades
- Demostraciones de API para ver ejemplos de uso del 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 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:
-
<?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>
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:
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 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:
-
<?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 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. - 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 aplica 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 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:
-
<?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>
El siguiente código de la aplicación establece la animación como fondo para una
View
y, luego, reproduce 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()
; } - consulta también: