как создать анимированный прямоугольник на CanvasVirtualControl с помощью win2d, как в .gif?

В Win2d для создания анимации рекомендуется использовать CanvasAnimatedControl вместо CanvasVirtualControl. Первый может быть отрисован динамически со скоростью 60 кадров в секунду.

Если вы хотите использовать CanvasAnimatedControl для создания динамически изменяющегося прямоугольника, вы можете написать:

<canvas:CanvasAnimatedControl x:Name="canvas" Draw="canvas_DrawAnimated"
                              Width="400" Height="400"/>

Rect rect = new Rect(0, 0, 300, 200);
private void canvas_DrawAnimated(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args)
{
    var session = args.DrawingSession;
    session.DrawRectangle(rect, Colors.Green);
    if (rect.Width > 30 && rect.Height > 5)
    {
        // The rectangle change parameter here has no practical meaning 
        // and is only used for adjustment
        rect.Width -= 5;
        rect.Height -= 3;
        rect.X += 5;
        rect.Y += 3;
    }
}

Вы можете динамически регулировать начальный размер, уменьшенный диапазон и положение прямоугольника в соответствии с вашими потребностями.

Обновить

Если вам нужен эффект анимации линии муравья, вот идея:

1. Мы можем создать градиент (например, черно-белый градиент) для имитации пунктирной линии.
2. Нарисуйте прямоугольник и используйте цвет градиента в качестве цвета границы
3. Постоянно корректируйте начальную и конечную точки цвета градиента, чтобы создать плавный эффект.

Вот пример:

<canvas:CanvasAnimatedControl   
       x:Name="CanvasAnimatedControl"                      
       CreateResources="CanvasAnimatedControl_CreateResources"
       Draw="CanvasAnimatedControl_Draw"
       Update="CanvasAnimatedControl_Update"
       />

CanvasLinearGradientBrush Brush;
private void CanvasAnimatedControl_CreateResources(CanvasAnimatedControl sender, CanvasCreateResourcesEventArgs args)
{
    CanvasGradientStop[] stops = new CanvasGradientStop[2]
    {
       new CanvasGradientStop { Color = Colors.White, Position = 0 },
       new CanvasGradientStop { Color = Colors.Black, Position = 1 }
    };
    //Create linear gradient
    this.Brush = new CanvasLinearGradientBrush(sender, stops, CanvasEdgeBehavior.Mirror, CanvasAlphaMode.Premultiplied)
    {
        StartPoint = new Vector2(0, 0),
        EndPoint = new Vector2(6, 6)
    };
}
private void CanvasAnimatedControl_Draw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args)
{
    CanvasCommandList CommandList = new CanvasCommandList(sender);
    using (var ds = CommandList.CreateDrawingSession())
    {
        ds.DrawRectangle(0, 0, 100, 100, this.Brush);
    }
    args.DrawingSession.DrawImage(CommandList);
}
private void CanvasAnimatedControl_Update(ICanvasAnimatedControl sender, CanvasAnimatedUpdateEventArgs args)
{
    Vector2 space = new Vector2(0.5f, 0.5f);
    this.Brush.StartPoint -= space;
    this.Brush.EndPoint -= space;
}