在Android中为矩形动画的最佳方法

Question

I want to animate a rectangle filled with one opaque color. The attributes I will be animating is the translation, and the width of the active menu item.

I know how to animate things, but in this case, I want it to do no layouts on the view, since my animation will occur inside a LinearLayout, and it will not exceed it's size.

The Blue line on top of my layout is what I will be animating. It will go horizontally to the left and right, while changing it's width, so that it fits on the selected menu item.

I usually work with animations on the margin, but it consumes a lot of processing to re-calculate bounds on the layout process.

Any suggestions on how to do that?

Answer 1

That depends entirely on what API level you're targetting, if you're only targeting >3.0 then ObjectAnimator and ValueAnimator or the nicer ViewPropertyAnimator are your best friend, they let you do simple things like "move the X value of this 100dp while increasing the width by a factor of two, in 300ms".

If you're targeting a lower API level check out NineOldAndroids which brings that functionality over to all versions of Android.

To do what you want to do it'd be something along the lines of:

myImageView.scaleXBy(FACTOR_NEEDED_FOR_NEW_WIDTH);

and that's all to it.

As a sidenote: It looks like you might be attempting to replicate a ViewPager 's indicator, in which case you should be using an actual indicator.

Answer 2

I had to animate the Margin and the Width of the view, because there was no way out, since I'm using android version >=8.

Here is my two classes that can do this:

MarginAnimation class:

public class MarginAnimation extends Animation{// implements AnimationListener{
    public static String TAG = "MarginAnimation";

    protected View animatingView;

    protected int fromMarginLeft = 0;
    protected int fromMarginTop = 0;

    protected int toMarginLeft = 0;
    protected int toMarginTop = 0;

    protected LayoutParams layoutParam;

    public MarginAnimation(View v, int toMarginLeft, int toMarginTop) {
        this.toMarginLeft = toMarginLeft;
        this.toMarginTop = toMarginTop;

        this.animatingView = v;

        // Save layout param
        layoutParam = (LayoutParams) animatingView.getLayoutParams();

        // Save current margins as initial state
        saveCurrent();

        // Set the listner to be self object
//      setAnimationListener(this);
    }

    public MarginAnimation(View v, int fromMarginLeft, int toMarginLeft, int fromMarginTop, int toMarginTop) {
        this.fromMarginLeft = fromMarginLeft;
        this.toMarginLeft = toMarginLeft;

        this.fromMarginTop = fromMarginTop;
        this.toMarginTop = toMarginTop;

        this.animatingView = v;

        // Save layout param
        layoutParam = (LayoutParams) animatingView.getLayoutParams();

        // Set the listner to be self object
//      setAnimationListener(this);
    }

    protected void saveCurrent(){
        fromMarginLeft = layoutParam.leftMargin;
        fromMarginTop  = layoutParam.topMargin;
    }

    long lastTime = 0;

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
//      long thisTime = System.nanoTime();

//      if(lastTime != 0)
//          Log.e(TAG, ((thisTime - lastTime) / 1000) + "delta Anim.");

//      lastTime = thisTime;

        layoutParam.leftMargin = (int)(fromMarginLeft + (toMarginLeft - fromMarginLeft) * interpolatedTime);
        layoutParam.topMargin = (int)(fromMarginTop + (toMarginTop- fromMarginTop) * interpolatedTime);
        animatingView.setLayoutParams(layoutParam);
    }

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

MarginAndWidthAnimation class:

public class MarginAndWidthAnimation extends MarginAnimation{
    public static String TAG = "MarginAndWidthAnimation";

    int toWidth;
    int fromWidth;

    public MarginAndWidthAnimation(View v, int toMarginLeft, int toMarginTop, int toWidth) {
        super(v, toMarginLeft,toMarginTop);

        this.toWidth = toWidth;

//      Log.i(TAG, "++F: "+this.fromWidth+" T: "+this.toWidth);
    }

    protected void saveCurrent(){
        super.saveCurrent();
//      fromWidth = animatingView.getWidth();
        fromWidth = layoutParam.width;
//      Log.i(TAG, "F: "+fromWidth+" T: "+toWidth);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

        layoutParam.width = (int)(fromWidth + (toWidth - fromWidth) * interpolatedTime);
//      Log.i(TAG, "F: "+fromWidth+" T: "+toWidth+" S: "+layoutParam.width);
        super.applyTransformation(interpolatedTime, t);
    }
}