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.

enter image description here

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: enter image description here


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -