自定义视图中的Android Animate矩形

Question

我创建了一个扩展View的类，我将在一个布局中引用它，以便在屏幕上绘制。

这个类只是表示一个Rectangle，我希望矩形的长度一直减小到0。

构造函数：

public CardAnimationNew(Context context, AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(getResources().getColor(R.color.card_grey_underline));
}

onMeasure：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    if (mRectangle == null) {
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mRectangle = new Rect(0, 0, mWidth, mHeight);
        animateRectangle();
    }
}

animateRectangle：

private void animateRectangle() {
    mObjectAnimator = ObjectAnimator.ofFloat(mRectangle, "width", 5);
    mObjectAnimator.setDuration(1000);
    mObjectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            invalidate();
        }
    });
    mObjectAnimator.start();
}

onDraw有：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawRect(mRectangle, mPaint);
}

问题是Rect根本没有动画。 它保持相同的长度。 我哪里错了？

Answer 1

根据文档，该属性需要您正在应用动画师的类中的setter。

此名称将用于派生一个setter函数，该函数将被调用以设置动画值。

关键是Rect没有setWidth（）或setHeight（） 。

此外，Rect没有宽度和高度属性，顺便说一下，您可以为其四个坐标（ top ， left ， right ， bottom ）设置动画，并获得所需的效果。 （只需将宽度视为Math.abs(left - right) ，将高度视为Math.abs(top - bottom) ）。

为了使它能够处理Rect（或者像下例中的RectF一样 - 如果你需要在Rect上使用int setter而不是float），你需要通过添加你需要的属性的setter来对它进行子类化：

private class AnimatableRectF extends RectF{
        public AnimatableRectF() {
            super();
        }

        public AnimatableRectF(float left, float top, float right, float bottom) {
            super(left, top, right, bottom);
        }

        public AnimatableRectF(RectF r) {
            super(r);
        }

        public AnimatableRectF(Rect r) {
            super(r);
        }

        public void setTop(float top){
            this.top = top;
        }
        public void setBottom(float bottom){
            this.bottom = bottom;
        }
        public void setRight(float right){
            this.right = right;
        }
        public void setLeft(float left){
            this.left = left;
        }

    }

然后你可以用正常的方式为它设置动画......这里有一个动画AnimatableRectF动画的例子，名为mCurrentRect来执行翻译：

float translateX = 50.0f;
float translateY = 50.0f;
ObjectAnimator animateLeft = ObjectAnimator.ofFloat(mCurrentRect, "left", mCurrentRect.left, mCurrentRect.left+translateX);
ObjectAnimator animateRight = ObjectAnimator.ofFloat(mCurrentRect, "right", mCurrentRect.right, mCurrentRect.right+translateX);
ObjectAnimator animateTop = ObjectAnimator.ofFloat(mCurrentRect, "top", mCurrentRect.top, mCurrentRect.top+translateY);
ObjectAnimator animateBottom = ObjectAnimator.ofFloat(mCurrentRect, "bottom", mCurrentRect.bottom, mCurrentRect.bottom+translateY);
animateBottom.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator valueAnimator) {
                            postInvalidate();
                        }
                    });
AnimatorSet rectAnimation = new AnimatorSet();
rectAnimation.playTogether(animateLeft, animateRight, animateTop, animateBottom);
rectAnimation.setDuration(1000).start();

我知道它不是解决您问题的复制/粘贴解决方案，但我希望此代码可以帮助您了解如何解决您的问题！

Answer 2

RectEvaluator是这样做的方法。 基本上你可以在Rect上使用ObjectAnimator并给它一个开始和结束rect，它将评估它们之间的步骤。 这只是api> = 18。 一篇体面的文章在这里http://cogitolearning.co.uk/?p=1451