Pular para o conteúdo

Mais visitados

Visitados recentemente

navigation

Como definir animações personalizadas

As animações no Material Design dão feedback aos usuários sobre as ações deles e fornecem continuidade visual à medida que interagem com o seu aplicativo. O tema do Material fornece algumas animações padrão para botões e transições de atividades e o Android 5.0 (API de nível 21) e posteriores permitem a personalização dessas animações e a criação de novas:

Personalizar feedback de toque

Os feedbacks de toque no Material Design fornecem confirmação visual instantânea no ponto de contato quando os usuários interagem com elementos da interface do usuário. As animações de feedback de toque padrão para botões usam a nova classe RippleDrawable, que passa por transições entre diferentes estados com um efeito de ondulação.

Na maioria dos casos, você deve aplicar essa funcionalidade no XML de visualização especificando o segundo plano da visualização como:

Observação: selectableItemBackgroundBorderless é um novo atributo introduzido na API de nível 21.

Alternativamente, você pode definir um RippleDrawable como um recurso XML usando o elemento ripple.

Você pode atribuir uma cor para objetos RippleDrawable. Para alterar a cor do feedback de toque padrão, use o atributo android:colorControlHighlight do tema.

Para obter mais informações, consulte a referência de API para a classe RippleDrawable.

Usar o efeito de revelação

Revelar animações fornece continuidade visual aos usuários ao exibir ou esconder um grupo de elementos da interface do usuário. O método ViewAnimationUtils.createCircularReveal() permite animar um círculo de recorte para revelar ou ocultar uma visualização.

Para revelar uma visualização anteriormente invisível usando esse efeito:

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());

// create the animator for this view (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();

Para esconder uma visualização anteriormente visível usando esse efeito:

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();

// create the animation (the final radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();

Personalizar transições de atividades

Figura 1 - uma transição com elementos compartilhados.

Para reproduzir o filme, clique na tela do dispositivo

As transições de atividades em aplicativos com Material Design fornecem conexões visuais entre estados diferentes por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para transições de entrada e de saída e para transições de elementos compartilhados entre atividades.

O Android 5.0 (API de nível 21) é compatível com estas transições de entrada e de saída:

Qualquer transição que amplie a classe Visibility é suportada como uma transição de entrada ou de saída. Para obter mais informações, consulte a referência de API para a classe Transition.

O Android 5.0 (API de nível 21) também é compatível com estas transições de elementos compartilhados:

Ao habilitar as transições de atividades no seu aplicativo, a transição de esmaecimento cruzado padrão é ativada entre as atividades de entrada e saída.

  Figura 2 - uma transição de cena com um elemento compartilhado.

Especificar transições de atividades

Primeiro, habilite as transições de conteúdo da janela com o atributo android:windowContentTransitions ao definir um estilo herdado do tema do Material. Você também pode especificar transições de entrada, saída e elemento compartilhado na definição de estilo:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

A transição change_image_transform nesse exemplo é definida a seguir:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

O elemento changeImageTransform corresponde à classe ChangeImageTransform. Para obter mais informações, consulte a referência de API para Transition.

Para habilitar transições de conteúdo da janela no código como alternativa, chame o método Window.requestFeature():

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

Para especificar transições no código, chame os métodos a seguir com um objeto Transition:

Os métodos setExitTransition() e setSharedElementExitTransition() definem a transição de saída para a atividade de chamada. Os métodos setEnterTransition() e setSharedElementEnterTransition() definem a transição de entrada para a atividade chamada.

Para obter o efeito completo de uma transição, você deve habilitar as transições de conteúdo da janela tanto na atividade chamada quanto na atividade de chamada. Caso contrário, a atividade de chamada acionará a transição de saída, mas você verá uma transição de janela (como dimensionamento ou esmaecimento).

Para iniciar uma transição de entrada o mais cedo possível, use o método Window.setAllowEnterTransitionOverlap() na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.

Iniciar uma atividade usando transições

Se você habilita as transições e define uma transição de saída para uma atividade, a transição será ativada ao iniciar outra atividade, como a seguir:

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Se você configurou uma transição de entrada para a segunda atividade, a transição também será ativada quando a atividade for iniciada. Para desabilitar as transições ao iniciar outra atividade, forneça um pacote de opções null.

Iniciar uma atividade com um elemento compartilhado

Para criar uma animação de transição de tela entre duas atividades que têm um elemento compartilhado:

  1. Habilite transições de conteúdo da janela no tema.
  2. Especifique uma transição de elementos compartilhados no estilo.
  3. Defina a transição como um recurso XML.
  4. Atribua um nome comum aos elementos compartilhados em ambos os layouts com o atributo android:transitionName.
  5. Use o método ActivityOptions.makeSceneTransitionAnimation().
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

Para obter visualizações dinâmicas compartilhadas geradas no código, use o método View.setTransitionName() para especificar um nome de elemento comum em ambas as atividades.

Para reverter a animação de transição de cena ao finalizar a segunda atividade, chame o método Activity.finishAfterTransition() em vez de Activity.finish().

Iniciar uma atividade com diversos elementos compartilhados

Para criar uma animação de transição de cena entre duas atividades que têm mais de um elemento compartilhado, defina os elementos compartilhados em ambos os layouts com o atributo android:transitionName (ou use o método View.setTransitionName() em ambas as atividades) e crie um objeto ActivityOptions, como a seguir:

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Usar movimento curvado

As animações no Material Design dependem das curvas para obter padrões de interpolação de tempo e de movimentos espaciais. Com o Android 5.0 (API de nível 21) e posteriores, você pode definir padrões de curvas de temporização personalizada e de movimentos curvados para animações.

A classe PathInterpolator é um novo interpolador baseado em uma curva Bézier ou em um objeto Path. Esse interpolador especifica uma curva de movimento em um quadrado de 1x1, com pontos de ancoragem em (0,0) e (1,1) e pontos de controle conforme especificado usando os argumentos do construtor. Você também pode definir um interpolador de caminho como um recurso XML:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

O sistema fornece recursos XML para três curvas básicas na especificação do Material Design:

Você pode passar um objeto PathInterpolator para o método Animator.setInterpolator().

A classe ObjectAnimator tem novos construtores que permitem a animação de coordenadas ao longo de um caminho usando duas ou mais propriedades simultaneamente. Por exemplo, o animador a seguir usa um objeto Path para animar as propriedades X e Y de uma visualização:

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

Animar mudança de estado da visualização

A classe StateListAnimator permite a definição de animadores que são executados quando o estado de uma visualização muda. O exemplo a seguir mostra como definir um StateListAnimator como um recurso XML:

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

Para anexar animações de estado de visualização personalizadas a uma visualização, defina um animador usando o elemento selector em um arquivo de recurso XML, como nesse exemplo, e atribua-o à visualização com o atributo android:stateListAnimator. Para atribuir um animador de lista de estado a uma visualização no código, use o método AnimationInflater.loadStateListAnimator() e atribua o animador à visualização com o método View.setStateListAnimator().

Quando o tema amplia o tema do Material, os botões têm uma animação Z por padrão. Para evitar esse comportamento nos botões, defina o atributo android:stateListAnimator como @null.

A classe AnimatedStateListDrawable permite a criação de desenháveis que exibem animações entre mudanças de estado da visualização associada. Alguns dos widgets de sistema no Android 5.0 usam essas animações por padrão. O exemplo a seguir mostra como definir um AnimatedStateListDrawable como um recurso XML:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Animar desenháveis de vetor

Desenháveis de vetor são dimensionáveis sem perder definição. A classe AnimatedVectorDrawable permite a animação de propriedades de um desenhável de vetor.

Você normalmente define desenháveis de vetor animados em três arquivos XML:

Desenháveis de vetor animados podem animar os atributos dos elementos <group> e <path>. Os elementos <group> definem um conjunto de caminhos ou subgrupos e o elemento <path> define caminhos a serem desenhados.

Ao definir um desenhável de vetor que você queira animar, use o atributo android:name para atribuir um nome único a grupos e caminhos para poder referenciá-los nas definições do animador. Por exemplo:

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

A definição de desenhável de vetor animado se refere a grupos e caminhos no desenhável de vetor pelos respectivos nomes:

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

As definições de animação representam objetos ObjectAnimator ou AnimatorSet. O primeiro animador nesse exemplo gira o grupo desejado em 360º:

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

O segundo animador nesse exemplo transforma a forma do caminho do desenhável de vetor. Ambos os caminhos devem ser compatíveis com a transformação: eles precisam ter o mesmo número de comandos e de parâmetros para cada comando.

<!-- res/anim/path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Para obter mais informações, consulte a referência de API para AnimatedVectorDrawable.

Este site usa cookies para armazenar suas preferências quanto às opções de idioma e exibição específicas ao site.

Receba as dicas e notícias mais recentes para desenvolvedores Android que ajudarão você a ter sucesso no Google Play.

* Campos obrigatórios

Uhu!

Siga o Google Developers no WeChat

Navegar neste site em ?

Você solicitou uma página em , mas sua preferência de idioma para este site está definida como .

Quer alterar sua preferência de idioma e navegar neste site em ? Para alterar a preferência de idioma depois, use o menu de idiomas na parte inferior de cada página.

É preciso ter o nível de API ou superior para esta aula

Este documento está oculto porque o nível de API selecionado para a documentação é o . Para alterar o nível, clique no seletor acima da barra de navegação esquerda.

Para mais informações sobre como especificar o nível de API que o seu app precisa, leia o artigo Compatibilidade com diferentes versões de plataforma.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)