Android Animation Help

Question

Hello I am trying to create an animation like creating heart like bubbles but not 100% like this. This could on some static Activity.

But I am at no where. Documentation lacks examples and examples in API are just unacceptable. It shouldn't be so hard to make such animation.

I am pasting my code please help me.

Class File

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class AnimationTest extends Activity {
AnimationDrawable animation;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Button btnStart = (Button) findViewById(R.id.btnStart);
    final ImageView imgView = (ImageView) findViewById(R.id.img);

    btnStart.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startAnimation();
        }
    });
    imgView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });
}

class Starter implements Runnable {
    public void run() {
        animation.start();
    }
}

private void startAnimation() {
    animation = new AnimationDrawable();
    animation.addFrame(getResources().getDrawable(R.drawable.one), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.two), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.three), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.four), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.five), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.six), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.seven), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.eight), 100);
    animation.setOneShot(false);


    ImageView imageView = (ImageView) findViewById(R.id.img);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(80, 90);
    params.alignWithParent = true;
    params.addRule(RelativeLayout.CENTER_IN_PARENT);
    imageView.setLayoutParams(params);
    imageView.setImageDrawable(animation);
    imageView.post(new Starter());
}

}

XML File

    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="Frame by Frame Animation Example"
        android:gravity="center" />

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:layout_gravity="center_horizontal">

        <ImageView android:id="@+id/img" android:layout_width="80px"
            android:layout_height="90px" android:layout_centerInParent="true" />

        <Button android:id="@+id/btnStart" android:text="Start Animation"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_alignParentRight="true" />

    </RelativeLayout>

</LinearLayout>

Images, you can past some other images too 124

EDIT What I want to accomplish step1: a fish comes from left side setp2: a fish comes from right side

step3: a heart appears and grows bigger in very center of both fish step4: then small hearts fly away and disappear

Answer 1

property animation:

an animation defined in xml that modifies the properties of color, alpha values over specified amount of time.

View Animation:

frame animation: animation is defined in xml file that shows a sequence of images in order. (like a film)

Tween Animation: Tween animation creates an animation by performing a series of transformations on a single image.

AlphaAnimation: controls the tranperancy changes. RotateAnimation: controls the rotations. ScaleAnimation: Controls the growing and shrinking TranslateAnaimation: Controls the position changes.

Answer 2

Grow animations

Translate + scale + rotate animation set

Start by looking at those. That will teach the basics of Animation API. In order to get the the one after another chain effect you are looking for the only way I've found to do it is using animationListener to get a call back when one ends and then start the next one from there. Honestly it may easier to implement for your needs if you just make this into a movie file and play it in a VideoView rather than creating all of those views seperately and applying Animations to all of them.