Animate the Circle anti-clockwise

[carlos-osejo]

There is not an option to change the animation from clockwise to anit-clokwise, I have to spent a couple of hours researching for implementing the anti-clockwise animation that I need to develop, so I think you can add this feature to your component and be custom in that way to. It very useful and works excellent.

I did it changing this line mDrawAnimator = ObjectAnimator.ofFloat(this, "phase", mPhase,1.0f).setDuration(3000);

for this: mDrawAnimator = ObjectAnimator.ofFloat(this, "phase", 1.0f,mPhase).setDuration(3000);

I dont know if there a better way, but I hope it will help.

[alexandersch]

Your modification didn't really work for me as hoped.

I had to rework the showValue method. I've also modified some paint colors for the drawWholeCirlcle and drawInnerCircle method, for everything to work.

So basicly I've modified the showValue method:

calcAngle(toShow / total * 100f) to: calcAngle((100f - (toShow / total) * 100f)) * -1;

It calculates the remaining percentage instead of the percentage to fill. It also reverses the angle to a negative angle which is needed to reverse the animation.

In the example below, the circle then goes from full -> empty, instead of empty -> full.

[bandarunaresh]

i filled the color in clockwise direction. I want to reverse animation like anticlockwise with remove the filled color with clockwise direction.