How to create a simple animation in Xamarin with SkiaSharp

Question

How to create simple animation invoking DrawCircle or DrawLine functions.

public void DrawCircle (SkiaSharp.SKPoint c, float radius, SkiaSharp.SKPaint paint);

I want to draw circles with delay. I have read all possible docs on C# xamarian animations and can't figure out a simple solution for this.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple https://docs.microsoft.com/en-us/xamarin/android/app-fundamentals/graphics-and-animation https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.animation?view=xamarin-forms .

Nothing on this problem in the above contents.

Can someone give me a tip from where to start to draw two object with a delay ?

public class SimpleCirclePage : ContentPage
{
    public SimpleCirclePage()
    {
        SKCanvasView canvasView = new SKCanvasView();
        canvasView.PaintSurface += OnCanvasViewPaintSurface;
        Content = canvasView;
    }

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        SKPaint paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = Color.Red.ToSKColor(),
            StrokeWidth = 10
        };
        canvas.DrawCircle(info.Width / 3, info.Height / 2, 100, paint);
        // I want to draw the second circle after some delay.
        canvas.DrawCircle(info.Width / 3, info.Height / 3, 100, paint);
    }
}

Answer 1

You can set the default radius of second circle to 0 and then it won't be draw on the page. Then after some delay(I set 4000ms here), you can set the radius to 100 and redraw the view, the second will appear. Is this you want?

public class SimpleCirclePage : ContentPage{

    float radius = 0;

    public SimpleCirclePage()
    {
        SKCanvasView canvasView = new SKCanvasView();
        canvasView.PaintSurface += OnCanvasViewPaintSurface;
        this.Content = canvasView;

        Device.StartTimer(TimeSpan.FromMilliseconds(4000), () =>
        {
            radius= 100;
            canvasView.InvalidateSurface();

            return false;
        });
    }

     void  OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        SKPaint paint = new SKPaint
        {
            Style = SKPaintStyle.Stroke,
            Color = Color.Red.ToSKColor(),
            StrokeWidth = 10
        };

        canvas.DrawCircle(info.Width / 3, info.Height / 2, 100, paint);

        // I want to draw the second circle after some delay.
        canvas.DrawCircle(info.Width / 3, info.Height / 3, radius, paint);
    }
}

You can read the document: skiasharp/basics/animation