Draw a circle on canvas using Animation

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.sstatic.net/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);

        }
    }