如何使用 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