Single Animation - Multiple Views

Question

Is there any way to animate multiple views at the same time?

What I want to do is translate animations:

I have 5 TextViews and 4 coloured strips (plain RelativeLayouts with a background). At the start of the animations, the stips are stacked with the TextViews in a horizontal row. At the end I want all the TextViews stacked between the strips:

This is a very simple drawing, but it demonstrates what I want to do. Is there any way of doing this with animations, or do I have to use canvas animations.

Solution 1

Create your animation objects, then use startAnimation collectively on all views at the same time. So it would be something like this:

TranslateAnimation anim1;
TranslateAnimation anim2;
TranslateAnimation anim3;

// Setup the animation objects

public void startAnimations()
{
   //... collect view objects
   view1.startAnimation(anim1);
   view2.startAnimation(anim2);
   view3.startAnimation(anim3);
}

Just note that the more animations you have going on at once, the slower it's going to be.

Solution 2

You can use the ObjectAnimator for animating the multiple view as follows:

ArrayList<ObjectAnimator> arrayListObjectAnimators = new ArrayList<ObjectAnimator>(); //ArrayList of ObjectAnimators

ObjectAnimator animY = ObjectAnimator.ofFloat(view, "y", 100f);
arrayListObjectAnimators.add(animY);

ObjectAnimator animX = ObjectAnimator.ofFloat(view, "x", 0f);
arrayListObjectAnimators.add(animX);
...
ObjectAnimator[] objectAnimators = arrayListObjectAnimators.toArray(new ObjectAnimator[arrayListObjectAnimators.size()]);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(objectAnimators);
animSetXY.setDuration(1000);//1sec
animSetXY.start();

Solution 3

You can use AnimationSet

AnimatorSet decSet2 = new AnimatorSet();
        decSet2.playTogether(
                ObjectAnimator.ofFloat(view, "x",dX),
                ObjectAnimator.ofFloat(view, "y",dY),
                ObjectAnimator.ofFloat(mTextCancel, "x",dX),
                ObjectAnimator.ofFloat(mTextCancel, "y", dY),
                ObjectAnimator.ofArgb(mBtnOne, "visibility", View.VISIBLE, View.GONE),
                );
        decSet2.setDuration(0);
        decSet2.start();

Solution 4

I've managed to share a single Animation instance among several Views. At least with an AlphaAnimation. I had a ListView and an animation that should be applied to a particular child of all list item views. In my case it should have been possible for the views to 'join' and 'leave' the shared animation at any time and it should not affect other animated views in any way or interfere with already running animation. To achieve this I had to make an adjusted copy of android's stock AlphaAnimation. My use case is rather special, but let it be here just in case someone has to deal with similar goal with ListView.

/**
 * This class is a copy of android's stock AlphaAnimation with two adjustments:
 * - fromAlpha, toAlpha and duration are settable at any time.
 * - reset() method can be blocked. Reason: view.setAnimation() calls animation's reset() method
 * which is not intended in our use case.
 * For every new list item view we call setAnimation once for it's life time
 * and animation should not be reset because it is shared by all list item views and may be in progress. 
 */
public class MutableAlphaAnimation extends Animation {
    private float mFromAlpha;
    private float mToAlpha;
    private boolean resetBlocked;

    public MutableAlphaAnimation() {
    }

    public void start(float fromAlpha, float toAlpha, long duration) {
        mFromAlpha = fromAlpha;
        mToAlpha = toAlpha;
        setDuration(duration);
        setStartTime(START_ON_FIRST_FRAME);
    }

    public void setResetBlocked(boolean resetBlocked) {
        this.resetBlocked = resetBlocked;
    }

    @Override
    public void reset() {
        if (! resetBlocked) super.reset();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float alpha = mFromAlpha;
        t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
    }

    @Override
    public boolean willChangeTransformationMatrix() {
        return false;
    }

    @Override
    public boolean willChangeBounds() {
        return false;
    }
}

To set this animation to a view:

            animation.setResetBlocked(true);
            view.setAnimation(animation);
            animation.setResetBlocked(false);

And to start an animation (previously set by setAnimation) TWO things must be done:

        animation.start(0.0f, 1.0f, FADE_IN_DURATION);

And after that you must manually call invalidate() on every view that is affected by the animation.

The usual startAnimation() does invalidate() for you, but setAnimation doesn't. (read the comment on View.setAnimation() method in android's sources).

View more solutions