Spostare una visualizzazione con animazione

Gli oggetti sullo schermo spesso devono essere riposizionati a causa dell'interazione dell'utente o l'elaborazione in background. Invece di aggiornare immediatamente il valore in modo che lampeggi da un'area all'altra, utilizza un'animazione per spostarla dalla posizione iniziale a quella finale.

Un modo in cui Android consente di riposizionare gli oggetti di visualizzazione sullo schermo è utilizzando ObjectAnimator. Devi specificare la posizione finale sia l'oggetto che la durata dell'animazione. Puoi utilizzare anche interpolatori temporali per controllare l'accelerazione o la decelerazione l'animazione.

Modificare la posizione della visualizzazione con ObjectAnimator

La ObjectAnimator L'API consente di modificare le proprietà di una vista con una durata specificata. Contiene metodi statici per creare istanze di ObjectAnimator a seconda il tipo di attributo che stai animando. Quando riposiziona le visualizzazioni su schermo, utilizza gli attributi translationX e translationY.

Ecco un esempio di ObjectAnimator che sposta la visualizzazione in una posizione 100 pixel dal lato sinistro dello schermo in 2 secondi:

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

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

Questo esempio utilizza la classe ObjectAnimator.ofFloat() perché i valori di traslazione devono essere in virgola mobile. Il primo parametro è la vista che vuoi animare. Il secondo parametro è la proprietà che anima. Poiché la visualizzazione deve spostarsi in orizzontale, translationX . L'ultimo parametro è il valore finale dell'animazione. In questo Ad esempio, il valore 100 indica una posizione di molti pixel a sinistra di sullo schermo.

Il metodo successivo specifica la durata dell'animazione, in millisecondi. In questo esempio, l'animazione viene eseguita per 2 secondi (2000 millisecondi).

L'ultimo metodo determina l'esecuzione dell'animazione, che aggiorna la posizione della vista sullo schermo.

Per ulteriori informazioni sull'utilizzo di ObjectAnimator, consulta la sezione Animazione con ObjectAnimator.

Aggiungi movimento curvo

Sebbene l'utilizzo di ObjectAnimator sia pratico, per impostazione predefinita riposiziona vista lungo una linea retta tra il punto di partenza e quello di arrivo. Materiale il design si basa sulle curve per il movimento spaziale degli oggetti sullo schermo e di un'animazione. L'uso dei movimenti curvi conferisce alla tua app un aspetto più "materiale" rendendo le animazioni più interessanti.

Definisci il tuo percorso

La classe ObjectAnimator ha costruttori che ti consentono di animare le coordinate utilizzando due o più proprietà contemporaneamente insieme a un percorso. Per Ad esempio, l'animatore seguente utilizza un'immagine Path per animare X e Y proprietà di una vista:

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
}

Ecco come appare l'animazione dell'arco:

Figura 1. Un'animazione con percorso curvo.

Un Interpolator è l'implementazione di una curva di easing. Consulta le Documentazione di Material Design per ulteriori informazioni sul concetto di curve di easing. Interpolator definisce in che modo valori specifici in un'animazione vengono calcolati come funzione di nel tempo. Il sistema fornisce risorse XML per le tre curve di base del Specifiche di Material Design:

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

Utilizzo di PathInterpolator

La PathInterpolator è un interpolatore introdotto in Android 5.0 (API 21). Si basa su una Curva di Bézier o una Path oggetto. Gli esempi di Android nella documentazione di Material Design per easing usa PathInterpolator.

PathInterpolator ha costruttori basati su diversi tipi di curve di Bézier. Tutte le curve di Bézier hanno punti di inizio e fine fissi su (0,0) e (1,1), rispettivamente. Gli altri argomenti del costruttore dipendono dal tipo di Bézier che viene creata.

Ad esempio, per una curva di Bézier quadratica solo le coordinate X e Y di un punto di controllo:

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();
}

Questo produce una curva di rallentamento che inizia rapidamente e rallenta man mano che si avvicina alla fine.

Analogamente, il costruttore cubico di Bézier ha punti di inizio e di fine fissi, richiede due punti di controllo:

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();
}

Si tratta di un'implementazione di Material Design enfatizzata rallentare della curva di easing.

Per un maggiore controllo, è possibile utilizzare un Path arbitrario per definire la 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();
}

Questo produce la stessa curva di easing dell'esempio di Bézier cubico, ma utilizza una Path in alternativa.

Puoi anche definire un interpolatore del percorso come risorsa 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"/>

Dopo aver creato un oggetto PathInterpolator, puoi passarlo al Animator.setInterpolator() . Animator utilizza l'interpolatore per determinare il tempo o il percorso della curva quando viene avviata.

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

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