Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Recursos de animación

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 marco de trabajo 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
El nombre del archivo se usará como el ID del 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=["repeat" | "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=["repeat" | "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:
<set>
Un contenedor que contiene otros elementos de animación (<objectAnimator>, <valueAnimator> o algún otro elemento <set>). Representa un AnimatorSet.

Puedes especificar etiquetas de <set> anidadas para agrupar más animaciones. Cada <set> puede definir su propio atributo de ordering.

atributos:

android:ordering
Palabra clave. Especifica el orden de reproducción de las animaciones en este conjunto.
ValorDescripción
sequentiallyReproduce animaciones en este conjunto de manera secuencial
together (predeterminado)Reproduce animaciones en este conjunto al mismo tiempo.
<objectAnimator>
Anima una propiedad específica de un objeto durante un lapso específico. Representa un ObjectAnimator.

atributos:

android:propertyName
String. Obligatorio. 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 de vista. Sin embargo, el elemento objectAnimator no expone un atributo target, por lo que no puedes configurar el objeto de la animación en la declaración en XML. Para inflar 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. El valor donde termina la propiedad animada. Los colores se representan como números hexadecimales de seis dígitos (por ejemplo, #333333).
android:valueFrom
flotante, int o color. 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 (por ejemplo, #333333).
android:duration
int. El tiempo en milisegundos de la animación. 300 milisegundos es el valor predeterminado.
android:startOffset
int. La cantidad de milisegundos que la animación tarda después de que se la invoca start().
android:repeatCount
int. Cuántas veces repetir una animación. Se establece en "-1" para 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" para que la animación revierta la dirección con cada iteración o configúralo en "repeat" 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 marco de animación maneja los valores de color de manera automática
ValorDescripción
intTypeEspecifica que los valores animados son números enteros
floatType (predeterminado)Especifica que los valores animados son flotantes
<animator>
Ejecuta una animación durante un lapso especificado. Representa un ValueAnimator.

atributos:

android:valueTo
flotante, int o color. Obligatorio. El valor donde finaliza la animación. Los colores se representan como números hexadecimales de seis dígitos (por ejemplo, #333333).
android:valueFrom
flotante, int o color. Obligatorio. El valor donde comienza la animación. Los colores se representan como números hexadecimales de seis dígitos (por ejemplo, #333333).
android:duration
int. 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" para 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" para que la animación revierta la dirección con cada iteración o configúralo en "repeat" 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 marco de animación maneja los valores de color de manera automática.
ValorDescripción
intTypeEspecifica que los valores animados son números enteros
floatType (predeterminado)Especifica que los valores animados son flotantes
ejemplo:
Archivo 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 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 marco de trabajo 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
El nombre del archivo se usará como el ID del 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:
<set>
Un contenedor que contiene otros elementos de animación (<alpha>, <scale>, <translate>, <rotate>) u otros elementos <set>. Representa un AnimationSet.

atributos:

android:interpolator
Recurso de interpolador. 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 debate a continuación para obtener más información sobre Interpoladores.
android:shareInterpolator
Booleano. Valor “true” si quieres compartir el mismo interpolador entre todos los elementos secundarios.
<alpha>
Una animación de atenuación de entrada o de salida. Representa un AlphaAnimation.

atributos:

android:fromAlpha
Flotante. Compensación de opacidad inicial, donde 0.0 es transparente y 1.0 es opaco.
android:toAlpha
Flotante. Compensación de opacidad final, donde 0.0 es transparente y 1.0 es opaco.

Para conocer más atributos compatibles con <alpha>, consulta la referencia de clase Animation (este elemento hereda todos los atributos XML de dicha referencia).

<scale>
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 (esquina superior izquierda), toda la expansión será hacia abajo y hacia la derecha. Representa un ScaleAnimation.

atributos:

android:fromXScale
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. La coordenada Y permanece fija cuando el objeto se escala.

Para conocer más atributos compatibles con <scale>, consulta la referencia de clase Animation (este elemento hereda todos los atributos XML de dicha referencia).

<translate>
Un movimiento horizontal y/o vertical. Admite los siguientes atributos en cualquiera de los siguientes tres formatos: valores de -100 a 100 que terminan en "%", que indica un porcentaje relativo a sí mismo; valores de -100 a 100 que terminan en "%p", que indica un porcentaje relativo al elemento principal; un valor flotante sin sufijo, que indica un valor absoluto. Representa un TranslateAnimation.

atributos:

android:fromXDelta
Flotante o porcentual. Compensación X inicial. Forma de expresión en píxeles relativos a la posición normal (como "5"), porcentaje relativo al ancho del elemento (como "5%") o porcentaje relativo al ancho principal (como "5%p").
android:toXDelta
Flotante o porcentual. Compensación X final. Forma de expresión en píxeles relativos a la posición normal (como "5"), porcentaje relativo al ancho del elemento (como "5%") o porcentaje relativo al ancho principal (como "5%p").
android:fromYDelta
Flotante o porcentual. Compensación Y inicial. Forma de expresión en píxeles relativos a la posición normal (como "5"), porcentaje relativo a la altura del elemento (como "5%") o porcentaje relativo a la altura principal (como "5%p").
android:toYDelta
Flotante o porcentual. Compensación Y final. Forma de expresión en píxeles relativos a la posición normal (como "5"), porcentaje relativo a la altura del elemento (como "5%") o porcentaje relativo a la altura principal (como "5%p").

Para conocer más atributos compatibles con <translate>, consulta la referencia de clase Animation (este elemento hereda todos los atributos XML de dicha referencia).

<rotate>
Una animación de rotación. Representa un RotateAnimation.

atributos:

android:fromDegrees
Flotante. Posición angular inicial, en grados.
android:toDegrees
Flotante. Posición angular final, en grados.
android:pivotX
Flotante o porcentual. La coordenada X del centro de rotación. Forma de expresión en píxeles relativos al borde izquierdo del objeto (como "5"), porcentaje relativo al borde izquierdo del objeto (como "5%") o porcentaje relativo al borde izquierdo del contenedor principal (como "5%p").
android:pivotY
Flotante o porcentual. La coordenada Y del centro de rotación. Forma de expresión en píxeles relativos al borde superior del objeto (como "5"), porcentaje relativo al borde superior del objeto (como "5%") o porcentaje relativo al borde superior del contenedor principal (como "5%p").

Para conocer más atributos compatibles con <rotate>, consulta la referencia de clase Animation (este elemento hereda todos los atributos XML de dicha referencia).

ejemplo:
archivo 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 interpoladorID 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 XML.

Ubicación del archivo:
res/anim/filename.xml
El nombre del archivo se usará como el ID del recurso.
Tipo de datos de recursos compilados:
Puntero del recurso en el objeto interpolador correspondiente.
Referencia del recurso:
En formato 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.

<accelerateDecelerateInterpolator>
La velocidad de cambio comienza y finaliza lentamente, pero se acelera en la mitad.

Sin atributos.

<accelerateInterpolator>
La velocidad de cambio comienza lentamente y luego se acelera.

atributos:

android:factor
Flotante. La velocidad de aceleración (el valor predeterminado es 1).
<anticipateInterpolator>
El cambio comienza hacia atrás y luego se lanza hacia adelante.

atributos:

android:tension
Flotante. La cantidad de tensión que se aplicará (el valor predeterminado es 2).
<anticipateOvershootInterpolator>
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
Flotante. La cantidad de tensión que se aplicará (el valor predeterminado es 2).
android:extraTension
Flotante. La cantidad por la cual multiplicar la tensión (el valor predeterminado es 1.5).
<bounceInterpolator>
El cambio rebota en el final.

Sin atributos

<cycleInterpolator>
Repite la animación durante una cantidad específica de ciclos. La velocidad de cambio sigue un patrón sinusoidal.

atributos:

android:cycles
Número entero. La cantidad de ciclos (el valor predeterminado es 1).
<decelerateInterpolator>
La velocidad de cambio comienza rápidamente y luego se desacelera.

atributos:

android:factor
Flotante. La velocidad de desaceleración (el valor predeterminado es 1).
<linearInterpolator>
La velocidad de cambio es constante.

Sin atributos.

<overshootInterpolator>
El cambio se lanza hacia adelante, supera el último valor y luego regresa.

atributos:

android:tension
Flotante. La cantidad de tensión que se aplicará (el valor predeterminado es 2).
ejemplo:

Archivo 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
El nombre del archivo se usará como el ID del 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:
<animation-list>
Obligatorio. Este debe ser el elemento raíz. Contiene uno o más elementos <item>.

atributos:

android:oneshot
Booleano. Valor "true" si quieres realizar la animación una vez; "false" para repetir la animación indefinidamente.
<item>
Un solo marco de animación. Tiene que ser un elemento secundario de un elemento <animation-list>.

atributos:

android:drawable
Recurso de elemento de diseño. El elemento de diseño que corresponde usar para este marco.
android:duration
Número entero. El tiempo durante el que se mostrará este marco, en milisegundos.
ejemplo:
Archivo XML guardado en res/drawable/rocket.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 una vista 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 is Animatable) {
        rocketAnimation.start()
    }

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: