Mover visualização com animação

Objetos na tela geralmente precisam ser reposicionados devido à interação do usuário ou processamento em segundo plano. Em vez de atualizar imediatamente o estado o que faz com que ele pisque de uma área para outra, use uma animação para mover da posição inicial para a posição final.

O Android permite reposicionar os objetos de visualização na tela usando usando ObjectAnimator. Você define a posição final que o objeto se encaixe, bem como a duração da animação. Você pode também usam interpoladores de tempo para controlar a aceleração ou desaceleração da animação.

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

O ObjectAnimator A API fornece uma maneira de mudar as propriedades de uma visualização com uma duração específica. Ela contém métodos estáticos para criar instâncias de ObjectAnimator, dependendo da e o tipo de atributo que você está animando. Ao reposicionar suas visualizações em 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 ObjectAnimator.ofFloat() , porque os valores de translação devem ser flutuantes. O primeiro parâmetro é a visualização que você quer animar. O segundo parâmetro é a propriedade que você e animação. Como a visualização precisa se mover horizontalmente, a 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 do na tela.

O próximo método especifica quanto tempo a animação leva, em milissegundos. Neste a animação será 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 mais informações sobre como usar ObjectAnimator, consulte Animar usando ObjectAnimator.

Adicionar movimento curvo

Embora o uso de ObjectAnimator seja conveniente, por padrão, ele reposiciona o vista ao longo de uma linha reta entre os pontos inicial e final. Material no design se baseia em curvas para o movimento espacial de objetos na tela e a tempo de uma animação. Usar movimentos curvos dá ao app uma sensação mais material deixando suas animações mais interessantes.

Definir seu próprio caminho

A classe ObjectAnimator tem construtores que permitem animar coordenadas usando duas ou mais propriedades ao mesmo tempo com um caminho. Para exemplo, o animador a seguir usa uma Objeto Path para animar os elementos X e Y. propriedades 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 é a implementação de uma curva de easing. Consulte a Documentação do Material Design para mais informações sobre o conceito de curvas de easing. Um Interpolator define como valores específicos em uma animação são calculados como uma função de tempo de resposta. 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 PathInterpolator é um interpolador introduzido no Android 5.0 (API 21). Ele é baseado em uma Curva de Bézier ou uma objeto Path. Os exemplos do Android na documentação do Material Design para suavização use PathInterpolator.

PathInterpolator tem construtores baseados em diferentes tipos de curvas de Bézier. Todas as curvas de Bézier têm pontos de início e término fixos em (0,0) e (1,1). respectivamente. Os outros argumentos do construtor dependem do tipo 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ários:

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 está chegando ao fim.

O construtor cúbico de Bézier 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();
}

Essa é uma implementação do modelo enfatizado desacelerar curva de easing.

Para maior 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 uma 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 ao Animator.setInterpolator() . O Animator usa o interpolador para determinar o tempo ou o caminho. curva 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();