In alcuni casi, le immagini devono essere animate. Ciò è utile se vuoi visualizzare un'animazione di caricamento personalizzata composta da diverse immagini o se vuoi che un'icona si deformi dopo l'azione di un utente. Android offre due opzioni per animare i disegni.
La prima opzione consiste nell'utilizzare una AnimationDrawable. Ciò
consente di specificare diversi
file disegnabili statici che vengono visualizzati uno alla volta per
creare un'animazione. La seconda opzione consiste nell'utilizzare un elemento AnimatedVectorDrawable, che consente di animare le proprietà di un disegnabile vettoriale.
Usa AnimationDrawable
Un modo per creare un'animazione è caricare una sequenza di risorse disegnabili, come un rullino.
La classe AnimationDrawable
è la base per questi tipi di animazioni disegnabili.
Puoi definire i frame di un'animazione nel codice utilizzando l'API di 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 appartiene alla directory 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 è costituito da un elemento <animation-list> come nodo radice e da una
serie di nodi <item> secondari, ciascuno dei quali definisce un frame (una risorsa disegnabile
e la relativa durata). Ecco 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. Se imposti l'attributo android:oneshot
dell'elenco su true, il ciclo viene ripetuto una volta e poi viene arrestato e premuto
sull'ultimo frame. Se imposti android:oneshot su false,
l'animazione viene riprodotta in modo loop.
Se salvi questo XML come rocket_thrust.xml nella directory res/drawable/ del progetto, puoi aggiungerlo come immagine di sfondo a View e quindi chiamare start() affinché venga riprodotto. Ecco un esempio di attività in cui l'animazione viene aggiunta a un elemento
ImageView e poi animata
quando lo schermo viene toccato:
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 su AnimationDrawable non può essere chiamato durante il metodo onCreate() di Activity, perché AnimationDrawable non è ancora completamente collegato alla finestra. Per riprodurre l'animazione immediatamente, senza richiedere interazione, puoi chiamarla dal
onStart()Activity, che viene chiamato quando Android rende la visualizzazione visibile sullo schermo.
Per ulteriori informazioni sulla sintassi XML e sui tag e gli attributi disponibili, consulta la sezione Risorse dell'animazione.
Utilizza AnimatedVectorDrawable
Un elemento di disegno disegno vettoriale
è un tipo di elemento disegnabile scalabile senza risultare pixelato o sfocato. La classe AnimatedVectorDrawable e
AnimatedVectorDrawableCompat per la compatibilità con le versioni precedenti ti consentono di animare le proprietà di un disegnabile vettoriale, ad esempio ruotandolo o modificando i dati del percorso per trasformarli in un'immagine diversa.
Solitamente definisci i disegni di vettori animati in tre file XML:
- Tracciabile vettoriale con l'elemento
<vector>inres/drawable/. - Tracciabile di un vettore animato con l'elemento
<animated-vector>inres/drawable/. - Uno o più animatori di oggetti con l'elemento
<objectAnimator>inres/animator/.
Le disegnabili vettoriali animati 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 tracciare.
Quando definisci un disegno vettoriale che vuoi animare, utilizza l'attributo android:name per assegnare un nome univoco a gruppi e percorsi, in modo da potervi fare riferimento nelle definizioni dell'animatore. Ecco alcuni esempi:
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 di trascinamento di vettori animati si riferisce ai gruppi e ai percorsi nel vettore disegnabile con i 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 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 disegno vettoriale da una forma all'altra. I percorsi devono essere compatibili per il 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 AnimatedVectorDrawable:
AnimatedVectorDrawable.Anteprima di disegno vettoriale animato (AVD)
Lo strumento di disegno animato vettoriale in Android Studio consente di visualizzare l'anteprima delle risorse disegnabili animate. Questo strumento ti consente di visualizzare l'anteprima delle risorse <animation-list>, <animated-vector> e <animated-selector> in Android Studio e di perfezionare più facilmente le animazioni personalizzate.
Per maggiori informazioni, consulta il riferimento API per
AnimatedVectorDrawable.