Android Animation one after other

Viewed 42205

I have two TranslateAnimations on a TextView and I want them to execute one after other. However, by using the code below, only the second one is executed.

How can I solve this?

TranslateAnimation animation = new TranslateAnimation(
    Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, 0.0f,
    Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, -150.0f);
animation.setDuration(200);
wave.startAnimation(animation);

TranslateAnimation animation1 = new TranslateAnimation(
    Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, 0.0f,
    Animation.ABSOLUTE, 150.0f, Animation.ABSOLUTE, 0.0f);
animation1.setDuration(200);
wave.startAnimation(animation1);
8 Answers

There is one more approach to reach this goal which can be useful when you need to animate a lot of views one after another. You can use setStartOffset method to set a delay before animation begins. So, if you know, how much time will take for your first animation to end, you can set this as a delay for your second animation. This is an example where I animated six ImageButtons and six TextViews below them one after another:

public void animateButtons() {
    // An array of buttons
    int[] imageButtonIds = {R.id.searchButton, R.id.favoriteButton, R.id.responseButton, R.id.articleButton, R.id.resumeButton, R.id.subscribeButton};
    // Array of textViews
    int[] textViewIds = {R.id.searchTextView, R.id.favoriteTextView, R.id.responseTextView, R.id.articleTextView, R.id.resumeTextView, R.id.subscribeTextView};

    int i = 1;

    for (int viewId : imageButtonIds) {

        ImageButton imageButton = (ImageButton) findViewById(viewId);
        // Animation from a file fade.xml in folder res/anim
        Animation fadeAnimation = AnimationUtils.loadAnimation(this, R.anim.fade);
        // Delay for each animation is 100 ms bigger than for previous one
        fadeAnimation.setStartOffset(i * 100);
        imageButton.startAnimation(fadeAnimation);

        // The same animation is for textViews
        int textViewId = textViewIds[i-1];
        TextView textView = (TextView) findViewById(textViewId);
        textView.startAnimation(fadeAnimation);

        i ++;
    }
}

In my res/anim folder I have a file, called fade.xml with these contents:

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

<!--  Fade animation with 500 ms duration -->

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_decelerate_interpolator"
       android:fromAlpha="0.0" android:toAlpha="1.0"
       android:duration="500" />

For simple animations, you can achieve this by using the animate() and withEndAction() functions, like so:

    ImageView img = findViewById(R.id.imageView);
    img.animate().rotation(180).alpha(0).setDuration(3000).withEndAction(new Runnable() {
        @Override
        public void run() {
            ImageView img = findViewById(R.id.imageView);
            img.animate().rotation(0).alpha(1).setDuration(2000);
        }
    });

AnimationDrawable

Running such animation is pretty straightforward in Android. In fact, there is a class in Android API just for this specific task called AnimationDrwable. AnimationDrawable is a set of images together.

Step1: Create AnimationDrwable
Step2: Load Animation Drawable into ImageView
step3: start the animation

Step 1: Create an XML and add all images like this.

<animation-list 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:oneshot="true">
     <item android:drawable="@drawable/cat_image_1" android:duration="200" />
     <item android:drawable="@drawable/cat_image_2" android:duration="200" />
     <item android:drawable="@drawable/cat_image_3" android:duration="200" />
</animation-list>

Step 2:

public void onCreate(Bundle savedInstanceState) {
    
    //Step 2
    ImageView myimage = (ImageView) findViewById(R.id.my_image);
    myimage.setBackgroundResource(R.drawable.rocket_thrust);

    //Step 3
    AnimationDrawable catAnimation = (AnimationDrawable) rocketImage.getBackground();
    catAnimation.start();

}
Related