Guida programmazione Android – Lezione 12: Animation

Oggi vedremo come creare una semplice animazione tramite la classe Animation.

Per prima cosa precisiamo che alcuni metodi in questa lezione richiedono le API 11 o superiori: questo significa che dovrete avere un dispositivo con android 3.0 (honeycomb) o superiore per poter testare l’applicazione direttamente tramite adb, altrimenti potete usare l’AVD (vedi lezione 3)

Creiamo un nuovo progetto, stando attenti a specificare come target minimo le API 11 come in figura:

Il comportamento dell’animazione può essere definito con semplicità in XML, in maniera simile a come vengono definiti i layout. Abbiamo bisogno di una cartella che contenga questi particolari file: tramite il Package Manager clicchiamo col tasto destro del mouse, New->Folder creando una cartella sotto res di nome anim. Dobbiamo inoltre creare la cartella drawable per inserire le immagini di uno o più frame dell’animazione. Ad esempio possiamo usare queste 2 semplici immagini, frame1 e frame2.

Creiamo il layout per la nostra applicazione usando l’editor grafico. In questo esempio è preferibile usare la visualizzazione landscape. Inseriamo il frame1 come in figura:

Ma eliminiamo il campo src, poichè vogliamo che l’immagine sia dinamica e non statica. Avremo così questo codice per l’activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true" />

</RelativeLayout>

E’ arrivato il momento di creare la nostra animazione: all’interno della cartella anim creiamo un nuovo file xml e chiamiamolo anim_car.xml. All’interno collochiamo questo codice XML:

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/frame1" android:duration="500" />

    <item android:drawable="@drawable/frame2" android:duration="500" />

</animation-list>

Con questo codice alterneremo il frame 1 e il frame2 ogni 500ms (campo android:duration).

Apriamo ora il file MainActivity.java e scriviamo:

package com.example.animazioni; 

import android.app.Activity;

import android.graphics.drawable.AnimationDrawable;

import android.os.Bundle;

import android.widget.ImageView; 

public class MainActivity extends Activity {

       @Override

       protected void onCreate(Bundle savedInstanceState) {

             super.onCreate(savedInstanceState);

             setContentView(R.layout.activity_main);

             ImageView car=(ImageView)findViewById(R.id.imageView1);

             car.setBackgroundResource(R.anim.anim_car);

             AnimationDrawable animation= (AnimationDrawable) car.getBackground();

             animation.start();

       } 

}

Eseguiamo sul nostro dispositivo e vedremo “frecciare” la nostra auto!!!
Naturalmente possiamo aumentare il numero di frame e diminuire il tempo per frame ( campo android:duration ), ottenendo così un’animazione più fluida.

Puoi guardare tutte le lezioni passate consultando l’indice del corso di programmazione android