Mover visualização com uma animação

Os objetos na tela geralmente precisam ser reposicionados. Isso pode ocorrer devido à interação do usuário ou a algum processamento realizado nos bastidores. Em vez de atualizar imediatamente a posição dos objetos, o que faria com que piscassem de uma área para outra, você precisa usar uma animação para movê-los da posição inicial para a posição final.

O Android fornece maneiras de reposicionar os objetos de visualização na tela, como o ObjectAnimator. Você pode fornecer a posição final em que quer que o objeto fique, assim como a duração da animação. Você pode combinar isso com 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 fornece uma maneira fácil de alterar 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, você usará os atributos translationX e translationY.

Veja um exemplo de um ObjectAnimator que move a visualização para 100 pixels a partir 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(), já que 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 ser movida horizontalmente, a propriedade translationX é usada. O último parâmetro é o valor final da animação. Como esse valor é 100, haverá muitos pixels à esquerda da tela.

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

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

Para mais informações sobre como usar ObjectAnimator, consulte Animação com ObjectAnimator.

Adicionar movimento curvo

Embora o uso de ObjectAnimator seja conveniente, por padrão, ele reposiciona a visualização usando uma linha reta entre os pontos inicial e final. O Material Design depende de curvas não apenas para o tempo de uma animação, como também para o movimento espacial dos objetos na tela. O uso de movimentos curvos pode ajudar a dar ao app uma sensação mais material e tornar as animações mais interessantes.

Usar o PathInterpolator

A classe PathInterpolator é um novo interpolador introduzido no Android 5.0 (API 21). Ele é baseado em uma curva de Bézier ou um objeto Path. Esse interpolador especifica uma curva de movimento em um quadrado de 1x1, com pontos de fixação em (0,0) e (1,1) e pontos de controle conforme especificado usando os argumentos do construtor. Uma maneira de criar um PathInterpolator é criar um objeto Path e fornecê-lo ao PathInterpolator:

    // arcTo() and PathInterpolator only available on API 21+
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        val path = Path().apply {
            arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
        }
        val pathInterpolator = PathInterpolator(path)
    }

    

    // arcTo() and PathInterpolator only available on API 21+
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      Path path = new Path();
      path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
      PathInterpolator pathInterpolator = new PathInterpolator(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.4"
        android:controlY1="0"
        android:controlX2="1"
        android:controlY2="1"/>
    

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

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

    

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

    

Definir seu próprio caminho

A classe ObjectAnimator tem novos construtores que habilitam 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:

    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:

Se você não quer criar suas próprias curvas de tempo ou caminho, o sistema fornece recursos XML para 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