以编程方式更改圆半径 - Canvas

Question

我想每 500 毫秒以编程方式将圆半径从 0 更改为 100，使其像闪烁的动画。

基本上，我画了两个圆心相同但半径不同的圆。我想将动画应用于后面的圆，另一个半径更大。

如何以编程方式更改圆的半径，使其从 0 变为 100，然后再变为 0？我在互联网上仔细搜索没有结果。

我是这样画这些圆圈的：

private static final int STROKE_WIDTH = 20;
private Paint mInnerCircle, mOutterCircle;
private int centerX, centerY, radius;

public void init(){
        mInnerCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
        mInnerCircle.setColor(Color.BLUE);
        mInnerCircle.setStyle(Paint.Style.FILL);

        mOutterCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
        mOutterCircle.setStyle(Paint.Style.STROKE);
        mOutterCircle.setStrokeWidth(STROKE_WIDTH);
        mOutterCircle.setColor(Color.parseColor("#33b5e5"));

}

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

            centerX = canvas.getWidth()/ 2;
            centerY = canvas.getHeight()/ 2;
            radius = Math.min(centerX,centerY);

        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, mOutterCircle);
        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, mInnerCircle);

    }

最终结果应该是这样的：

到目前为止我有静态圆圈：

非常感谢你的帮助。

Answer 1

您的 Drawable 可以实现 AnimatorUpdateListener 接口：

Implementors of this interface can add themselves as update listeners to an ValueAnimator instance to receive callbacks on every animation frame, after the current frame's values have been calculated for that ValueAnimator

然后重写onAnimationUpdate()方法来处理动画的每一帧。

public void onAnimationUpdate(ValueAnimator animator) {

    float radius = (float)animator.getAnimatedValue();

    // Clear canvas and draw next frame

    invalidateSelf();
}

然后在您的 init() 方法中启动动画：

public void init() {

    ...

    ValueAnimator valueAnimator = ValueAnimator.ofFloat(START_RADIUS, END_RADIUS);
    valueAnimator.setDuration(DURATION_MILLIS)
    valueAnimator.addUpdateListener(this);
    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    valueAnimator.start();

}

以编程方式更改圆半径 - Canvas

Change a circle radius programmatically - Canvas

android

android-custom-view

android-animation

android-canvas