Recursos de animação

Um recurso de animação pode definir um dos dois tipos de animações:

Cria uma animação ao modificar os valores de propriedade de um objeto em um período definido com um Animator.

Você pode fazer dois tipos de animação com o framework para animação de visualizações:

Animação de interpolação: cria uma animação realizando uma série de transformações em uma única imagem com um Animation
Animação de frame: cria uma animação ao mostrar uma sequência de imagens em ordem com um AnimationDrawable.

Animação de propriedade

Uma animação definida em XML que modifica propriedades do objeto de destino, como cor de fundo ou valor Alfa, por um período definido.

local do arquivo:

res/animator/filename.xml
O nome do arquivo será usado como o ID do recurso.

tipo de dado de recurso compilado:

Ponteiro de recurso para um ValueAnimator, ObjectAnimator ou AnimatorSet.

referência de recurso:

Em código Kotlin ou baseado em Java: R.animator.filename
Em XML: @[package:]animator/filename

sintaxe:

    <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>

O arquivo precisa ter um único elemento raiz: <set>, <objectAnimator> ou <valueAnimator>. Você pode agrupar elementos de animação dentro do elemento <set>, incluindo outros elementos <set>.

elementos:

<set>

Um contêiner que tem outros elementos de animação (<objectAnimator>, <valueAnimator> ou outros elementos <set>). Representa um AnimatorSet.

Você pode especificar tags <set> aninhadas para agrupar melhor as animações. Cada <set> pode definir o próprio ordering atributo.

atributos:

android:ordering

Palavra-chave. Especifica a ordem de reprodução de animações nesse conjunto.

Valor	Descrição
`sequentially`	Abrir animações do conjunto em sequência
`together` (padrão)	Abrir animações do conjunto ao mesmo tempo.

<objectAnimator>

Anima uma propriedade específica de um objeto por um período específico. Representa um ObjectAnimator.

atributos:

android:propertyName

String. Obrigatório. A propriedade do objeto que será animada, chamada pelo nome. Você pode especificar "alpha" ou "backgroundColor" para um objeto de visualização. No entanto, o elemento objectAnimator não expõe um atributo target, então não é possível definir o objeto que será animado na declaração em XML. Você precisa inflar seu recurso de animação em XML chamando loadAnimator() e chamar setTarget() para definir o objeto de destino que contém a propriedade.

android:valueTo

flutuante, int ou cor. Obrigatório. O valor em que a propriedade animada termina. As cores são representadas como números hexadecimais de seis dígitos (por exemplo, #333333).

android:valueFrom

flutuante, int ou cor. O valor em que a propriedade animada se inicia. Se não for especificado, a animação começará no valor conseguido pelo método get da propriedade. As cores são representadas como números hexadecimais de seis dígitos (por exemplo, #333333).

android:duration

int. O tempo em milissegundos da animação. O padrão é de 300 milissegundos.

android:startOffset

int. O atraso da animação em milissegundos depois que start() é chamado.

android:repeatCount

int. Quantas vezes uma animação é repetida. Defina como "-1" para repetir infinitamente ou como um número inteiro positivo. Por exemplo, um valor de "1" significa que a animação será repetida uma vez após a execução inicial, de modo que ela será reproduzida duas vezes no total. O valor padrão é "0", o que significa que não há repetição.

android:repeatMode

int. Como uma animação se comporta quando chega ao final. Para que esse atributo tenha efeito, android:repeatCount precisa ser definido como um número inteiro positivo ou "-1". Defina como "reverse" para que a animação inverta a direção a cada iteração ou como "repeat" para fazer com que a animação comece sempre do início.

android:valueType

Palavra-chave. Não especifique esse atributo se o valor for uma cor. O framework da animação gerencia automaticamente os valores de cor

Valor	Descrição
`intType`	Especifica que os valores animados são inteiros
`floatType` (padrão)	Especifica que os valores animados são flutuantes

<animator>

Executa uma animação por um determinado período. Representa um ValueAnimator.

atributos:

android:valueTo

flutuante, int ou cor. Obrigatório. O valor em que a animação termina. As cores são representadas como números hexadecimais de seis dígitos (por exemplo, #333333).

android:valueFrom

flutuante, int ou cor. Obrigatório. O valor em que a animação se inicia. As cores são representadas como números hexadecimais de seis dígitos (por exemplo, #333333).

android:duration

int. O tempo em milissegundos da animação. O padrão é de 300 ms.

android:startOffset

int. O atraso da animação em milissegundos depois que start() é chamado.

android:repeatCount

android:repeatMode

android:valueType

Palavra-chave. Não especifique esse atributo se o valor for uma cor. O framework da animação gerencia automaticamente valores de cor.

Valor	Descrição
`intType`	Especifica que os valores animados são inteiros
`floatType` (padrão)	Especifica que os valores animados são flutuantes

exemplo:

Arquivo XML salvo em 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 executar essa animação, é preciso inflar os recursos XML no código para um objeto AnimatorSet e definir os objetos de destino para todas as animações antes de iniciar o conjunto. Por conveniência, a chamada de setTarget() define um único objeto de destino para todos os filhos de AnimatorSet. O código a seguir mostra como fazer isso:

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();

veja também:

Animação de propriedade
Demonstrações de API para exemplos de como usar o sistema de animação de propriedade.

Animação de visualizações

O framework para animação de visualizações é compatível com animações de interpolação e frame a frame, que podem ser declaradas em XML. As seções a seguir descrevem como usar os dois métodos.

Animação de interpolação

Uma animação definida em XML que realiza transições, como rotação, esmaecimento, movimentação e alongamento em um gráfico.

local do arquivo:

res/anim/filename.xml
O nome do arquivo será usado como o ID do recurso.

tipo de dado de recurso compilado:

Ponteiro de recurso para um Animation.

referência de recurso:

Em Java: R.anim.filename
Em XML: @[package:]anim/filename

sintaxe:

    <?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>

O arquivo precisa ter um único elemento raiz: um elemento <alpha>, <scale>, <translate>, <rotate> ou <set> que contenha um grupo (ou grupos) de outros elementos de animação (até mesmo elementos <set> aninhados).

elementos:

<set>

Um contêiner com outros elementos de animação (<alpha>, <scale>, <translate>, <rotate>) ou outros elementos <set>. Representa um AnimationSet.

atributos:

android:interpolator: Recurso de interpolação. Um Interpolator para aplicar na animação. O valor precisa ser uma referência a um recurso que especifique um interpolador (não um nome de classe de interpolador). Há recursos de interpolação padrão disponíveis na plataforma. Você também pode criar seu próprio recurso de interpolação. Veja a discussão abaixo para saber mais sobre Interpoladores.
android:shareInterpolator: Booleano. "verdadeiro" se você quiser compartilhar o mesmo interpolador entre todos os elementos filho.

<alpha>

Uma animação de fade-in ou fade-out. Representa um AlphaAnimation.

atributos:

android:fromAlpha: Flutuante. Compensação de opacidade inicial, em que 0.0 é transparente e 1.0 é opaco.
android:toAlpha: Flutuante. Compensação de opacidade final, em que 0.0 é transparente e 1.0 é opaco.

Para ver mais atributos compatíveis com <alpha>, consulte a referência da classe Animation. Todos os atributos XML são herdados por esse elemento.

<scale>

Uma animação de redimensionamento. Ao especificar pivotX e pivotY, você define o ponto central da imagem a partir do qual ela será aumentada ou diminuída. Por exemplo, se esses valores forem 0, 0 (canto superior esquerdo), todo o crescimento será para baixo e para a direita. Representa um ScaleAnimation.

atributos:

android:fromXScale: Flutuante. Compensação de tamanho X inicial, em que 1.0 representa nenhuma mudança.
android:toXScale: Flutuante. Compensação de tamanho X final, em que 1.0 representa nenhuma mudança.
android:fromYScale: Flutuante. Compensação de tamanho Y inicial, em que 1.0 representa nenhuma mudança.
android:toYScale: Flutuante. Compensação de tamanho Y final, em que 1.0 representa nenhuma mudança.
android:pivotX: Flutuante. A coordenada X permanecerá fixa quando o objeto for dimensionado.
android:pivotY: Flutuante. A coordenada Y permanecerá fixa quando o objeto for dimensionado.

Para ver mais atributos compatíveis com <scale>, consulte a referência da classe Animation. Todos os atributos XML são herdados por esse elemento.

<translate>

Um movimento vertical e/ou horizontal. Compatível com os seguintes atributos em qualquer um dos três formatos a seguir: valores de -100 a 100 terminados em "%", indicando uma porcentagem relativa a si mesma; valores de -100 a 100 terminados em "%p", indicando uma porcentagem relativa ao pai; um valor flutuante sem sufixo, indicando um valor absoluto. Representa um TranslateAnimation.

atributos:

android:fromXDelta: Flutuante ou porcentagem. Compensação de X inicial. Expressa: em pixels relativos à posição normal (como "5"), em porcentagem relativa à largura do elemento (como "5%") ou em porcentagem relativa à largura do pai (como "5%p").
android:toXDelta: Flutuante ou porcentagem. Compensação de X final. Expressa: em pixels relativos à posição normal (como "5"), em porcentagem relativa à largura do elemento (como "5%") ou em porcentagem relativa à largura do pai (como "5%p").
android:fromYDelta: Flutuante ou porcentagem. Compensação de Y inicial. Expressa: em pixels relativos à posição normal (como "5"), em porcentagem relativa à altura do elemento (como "5%") ou em porcentagem relativa à altura do pai (como "5%p").
android:toYDelta: Flutuante ou porcentagem. Compensação de Y final. Expressa: em pixels relativos à posição normal (como "5"), em porcentagem relativa à altura do elemento (como "5%") ou em porcentagem relativa à altura do pai (como "5%p").

Para ver mais atributos compatíveis com <translate>, consulte a referência da classe Animation. Todos os atributos XML são herdados por esse elemento.

<rotate>

Uma animação de rotação. Representa um RotateAnimation.

atributos:

android:fromDegrees: Flutuante. Posição angular inicial, em graus.
android:toDegrees: Flutuante. Posição angular final, em graus.
android:pivotX: Flutuante ou porcentagem. A coordenada X do centro de rotação. Expressa: em pixels relativos à borda esquerda do objeto (como "5"), em porcentagem relativa à borda esquerda do objeto (como "5%") ou em porcentagem relativa à borda esquerda do contêiner pai (como "5%p").
android:pivotY: Flutuante ou porcentagem. A coordenada Y do centro de rotação. Expressa: em pixels relativos à borda superior do objeto (como "5"), em porcentagem relativa à borda superior do objeto (como "5%") ou em porcentagem relativa à borda superior do contêiner pai (como "5%p").

Para ver mais atributos compatíveis com <rotate>, consulte a referência da classe Animation. Todos os atributos XML são herdados por esse elemento.

exemplo:

Arquivo XML salvo em 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>

Esse código do aplicativo aplicará a animação a um ImageView e a iniciará:

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);

veja também:

Gráficos 2D: animação de interpolação

Interpoladores

Um interpolador é um modificador de animação definido em XML que afeta a taxa de mudança em uma animação. Isso permite que os efeitos de animação existentes sejam acelerados, desacelerados, repetidos, oscilados etc.

Um interpolador é aplicado a um elemento de animação com o atributo android:interpolator, cujo valor é uma referência a um recurso de interpolação.

Todos os interpoladores disponíveis no Android são subclasses da classe Interpolator. Para cada classe de interpolador, o Android inclui um recurso público que pode ser referenciado para aplicar o interpolador a uma animação com o atributo android:interpolator. A tabela a seguir especifica o recurso que será usado para cada interpolador:

Classe do interpolador	ID do 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`

Veja como você pode aplicar um desses com o atributo android:interpolator:

    <set android:interpolator="@android:anim/accelerate_interpolator">
        ...
    </set>

Interpoladores personalizados

Se os interpoladores fornecidos pela plataforma (listados na tabela acima) não forem satisfatórios, você poderá criar um recurso de interpolação personalizado com atributos modificados. Por exemplo, você pode ajustar a taxa de aceleração para o AnticipateInterpolator ou ajustar o número de ciclos para o CycleInterpolator. Para fazer isso, crie seu próprio recurso de interpolação em um arquivo XML.

local do arquivo:

res/anim/filename.xml
O nome do arquivo será usado como o ID do recurso.

tipo de dado de recurso compilado:

Ponteiro de recurso para o objeto interpolador correspondente.

referência de recurso:

Em XML: @[package:]anim/filename

sintaxe:

    <?xml version="1.0" encoding="utf-8"?>
    <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
        android:attribute_name="value"
        />

Se você não aplicar nenhum atributo, seu interpolador funcionará exatamente da mesma forma que os fornecidos pela plataforma (listados na tabela acima).

elementos:

Observe que cada implementação de Interpolator, quando definida em XML, tem o nome iniciado por letras minúsculas.

exemplo:

Arquivo XML salvo em 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 animação aplicará o 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" />

Animação de frame

Uma animação definida em XML que mostra uma sequência de imagens em ordem (como um filme).

local do arquivo:

res/drawable/filename.xml
O nome do arquivo será usado como o ID do recurso.

tipo de dado de recurso compilado:

Ponteiro de recurso para um AnimationDrawable.

referência de recurso:

Em Java: R.drawable.filename
Em XML: @[package:]drawable.filename

sintaxe:

    <?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:

exemplo:

Arquivo XML salvo em 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 do aplicativo definirá a animação como o segundo plano de uma visualização. Depois disso, ele abrirá a animação:

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();
    }

veja também:

Gráficos 2D: animação de frame

Visão geral

Lista de estados de cores