how to create animated Rectangle on CanvasVirtualControl using win2d like in .gif?

how to draw an Animated rectangle in canvasVirtualControl like the below gif.I don't know to how to achieve this.can anyone suggest me?

In Win2d, the recommended control for creating animation is CanvasAnimatedControl instead of CanvasVirtualControl. The former can be dynamically drawn at a rate of 60 frames per second.

If you want to use CanvasAnimatedControl to create a dynamically changing rectangle, you can write:

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

You can dynamically adjust the initial size, reduced range and position of the rectangle according to your needs.

Update

If you need the animation effect of the ant line, here is an idea:

1. We can create a gradient (such as a black and white gradient) to simulate a dotted line
2. Draw a rectangle and use the gradient color as the border color
3. Constantly adjust the start and end points of the gradient color to form a flowing effect.

Here is an example:

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