重新加载循环组件

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 在当前视图的状态中似乎是一个常量或静态，因此我会在被调用的方法中直接引用它，而不是将其作为参数传递，但这只是个人意见。

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

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

这是我的建议：

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