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:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply { duration = 2000 start() }
Java
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:
Kotlin
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 }
Java
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:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { PathInterpolator(0.67f, 0.33f) } else { LinearInterpolator() }
Java
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:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f) } else { LinearInterpolator() }
Java
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:
Kotlin
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() }
Java
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.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply { interpolator = myInterpolator start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setInterpolator(myInterpolator); animation.start();