Mover visualização com animação

Testar o Compose

O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a usar animações no Compose.

Animar posição →

Os objetos na tela geralmente precisam ser reposicionados devido à interação ou do processamento do usuário em segundo plano. Em vez de atualizar imediatamente a posição do objeto, fazendo com que ele pisque de uma área para outra, use uma animação para movê-lo da posição inicial para a final.

Uma maneira de o Android permitir que você reposicione os objetos de visualização na tela é usando ObjectAnimator. Você fornece a posição final em que quer que o objeto se estabeleça, assim como a duração da animação. Você também pode usar interpoladores de tempo para controlar a aceleração ou desaceleração da animação.

Alterar a posição da visualização com o ObjectAnimator

A API ObjectAnimator oferece uma maneira de mudar as propriedades de uma visualização com uma duração especificada. Ela contém métodos estáticos para criar instâncias do ObjectAnimator dependendo do tipo de atributo que você está animando. Ao reposicionar suas visualizações na tela, use os atributos translationX e translationY.

Confira um exemplo de ObjectAnimator que move a visualização para uma posição 100 pixels da esquerda da tela em dois segundos:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

Este exemplo usa o método ObjectAnimator.ofFloat() porque os valores de translação precisam ser flutuantes. O primeiro parâmetro é a visualização que você quer animar. O segundo parâmetro é a propriedade que você está animando. Como a visualização precisa se mover horizontalmente, a propriedade translationX é usada. O último parâmetro é o valor final da animação. Neste exemplo, o valor de 100 indica uma posição com muitos pixels à esquerda da tela.

O próximo método especifica quanto tempo a animação dura, em milissegundos. Nesse exemplo, a animação é executada por 2 segundos (2.000 milissegundos).

O último método faz com que a animação seja executada, o que atualiza a posição da visualização na tela.

Para saber mais sobre o uso de ObjectAnimator, consulte Animar usando o ObjectAnimator.

Adicionar movimento curvo

Embora o uso de ObjectAnimator seja conveniente, por padrão, ele reposiciona a visualização em uma linha reta entre os pontos inicial e final. O Material Design depende de curvas para o movimento espacial de objetos na tela e o tempo de uma animação. O uso de movimentos curvos dá ao app uma sensação mais material e torna as animações mais interessantes.

Definir seu próprio caminho

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

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Veja a aparência da animação em arco:

Figura 1. Animação de caminho curvo.

Um Interpolator é uma implementação de uma curva de transição. Consulte a documentação do Material Design para mais informações sobre o conceito de curvas de transição. Um Interpolator define como valores específicos em uma animação são calculados como uma função do tempo. O sistema fornece recursos XML para as três curvas básicas na especificação do Material Design:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

Usar o PathInterpolator

A classe PathInterpolator é um interpolador introduzido no Android 5.0 (API 21). Ele é baseado em uma curva de Bézier ou em um objeto Path. Os exemplos do Android na documentação do Material Design para easing usam PathInterpolator.

PathInterpolator tem construtores com base em diferentes tipos de curvas de Bézier. Todas as curvas de Bézier têm pontos inicial e final fixados em (0,0) e (1,1), respectivamente. Os outros argumentos do construtor dependem do tipo de curva de Bézier que está sendo criada.

Por exemplo, para uma curva de Bézier quadrática, apenas as coordenadas X e Y de um ponto de controle são necessárias:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Isso produz uma curva de easing que começa rapidamente e desacelera à medida que se aproxima do fim.

O construtor cúbico de Bézier também tem pontos de início e fim fixos, mas requer dois pontos de controle:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Esta é uma implementação da curva de transição ênfase de desaceleração do Material Design.

Para ter mais controle, um Path arbitrário pode ser usado para definir a curva:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

Isso produz a mesma curva de easing que o exemplo cúbico de Bézier, mas usa um Path.

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.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

Depois de criar um objeto PathInterpolator, você pode transmiti-lo para o método Animator.setInterpolator(). O Animator usa o interpolador para determinar o tempo ou a curva do caminho quando é iniciado.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();