How to draw a circle with animation in android with circle size based on a value -
i want develop custom component draws part of circle based on different values. e.g draw 1/4 cirle, 1/2 circle etc. component needs animated display drawing process. partial circle drawn on top of static imageview, , plan use 2 views, animated 1 on top of static one. suggestion how develop this?
i put screenshot reference.
please refer picture, , feel how looks like. thanks!
thanks in advance.
you have draw circle view, , after should create animation it.
creating circle view:
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, can 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 animation class set 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 layout:
<com.package.circle android:id="@+id/circle" android:layout_width="300dp" android:layout_height="300dp" />
and starting animation:
circle circle = (circle) findviewbyid(r.id.circle); circleangleanimation animation = new circleangleanimation(circle, 240); animation.setduration(1000); circle.startanimation(animation);
the result is:
Comments
Post a Comment