动画比例角度弧

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);