Animation with animationSet() in android

Question

OK here's the problem i have an ImageView in my activity, here's what it looks in main.xml:

<ImageView  
android:id="@+id/ic"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:src="@drawable/icon"
android:layout_gravity="center_horizontal"/>

I want this image to move -200(left) and then to 100(right) and then back to 0 with bouncing effect.

I've implement this with my code:

as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());

TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0); 
ta.setDuration(2000);
as.addAnimation(ta);

AnimationSet sa = new AnimationSet(true);
sa.setFillEnabled(true);
sa.setInterpolator(new DecelerateInterpolator());

TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0); 
ta2.setDuration(2000);
sa.addAnimation(ta2);

as.addAnimation(sa);

you can see at the code the X transition that i want (-300,100) then (100, 0)

however, the image doesn't move like it should, instead it just stop at 100 and then bouncing...

hmmm...., do you guys know what is wrong or what should i do to accomplish this?

Answer 1

If I'm not mistaking, you're shooting for a sequence of animations.

Interestingly, once you start an AnimationSet, all the animations added are ran simultaneously and not sequentially; therefore you need to setStartOffset(long offSet) for each animation that follows the first animation.

Maybe something like this will work...

as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());

TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0); 
ta.setDuration(2000);
as.addAnimation(ta);

TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0); 
ta2.setDuration(2000);
ta2.setStartOffset(2000); // allowing 2000 milliseconds for ta to finish
as.addAnimation(ta2);

Answer 2

I suggest you to use ObjectAnimator. It is very easy to implement your case. Your animation may look like this:

ObjectAnimator animator1 = ObjectAnimator.ofFloat(targetView, "translationX", -200f);
animator1.setRepeatCount(0);
animator1.setDuration(1000);

ObjectAnimator animator2 = ObjectAnimator.ofFloat(targetView, "translationX", 100f);
animator2.setRepeatCount(0);
animator2.setDuration(1000);

ObjectAnimator animator3 = ObjectAnimator.ofFloat(targetView, "translationX", 0f);
animator3.setRepeatCount(0);
animator3.setDuration(1000);

//sequencial animation
AnimatorSet set = new AnimatorSet();
set.play(animator1).before(animator2);
set.play(animator2).before(animator3);
set.start();

If you are not familior with ObjectAnimator, you can check this android example tutorial:

Android View Animation Example

Answer 3

Something like this is very easy in 3.0 and above. Here are two links that I used to accomplish something similar.

http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html

http://developer.android.com/reference/android/animation/AnimatorSet.Builder.html