Tuesday, August 12, 2014

AnimationDrawable example: determine end of animation to start another animation

This another example of "Detect AnimationDrawable.isRunning() to toggle start/stop animation" to start another animation when the first animation end.


There are no listener method to be called when animation of AnimationDrawable end. So we have to determine the duration by adding all frame duration of the animation, by calling our getAnimationDuration(AnimationDrawable src), then start a delayed runnable() to start another animation.

Download the PNGs to drawable folder:







Create animations in /res/anim/ folder:

anim_android.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item
        android:drawable="@drawable/android_1"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_3"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_4"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_5"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_6"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_7"
        android:duration="100"/>

</animation-list>

anim_android2.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item
        android:drawable="@drawable/android_7"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_6"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_5"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_4"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_3"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/android_1"
        android:duration="100"/>

</animation-list>

/res/layout/activity_main.xml
<LinearLayout 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:orientation="vertical"
    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="com.example.androidanimation.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/startstopanimation"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Start/Stop Animation" />

    <ImageView
        android:id="@+id/myanimation1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@anim/anim_android" />
    <ImageView
        android:id="@+id/myanimation2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@anim/anim_android2" />

</LinearLayout>

MainActivity.java
package com.example.androidanimation;

import android.support.v7.app.ActionBarActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {
 
 AnimationDrawable myAnimationDrawable1, myAnimationDrawable2;
 ImageView myAnimation1, myAnimation2;
 
 Handler handlerAnim2;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  myAnimation1 = (ImageView) findViewById(R.id.myanimation1);
  myAnimation2 = (ImageView) findViewById(R.id.myanimation2);
  
  myAnimationDrawable1 = (AnimationDrawable) myAnimation1.getDrawable();
  myAnimationDrawable1.stop();
  myAnimationDrawable1.setOneShot(true);
  
  myAnimationDrawable2 = (AnimationDrawable) myAnimation2.getDrawable();
  myAnimationDrawable2.stop();
  myAnimationDrawable2.setOneShot(true);

  Button startStopAnimation = (Button) findViewById(R.id.startstopanimation);
  startStopAnimation.setOnClickListener(new Button.OnClickListener() {

   @Override
   public void onClick(View v) {
    if (myAnimationDrawable1.isRunning()) {
     myAnimationDrawable1.stop();
    } else {
     myAnimationDrawable1.run();
     
     handlerAnim2 = new Handler();
     handlerAnim2.postDelayed(
      new Runnable(){

       @Override
       public void run() {
        myAnimationDrawable1.stop();
        myAnimationDrawable2.run();
       }}, 
      getAnimationDuration(myAnimationDrawable1));
    }
   }

  });
  
  
 }
 
 private int getAnimationDuration(AnimationDrawable src){
  int dur = 0;
  for(int i=0; i<src.getNumberOfFrames(); i++){
   dur += src.getDuration(i);
  }
  return dur;
 }

}


download filesDownload the files.

No comments: