Valera Valerianov Valera Valerianov - 6 months ago 9
Android Question

Can not do the animation sequence of buttons

I'm trying to create an animation buttons. I have 3 buttons. I created an animation as I need to. and applied it to the buttons. but it is performed on all buttons simultaneously. I want her to be followed sequentially. first there is the first button, then the second, then a third.
my animation:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:startOffset="0"
android:toAlpha="1.0" >
</alpha>
<translate
android:fromXDelta="-100%"
android:duration="1000"
android:toXDelta="0" />
</set>


in my class onCreateView:

Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.falling);
Button kitchenBtn = (Button) v.findViewById(R.id.buttonKitchen);
Button hotelBtn = (Button) v.findViewById(R.id.buttonHotel);
Button engenerBtn = (Button) v.findViewById(R.id.buttonEngener);
kitchenBtn.setAnimation(animation);
hotelBtn.setAnimation(animation);
engenerBtn.setAnimation(animation);


buttons go from the left edge. I want to start with the first left, then the second and third behind her. Now they do it at the same time.

FULL CODE:

public class PurchaseMenu extends Fragment implements View.OnClickListener {
private int mAnimationsFinished = 0;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.purchase_menu, null);
final Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.falling);
final Button kitchenBtn = (Button) v.findViewById(R.id.buttonKitchen);
final Button hotelBtn = (Button) v.findViewById(R.id.buttonHotel);
final Button engenerBtn = (Button) v.findViewById(R.id.buttonEngener);
animation.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
Log.d("mylognah","start"+" "+mAnimationsFinished);
}

@Override
public void onAnimationEnd(Animation animation) {

if (mAnimationsFinished == 0) { //kitchenBtn animation ended
hotelBtn.setAnimation(animation);
} else if (mAnimationsFinished == 1) { //hotelBtn animation ended
engenerBtn.setAnimation(animation);
}
mAnimationsFinished++; //This would be a member variable
Log.d("mylognah","finish"+" "+mAnimationsFinished);
}

@Override
public void onAnimationRepeat(Animation animation) {

}
});
kitchenBtn.setAnimation(animation);
kitchenBtn.setOnClickListener(this);
hotelBtn.setOnClickListener(this);
engenerBtn.setOnClickListener(this);
return v;
}

Answer

You have to set an AnimationListener on the Animation and keep track of the number of times it finished and start the appropriate next Animation like so:

final Animation fallingAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.falling);
    final Button kitchenBtn = (Button) v.findViewById(R.id.buttonKitchen);
    final Button hotelBtn = (Button) v.findViewById(R.id.buttonHotel);
    final Button engenerBtn = (Button) v.findViewById(R.id.buttonEngener);
    fallingAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if (mAnimationsFinished == 0) { //Kitchen animation ended
                kitchenBtn.setAnimation(null); //Set the animation on the other button to null
                engenerBtn.setAnimation(null); //Otherwise they animate too
                hotelBtn.setVisibility(View.VISIBLE); //Make the view visible
                hotelBtn.setAnimation(fallingAnimation);
                fallingAnimation.start(); //Restart animation. DO NOT FORGET THIS ONE
            } else if (mAnimationsFinished == 2) { //Hotel animation ended. I couldn't figure out why, but this won't work when you try == 1.
                kitchenBtn.setAnimation(null); //Set the animation on the other button to null
                hotelBtn.setAnimation(null); //Otherwise they animate too
                engenerBtn.setVisibility(View.VISIBLE); //Make the view visible
                engenerBtn.setAnimation(fallingAnimation);
                fallingAnimation.start(); //Restart animation. DO NOT FORGET THIS ONE
            }
            mAnimationsFinished++;
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    kitchenBtn.setAnimation(fallingAnimation);
    hotelBtn.setVisibility(View.INVISIBLE); //Make view invisible. Otherwise they're visible before animated
    engenerBtn.setVisibility(View.INVISIBLE); //Make view invisible. Otherwise they're visible before animated

This way, the kitchedBtn will be animated first and when the Animation ended, the onAnimationEnd method will be called, starting the next Animation.

Comments