动画按角度缩放弧

Question

我的任务是绘制圆图。
我有 4 条弧线。
在每条弧线上，我有 2 个值来制作 View Animate。

这张图片

会告诉你更多细节。

谁能建议我应该为每个值使用的动画？
以及如何使其按特定角度进行动画处理？

编辑：我上传 .gif 文件以获得更多详细信息。

Answer 1

您可以制作自定义视图和自定义动画。覆盖自定义动画中的applyTransformation() 方法以应用转换。

public class ArcView extends View {

    private final Paint mPaint;
    private final RectF mRect;
    private float arcAngle;

    public ArcView(Context context, AttributeSet attrs) {

        super(context, attrs);

        // Set Angle to 0 initially or whatever you want
        arcAngle = 0;

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
        mPaint.setColor(Color.WHITE);
        mRect = new RectF(2, 2, 78, 78);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawArc(mRect, 90, arcAngle, false, mPaint);
    }

    public float getArcAngle() {
        return arcAngle;
    }

    public void setArcAngle(float arcAngle) {
        this.arcAngle = arcAngle;
    }
}

这是你的动画类的样子

public class ArcAngleAnimation extends Animation {

    private ArcView arcView;

    private float oldAngle;
    private float newAngle;

    public ArcAngleAnimation(ArcView arcView, int newAngle) {
        this.oldAngle = arcView.getArcAngle();
        this.newAngle = newAngle;
        this.arcView = arcView;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation transformation) {
        float angle = oldAngle + ((newAngle - oldAngle) * interpolatedTime);

        arcView.setArcAngle(angle);
        arcView.requestLayout();
    }

    public void setNewAngle(int newAngle){
        this.newAngle = newAngle;
    }

    public void setOldAngle(float oldAngle) {
        this.oldAngle = oldAngle;
    }
}

现在您需要做的就是应用动画并在您的活动或片段中运行它

ArcView view = (ArcView) findViewById(R.id.arc_view);
ArcAngleAnimation arcAnimation;
arcAnimation = new ArcAngleAnimation(view, 30);
arcAnimation.setFillAfter(true);
arcAnimation.setDuration(200);
view.startAnimation(arcAnimation);