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

问题描述

如何在canvasVirtualControl中绘制一个动画矩形，如下图所示。我不知道该如何实现。有人可以建议我吗？

解决方法

在Win2d中，推荐用于创建动画的控件是CanvasAnimatedControl而不是CanvasVirtualControl。前者可以每秒60帧的速度动态绘制。

如果要使用CanvasAnimatedControl创建动态变化的矩形，可以编写：

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

Rect rect = new Rect(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,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;
}