如何使用 SkiaSharp 在 Xamarin 中创建简单的动画

Question

如何创建调用 DrawCircle 或 DrawLine 函数的简单动画。

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

我想延迟绘制圆圈。我已阅读有关 C# xamarian 动画的所有可能文档，但无法找到一个简单的解决方案。

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-animationhttps://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.animation?view=xamarin-forms.

以上内容中没有关于这个问题的内容。

有人可以给我一个提示，从哪里开始延迟绘制两个对象？

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

您可以将second circle 的default radius 设置为0，然后它不会在页面上绘制。然后经过一些延迟（我在这里设置了4000ms），您可以将radius 设置为100 并重新绘制视图，第二个会出现。这是你想要的吗？

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);
    }
}

您可以阅读文档：skiasharp/basics/animation