如何在Android中使用基于值的圆圈大小绘制带有动画的圆圈 [英] How to draw a circle with animation in android with circle size based on a value
问题描述
我想开发一个自定义组件,该组件根据不同的值绘制圆的一部分。例如,绘制1/4圆,1/2圆等。
该组件需要设置动画以显示绘制过程。
在静态图像视图的顶部绘制了部分圆圈,我计划使用两个视图,其中一个动画在静态视图的顶部。
关于如何开发此功能的任何建议?
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?
我将屏幕截图用作参考。
I put the screenshot for reference.
请参考图片,并感受一下它的样子。
谢谢!
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();
}
}
将圆圈放入您的布局:
<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屋!