我正在嘗試使用 Blazor 為圓形 svg 制作動(dòng)畫。我已經(jīng)在俄羅斯方塊游戲中看到了這一點(diǎn)，所以我可能只是想不出如何讓它發(fā)揮作用。<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; }這確實(shí)有點(diǎn)工作。每次我按下按鈕時(shí)，我的球都會跳到新位置。有什么方法可以讓它在循環(huán)時(shí)重新加載嗎？我試圖看到我的球在屏幕上移動(dòng)。
1 回答
慕沐林林
TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊
基本上通知Blazor在循環(huán)內(nèi)更新 UI 就足夠了：
StateHasChanged();
但是東西很少。首先，該SetPosition方法不包含任何等待并將同步運(yùn)行。
然后Bounce可以異步，而不是自己創(chuàng)建新任務(wù)，以防您不想阻塞主線程。
此外，GameHeight在當(dāng)前 View 的狀態(tài)下，它看起來像是一個(gè)常量或靜態(tài)，因此我會在被調(diào)用的方法中直接引用它，而不是將它作為參數(shù)傳遞，但這只是個(gè)人意見。
另一件事是，確保在已經(jīng)“彈跳”時(shí)不會多次調(diào)用彈跳。
而且我認(rèn)為邏輯線圈可以簡化一點(diǎn)。
這是我的建議：
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;
}
- 1 回答
- 0 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消