Anima grafica disegnabile

Prova Compose

Jetpack Compose è il toolkit UI consigliato per Android. Scopri come utilizzare le animazioni in Compose.

Anima le risorse drawable vettoriali →

In alcune situazioni, le immagini devono essere animate. Questa funzionalità è utile se vuoi visualizzare un'animazione di caricamento personalizzata composta da più immagini o se vuoi che un'icona si trasformi dopo l'azione di un utente. Android offre due opzioni per animare le risorse drawable.

La prima opzione è utilizzare un AnimationDrawable. In questo modo puoi specificare più file drawable statici che vengono visualizzati uno alla volta per creare un'animazione. La seconda opzione è utilizzare un AnimatedVectorDrawable, che ti consente di animare le proprietà di una risorsa drawable vettoriale.

Utilizza AnimationDrawable

Un modo per creare un'animazione è caricare una sequenza di risorse drawable, come una bobina di film. La classe AnimationDrawable è la base per questo tipo di animazioni drawable.

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

Il file XML è costituito da un <animation-list> elemento come nodo principale e da una serie di nodi secondari <item> che definiscono ciascuno un frame: una risorsa drawable e la relativa durata. Ecco un esempio di file XML 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. Se imposti l'attributo android:oneshot dell'elenco su true, l'animazione viene eseguita una sola volta, quindi si interrompe e rimane sull'ultimo frame. Se imposti android:oneshot su false, l'animazione viene eseguita in loop.

Se salvi questo file XML come rocket_thrust.xml nella directory res/drawable/ del progetto, puoi aggiungerlo come immagine di sfondo a una View e poi chiamare start() per riprodurlo. Ecco un esempio di attività in cui l'animazione viene aggiunta a un ImageView e poi animata quando viene toccato lo schermo:

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

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 su AnimationDrawable non può essere chiamato durante il metodo onCreate() della tua Activity, perché AnimationDrawable non è ancora completamente collegato alla finestra. Per riprodurre l'animazione immediatamente, senza richiedere interazioni, puoi chiamarla dal onStart() metodo della tua Activity, che viene chiamato quando Android rende visibile la visualizzazione sullo schermo.

Per saperne di più sulla sintassi XML e sui tag e attributi disponibili, consulta Risorse di animazione.

Utilizza AnimatedVectorDrawable

Una risorsa drawable vettoriale è un tipo di risorsa drawable scalabile senza diventare pixelata o sfocata. La AnimatedVectorDrawable classe e AnimatedVectorDrawableCompat per la compatibilità con le versioni precedenti ti consentono di animare le proprietà di una risorsa drawable vettoriale, ad esempio ruotandola o modificando i dati del percorso per trasformarla in un' immagine diversa.

In genere, le risorse drawable vettoriali animate vengono definite in tre file XML:

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

Le risorse drawable vettoriali animate possono animare gli attributi degli elementi <group> e <path>. L'elemento <group> definisce un insieme di percorsi o sottogruppi, mentre l'elemento <path> definisce i percorsi da disegnare.

Quando definisci una risorsa drawable vettoriale che vuoi animare, utilizza l'attributo android:name per assegnare un nome univoco a gruppi e percorsi, in modo da poterli fare riferimento dalle definizioni dell'animatore. 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 della risorsa drawable vettoriale animata fa riferimento ai gruppi e ai percorsi della risorsa drawable vettoriale in base ai loro 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 oggetti ObjectAnimator o AnimatorSet. Il primo animatore in questo esempio ruota il gruppo di destinazione di 360 gradi:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Il secondo animatore in questo esempio trasforma il percorso della risorsa drawable vettoriale da una forma all'altra. I percorsi devono essere compatibili per la trasformazione: 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 la AnimatedVectorDrawable risultante:

Anteprima della risorsa drawable vettoriale animata (AVD)

Lo strumento Risorsa drawable vettoriale animata in Android Studio ti consente di visualizzare l'anteprima delle risorse drawable animate. Questo strumento ti aiuta a visualizzare l'anteprima delle risorse <animation-list>, <animated-vector> e <animated-selector> in Android Studio e semplifica la rifinitura delle animazioni personalizzate.

Per saperne di più, consulta il riferimento API per AnimatedVectorDrawable.