重载圆圈组件

Question

我正在尝试使用 Blazor 为圆形 svg 制作动画。我已经在俄罗斯方块游戏中看到了这一点，所以我可能只是想不出如何让它发挥作用。<svg width="600" height="400">    <Ball Height="@Ball.Height" Width="@Ball.Width" CurrentPosition="@Ball.CurrentPosition"></Ball></svg><button class="btn btn-primary" @onclick="@Bounce">bounce</button>成分@inherits BallModel;@using Blong.Client.Model<circle cx="@CurrentPosition.X" cy="@CurrentPosition.Y" r="@Radius" style="@Style" />退回代码 void Bounce()    {        for (int i = 0; i < 1000; i++)        {            Task.Run(() => SetPosition(Ball.CurrentPosition.X, Ball.CurrentPosition.Y++, GameHeight));        }    }    public async Task<bool> SetPosition(int x, int y, int LastRow)    {        if (y <= LastRow)        {            Ball.CurrentPosition.Y++;            Thread.Sleep(500);            return true;        }        return false;    }这确实有点工作。每次我按下按钮时，我的球都会跳到新位置。有什么方法可以让它在循环时重新加载吗？我试图看到我的球在屏幕上移动。

Answer 1

基本上通知Blazor在循环内更新 UI 就足够了：

StateHasChanged();

但是东西很少。首先，该SetPosition方法不包含任何等待并将同步运行。

然后Bounce可以异步，而不是自己创建新任务，以防您不想阻塞主线程。

此外，GameHeight在当前 View 的状态下，它看起来像是一个常量或静态，因此我会在被调用的方法中直接引用它，而不是将它作为参数传递，但这只是个人意见。

另一件事是，确保在已经“弹跳”时不会多次调用弹跳。

而且我认为逻辑线圈可以简化一点。

这是我的建议：

public async Task Bounce()

{

  if(Bouncing) return;

  Bouncing = true;

  while(Ball.CurrentPosition.Y <= GameHeight)

  {

    Ball.CurrentPosition.Y++;

    StateHasChanged();

    await Task.Delay(500);

  }

// in case View has been resized, make sure Ball is not out of boundaries

  Ball.CurrentPosition.Y = GameHeight;

  StateHasChanged();

  Bouncing = false;

}