如何绘制动画的android一圈 [英] How to draw a circle with animation in 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一圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！