13

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?

Community
  • 1
  • 1
user724861
  • 1,074
  • 3
  • 17
  • 33

3 Answers3

33

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);
Tim Kist
  • 1,164
  • 1
  • 14
  • 38
serkanozel
  • 2,947
  • 1
  • 23
  • 27
19

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

James
  • 5,119
  • 5
  • 25
  • 27
  • 2
    ObjectAnimator is a good alternative working with animations however, if I'm not mistaking, ObjectAnimator doesn't give you ability to setFillAfter or setFillEnabled as user724861 seem to be using it in his/her original post. – serkanozel Nov 13 '14 at 15:25
2

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

Swifty McSwifterton
  • 2,637
  • 1
  • 30
  • 37