AnimatedVectorDrawable Android: Animazioni SVG con Esempi Java

AnimatedVectorDrawable in Android: guida rapida con esempio completo

AnimatedVectorDrawable è una classe introdotta in Android per permetterti di creare animazioni basate su vector drawable, senza dover usare GIF o sprite sheet. In pratica puoi animare path, trasformazioni (rotazioni, scale, traslazioni) e cambi di forma direttamente in XML, in modo dichiarativo e facilmente riutilizzabile.

In questa guida vediamo un esempio completo, passo passo, usando questi file:

• res/drawable/rotation.xml: definisce il vector drawable di base.
• res/animator/path_morph.xml: definisce l’animazione sulla proprietà pathData.
• res/drawable/vector_drawable.xml: mette insieme vector e animazione in un AnimatedVectorDrawable.
• res/layout/activity_main.xml: layout con una ImageView che mostra l’animazione.
• MainActivity.java: activity che avvia l’animazione.

Cos’è AnimatedVectorDrawable Android e come funziona

Un AnimatedVectorDrawable è composto, concettualmente, da tre pezzi:

• un VectorDrawable che contiene i path e i gruppi da animare;
• uno o più ObjectAnimator che descrivono cosa si anima (es. pathData, rotation, ecc.);
• un animated-vector che collega gli animator agli elementi del vector tramite l’elemento <target>.

Nel nostro esempio useremo un singolo path che cambia forma nel tempo, creando un semplice effetto di morphing.

1. Il VectorDrawable di base per AnimatedVectorDrawable

Partiamo dal vector drawable che contiene il path da animare. Salvalo in res/drawable/rotation.xml:

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="250dp"
    android:height="250dp"
    android:viewportWidth="50"
    android:viewportHeight="50">
    <group
        android:name="rotation"
        android:pivotX="0.0"
        android:pivotY="20.0"
        android:rotation="45.0">
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M 5 0 h 24 v 24 h -24 z" />
    </group>
</vector>

Qui definiamo un rettangolo (il path v) inserito in un gruppo chiamato rotation. Il gruppo ha un pivot e un angolo di rotazione iniziale, ma in questo esempio ci concentriamo principalmente sul morphing del path.

2. Animazione SVG con path morph in Android

Ora creiamo un ObjectAnimator che modifica la proprietà pathData del path, facendolo passare da un rettangolo pieno a una linea. Salvalo in res/animator/path_morph.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="700"
        android:propertyName="pathData"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:valueFrom="M 5 0 h 24 v 24 h -24 z"
        android:valueTo="M 5 0 h 24 v 0 h -24 z"
        android:valueType="pathType" />
</set>

L’animazione dura 700 ms, si ripete all’infinito e alterna tra la forma di partenza (valueFrom) e quella di arrivo (valueTo) grazie a repeatMode="reverse".

3. Configurare l’AnimatedVectorDrawable Android (vector_drawable.xml)

A questo punto creiamo il file che mette insieme vector drawable e animator. Salvalo in res/drawable/vector_drawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/rotation">
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

L’elemento <target> dice al sistema: anima il path con android:name="v" usando l’animator definito in @animator/path_morph. Il drawable di base è @drawable/rotation.

4. Il layout Android con ImageView per l’animazione SVG

Nel layout useremo una ImageView centrale che mostra l’AnimatedVectorDrawable. Salva questo file come res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/vector_drawable" />
</LinearLayout>

La ImageView carica il drawable @drawable/vector_drawable, cioè proprio l’AnimatedVectorDrawable che abbiamo appena definito.

5. L’Activity Android che avvia AnimatedVectorDrawable

Infine, creiamo una semplice activity che recupera l’AnimatedVectorDrawable, lo imposta sulla ImageView e avvia l’animazione. Salva questo file come MainActivity.java (nell’apposito package):

package com.example.animatedvectordrawable.activities;
import android.graphics.drawable.AnimatedVectorDrawable;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import com.example.animatedvectordrawable.R;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView img = findViewById(R.id.img);
        AnimatedVectorDrawable drawable =
                (AnimatedVectorDrawable) ContextCompat.getDrawable(this, R.drawable.vector_drawable);
        if (drawable != null) {
            img.setImageDrawable(drawable);
            drawable.start();
        }
    }
}

Con questi cinque file hai un esempio minimo ma completo di utilizzo di AnimatedVectorDrawable in Android. Da qui puoi sperimentare con path più complessi, più target e più animator per creare animazioni ricche e fluide direttamente in XML.

Articoli correlati

• VectorDrawable Android
• Canvas Android
• Bitmap Android
• Android Shape