如何使用 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-animation https://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

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

How to create a simple animation in Xamarin with SkiaSharp

c#

xamarin

skiasharp