Draw a circle on canvas using Animation - xamarin

Question

I need to create a circle using animation.
I need to set duration 2000 till my circle will be end at 360 degrees.
Class content
private int animValue;
private int strokeWidth = 15;
private int i = 0;
public MyCustomView(Context context) :
base(context)
{
}
public MyCustomView(Context context, IAttributeSet attrs) :
base(context, attrs)
{
animValue = 0;
}
public MyCustomView(Context context, IAttributeSet attrs, int defStyle) :
base(context, attrs, defStyle)
{
}
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
Paint paint = new Paint();
paint.SetStyle(Paint.Style.Stroke);
paint.StrokeWidth=(strokeWidth);
RectF rectF = new RectF();
rectF.Set(strokeWidth, strokeWidth, Width - strokeWidth, Width - strokeWidth);
paint.Color = (Color.Gray);
canvas.DrawArc(rectF, 0, 360, false, paint);
paint.Color=(Color.Blue);
canvas.DrawArc(rectF, animValue, i++, false, paint);
}
public void setValue(int animatedValue)
{
animValue = animatedValue;
Invalidate();
}
}
Activity Content
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
var circleView = FindViewById<MyCustomView>(Resource.Id.circleView);
ValueAnimator valueAnimator = ValueAnimator.OfInt(0, 0);
valueAnimator.SetDuration(2000);
valueAnimator.AddUpdateListener(new AnimatorUpdateListener(this, circleView));
valueAnimator.Start();
}
private class AnimatorUpdateListener : Java.Lang.Object, ValueAnimator.IAnimatorUpdateListener
{
private MainActivity mainActivity;
private MyCustomView circleView;
public AnimatorUpdateListener(MainActivity mainActivity, MyCustomView circleView)
{
this.mainActivity = mainActivity;
this.circleView = circleView;
}
void ValueAnimator.IAnimatorUpdateListener.OnAnimationUpdate(ValueAnimator animation)
{
circleView.setValue((int)animation.AnimatedValue);
}
}
The problem is that my circle doesnt finish at the end of circle it stops somewhere in middle.The line doesnt finish in the end of my circle...
[![Img][1]][1]
[1]: https://i.stack.imgur.com/oAz1Q.png

Answer 1

You can try the following code, and the effect is like this
Class content
class MyCustomView:View
{
private int animValue;
private int strokeWidth = 15;
//private int i = 0;
public MyCustomView(Context context) :
base(context)
{
}
public MyCustomView(Context context, IAttributeSet attrs) :
base(context, attrs)
{
animValue = 0;
}
public MyCustomView(Context context, IAttributeSet attrs, int defStyle) :
base(context, attrs, defStyle)
{
}
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
Paint paint = new Paint();
paint.SetStyle(Paint.Style.Stroke);
paint.StrokeWidth = (strokeWidth);
RectF rectF = new RectF();
rectF.Set(strokeWidth, strokeWidth, Width - strokeWidth, Width - strokeWidth);
paint.Color = (Color.Gray);
canvas.DrawArc(rectF, 0, 360, false, paint);
paint.Color = (Color.Blue);
canvas.DrawArc(rectF, 0, animValue, false, paint);
}
public void setValue(int animatedValue)
{
animValue = animatedValue;
Invalidate();
}
}
Activity Content
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
var circleView = FindViewById<MyCustomView>(Resource.Id.circleView);
ValueAnimator valueAnimator = ValueAnimator.OfInt(0, 360);
valueAnimator.SetDuration(2000);
valueAnimator.AddUpdateListener(new AnimatorUpdateListener(this, circleView));
valueAnimator.Start();
}
private class AnimatorUpdateListener : Java.Lang.Object, ValueAnimator.IAnimatorUpdateListener
{
private MainActivity mainActivity;
private MyCustomView circleView;
public AnimatorUpdateListener(MainActivity mainActivity, MyCustomView circleView)
{
this.mainActivity = mainActivity;
this.circleView = circleView;
}
void ValueAnimator.IAnimatorUpdateListener.OnAnimationUpdate(ValueAnimator animation)
{
circleView.setValue((int)animation.AnimatedValue);
}
}