如何绘制动画的android一圈

问题描述：

我想开发其中提请根据不同的数值圆的一部分的自定义组件。例如画出1/4 cirle 1/2圈等。该组件需要进行动画显示拉丝工艺。部分画圆周上的静态imageview的顶部，并且我打算使用两个视图，动画1上的静态的顶部。任何建议如何发展呢？

I want to develop a custom component which draws part of the circle based on different values. e.g draw 1/4 cirle, 1/2 circle etc. The component needs to be animated to display drawing process. The partial circle is drawn on top of a static imageview, and I plan to use two views, animated one on top of the static one. Any suggestion how to develop this?

我把截图以供参考。

请参考图片，并感受它的样子。谢谢！

Please refer to the picture, and get a feel how it looks like. Thanks!

在此先感谢。

答

您必须画圆视图，之后，你应该创建一个动画吧。

You have to draw the circle view, and after that you should create an animation to it.

创建圈的看法：

public class Circle extends View {

    private static final int START_ANGLE_POINT = 90;

    private final Paint paint;
    private final RectF rect;

    private float angle;

    public Circle(Context context, AttributeSet attrs) {
        super(context, attrs);

        final int strokeWidth = 40;

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        //Circle color
        paint.setColor(Color.RED);

        //size 200x200 example
        rect = new RectF(strokeWidth, strokeWidth, 200 + strokeWidth, 200 + strokeWidth);

        //Initial Angle (optional, it can be zero)
        angle = 120;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint);
    }

    public float getAngle() {
        return angle;
    }

    public void setAngle(float angle) {
        this.angle = angle;
    }
}

创建动画类设置新的角度：

Creating the animation class to set the new angle:

public class CircleAngleAnimation extends Animation {

    private Circle circle;

    private float oldAngle;
    private float newAngle;

    public CircleAngleAnimation(Circle circle, int newAngle) {
        this.oldAngle = circle.getAngle();
        this.newAngle = newAngle;
        this.circle = circle;
    }

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

        circle.setAngle(angle);
        circle.requestLayout();
    }
}

将圈到您的布局：

Put circle into your layout:

<com.package.Circle
    android:id="@+id/circle"
    android:layout_width="300dp"
    android:layout_height="300dp" />

和终于开始动画：

Circle circle = (Circle) findViewById(R.id.circle);

CircleAngleAnimation animation = new CircleAngleAnimation(circle, 240);
animation.setDuration(1000);
circle.startAnimation(animation);

其结果是：

The result is:

如何绘制动画的android一圈

相关推荐