Android: Make Animation From Still Images

I've a series of still images and total of more than 500 images presented in drawable directory. I need to make an animation (load about 20 images per second). I want it to run smo

Solution 1:

Use a FrameAnimation, eg in res/drawable/movie.xml:

<?xml version="1.0" encoding="utf-8"?><animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="true"><itemandroid:drawable="@drawable/frame1"android:duration="50" /><itemandroid:drawable="@drawable/frame2"android:duration="50" /><itemandroid:drawable="@drawable/frame3"android:duration="50" />
    etc...
</animation-list>

And then in Java:

imageView.setBackgroundResource(R.drawable.movie);
AnimationDrawableanim= (AnimationDrawable) imageView.getBackground();
anim.start();

Solution 2:

OK. The biggest problem and the easiest solution I got to go with after so many days. I would never expect that it would be so easy to do... :D

I've used both handler and timer to achieve with just an image view, no flipper, no animator nothing else at all... Here is my solution:

----- main.xml file -----

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/background"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/imageView1"></ImageView>

And here is the way I have done it:

publicclassMainActivityextendsActivity {
private ImageView _imagView;
private Timer _timer;
privateint _index;
private MyHandler handler;

/** Called when the activity is first created. */@OverridepublicvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    handler= newMyHandler();
    _imagView=(ImageView) findViewById(R.id.imageView1);

    _index=0;
    _timer= newTimer();
    _timer.schedule(newTickClass(), 500, 200);
}

privateclassTickClassextendsTimerTask
{
    @Overridepublicvoidrun() {
        // TODO Auto-generated method stub
        handler.sendEmptyMessage(_index);
        _index++;
    }
}

privateclassMyHandlerextendsHandler
{
    @OverridepublicvoidhandleMessage(Message msg) {
        // TODO Auto-generated method stubsuper.handleMessage(msg);

        try {
                Bitmap bmp= BitmapFactory.decodeStream(MainActivity.this.getAssets().open("drum_"+_index+".png"));
                _imagView.setImageBitmap(bmp);

                Log.v("Loaing Image: ",_index+"");
        } catch (IOException e) {
            // TODO Auto-generated catch block
            Log.v("Exception in Handler ",e.getMessage());
        }
    }
}

}

Note: I've placed all my images to asset directory.

Its so simple as it can, nothing big to do...

I hope it'll be helpful for someone looking to go like this :)

Solution 3:

Loading several images is very expensive.

I think it's better to load a single image containing all the movements of that certain animation. An animation strip.

private Bitmap animation = BitmapFactory.decodeResource(getResources(), R.drawable.myPng);

The idea is to traverse the bitmap.

Solution 4:

Well, I'm using viewFlipper, switching between views. Good thing about this one is that u can see previous picture sliding out while the new one slides in.

Inside image displaying method:

if (direction == NEXT) {
        viewFlipper.setInAnimation(slideLeftIn);
        viewFlipper.setOutAnimation(slideLeftOut);

        if (currImg < max)
            currImg++;
        if (currImg == max)
            currImg = 0;

        if (currentView == 0) {
            currentView = 1;
            ImageView iv = (ImageView) findViewById(R.id.ImageView02);
            iv.setImageResource(images[currImg]);
        } elseif (currentView == 1) {
            currentView = 2;
            ImageView iv = (ImageView) findViewById(R.id.ImageView03);
            iv.setImageResource(images[currImg]);
        } else {
            currentView = 0;
            ImageView iv = (ImageView) findViewById(R.id.ImageView01);
            iv.setImageResource(images[currImg]);
        }
        viewFlipper.showNext();
    }
    elseif (direction == PREV) {
        viewFlipper.setInAnimation(slideRightIn);
        viewFlipper.setOutAnimation(slideRightOut);

        if (currImg > 0)
            currImg--;
        elseif (currImg <= 0)
            currImg = (max-1);

        if (currentView == 0) {
            currentView = 2;
            ImageView iv = (ImageView) findViewById(R.id.ImageView03);
            iv.setImageResource(images[currImg]);
        } elseif (currentView == 2) {
            currentView = 1;
            ImageView iv = (ImageView) findViewById(R.id.ImageView02);
            iv.setImageResource(images[currImg]);
        } else {
            currentView = 0;
            ImageView iv = (ImageView) findViewById(R.id.ImageView01);
            iv.setImageResource(images[currImg]);
        }
        viewFlipper.showPrevious();

And inside XML file:

<ViewFlipperandroid:id="@+id/imageflipper"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:id="@+id/ImageView01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="centerInside"android:layout_gravity="center" /><ImageViewandroid:id="@+id/ImageView02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="centerInside"android:layout_gravity="center" /><ImageViewandroid:id="@+id/ImageView03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="centerInside"android:layout_gravity="center" /></ViewFlipper>