Anima grafica disegnabile

Prova il metodo Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come utilizzare le animazioni in Compose.
Figura 1. Un elemento drawable animato.

In alcune situazioni, è necessario animare le immagini. È utile se vuoi visualizzare un'animazione di caricamento personalizzata composta da più immagini o se desideri che un'icona si deformi dopo un'azione. Android offre due opzioni per l'animazione dei disegni.

La prima è utilizzare una AnimationDrawable. Questo consente di specificare diverse file disegnabili che vengono visualizzati uno alla volta per per creare un'animazione. La seconda è l'utilizzo di un AnimatedVectorDrawable, che ti consente di animare le proprietà di un Drawable vettoriale.

Usa AnimationDrawable

Un modo per creare un'animazione consiste nel caricare una sequenza di risorse disegnabili, come un rotolo di pellicola. Il corso AnimationDrawable è la base per questi tipi di animazioni disegnabili.

Puoi definire i frame di un'animazione nel codice utilizzando l'AnimationDrawable ma è più facile definirli con un singolo file XML che elenca i frame compongono l'animazione. Il file XML per questo tipo di animazione appartiene alla categoria res/drawable/ del tuo progetto Android. In questo caso, le istruzioni forniscono l'ordine e la durata per ogni frame dell'animazione.

Il file XML è composto da un elemento <animation-list> che funge da nodo principale e da un serie di nodi figlio <item>, ognuno dei quali definisce un frame, una risorsa di cui è possibile e la sua durata. Di seguito è riportato un file XML di esempio per un'animazione Drawable:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

Questa animazione viene eseguita per tre frame. Impostazione di android:oneshot dell'elenco a true fa scorrere una volta il ciclo una volta e poi si ferma e tiene premuto nell'ultimo frame. Se imposti android:oneshot su false, l'animazione si ripete.

Se salvi questo XML come rocket_thrust.xml nel res/drawable/ del progetto, puoi aggiungerlo come immagine di sfondo a View e quindi chiama start() per farla suonare. Di seguito è riportato un esempio di attività in cui l'animazione viene aggiunta a un ImageView e poi animazione quando viene toccato lo schermo:

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

È importante notare che il metodo start() chiamato Impossibile chiamare AnimationDrawable durante il metodo onCreate() della tua richiesta Activity, perché AnimationDrawable non è ancora completamente collegato allo finestra. Per riprodurre immediatamente l'animazione, senza richiedere interazione, puoi chiamarla dal onStart() nel tuo Activity, che viene chiamato quando Android rende la visualizzazione visibile sullo schermo.

Per ulteriori informazioni sulla sintassi XML, sui tag e sugli attributi disponibili, consulta la sezione Risorse di animazione.

Usa AnimatedVectorDrawable

Un Drawable vettoriale è un tipo di elemento drawable scalabile senza che risulti sfocato o pixelato. La AnimatedVectorDrawable classe e AnimatedVectorDrawableCompat per la compatibilità con le versioni precedenti. Ti consente di animare il Proprietà di un vettore disegnabile, come la rotazione o la modifica dei dati del percorso per trasformarlo in un un'immagine diversa.

Di solito definisci drawable vettoriali animati in tre file XML:

  • Un drawable vettoriale con l'elemento <vector> in res/drawable/.
  • Un drawable vettoriale animato con l'elemento <animated-vector> in res/drawable/.
  • Uno o più animatori di oggetti con l'elemento <objectAnimator> in res/animator/.

È possibile animare gli attributi di <group> e di Elementi <path>. L'elemento <group> definisce un insieme di percorsi o sottogruppi e l'elemento <path> definisce i percorsi da tracciare.

Quando definisci un drawable vettoriale che vuoi animare, utilizza l'android:name per assegnare un nome univoco a gruppi e percorsi, in modo da potervi fare riferimento dal tuo animatore le tue definizioni. Ad esempio:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

La definizione del drawable vettoriale animato si riferisce ai gruppi e ai percorsi nel tracciabile del vettore animato dai nomi:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

Le definizioni dell'animazione rappresentano ObjectAnimator o AnimatorSet oggetti. La il primo animatore di questo esempio ruota il gruppo target di 360 gradi:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

Il secondo animatore in questo esempio trasforma il percorso del vettore disegnabile da una forma a un'altra. I percorsi devono essere compatibili al morphing: devono avere lo stesso numero di comandi e lo stesso numero di parametri per ogni comando.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Ecco il risultato di AnimatedVectorDrawable:

Figura 2. Un AnimatedVectorDrawable.

Anteprima animata della creatività vettoriale (AVD)

Lo strumento Drawable vettoriale animato in Android Studio ti consente di visualizzare l'anteprima delle animazioni risorse utilizzabili. Questo strumento ti consente di visualizzare l'anteprima di <animation-list>, <animated-vector> e <animated-selector> risorse in Android Studio e semplifica il perfezionamento delle animazioni personalizzate.

Utente che visualizza in anteprima e riproduce un&#39;animazione in Android Studio
Figura 3. Lo strumento disegno vettoriale animato in Android Studio.

Per ulteriori informazioni, consulta il riferimento API per AnimatedVectorDrawable.