如何像在 .gif 中一样使用 win2d 在 CanvasVirtualControl 上创建动画矩形？

Question

如何在 canvasVirtualControl 中绘制动画矩形，如下所示gif.I不知道如何实现this.can有人建议我吗？

Answer 1

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

您可以根据需要动态调整矩形的初始大小、缩小范围和位置。

更新

如果你需要蚂蚁线的动画效果，这里提供一个思路：

我们可以创建一个渐变（比如黑白渐变）来模拟虚线
画一个矩形，使用渐变色作为边框颜色
不断调整渐变色的起点和终点，形成流动的效果

这是一个例子：

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

如何像在 .gif 中一样使用 win2d 在 CanvasVirtualControl 上创建动画矩形？

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

uwp-xaml

win2d