Animation 使用等效的Javascript SetTimeOut（）函数在Blazor.net上制作动画

问题: 在过去，我能够在Javascript中使用SetimeOut函数制作动画。 下面是一个球落下的代码：

var ball = <HTMLElement>document.getElementById("ball");
ball.setAttribute("style", "fill:blue");

var inc2: number = 0;
var timet = document.getElementById("timeT");
timet.setAttribute("y", "420");
//time=200 ms // 1m is 3780 pixel // 400 pixels are 2m / ball is falling from 2m // g=10m/s
fallt2();
var timet2 = document.getElementById("timeT2");
timet2.setAttribute("y", "440");
var tiem = new Date();
var mili = tiem.getMilliseconds();
var dated = Date.now();
function fallt2() {
    //while (inc2 <= 400) {
    let ii = 0; //200 ms in 8 then 25 ms // 400 px high
    //let slow = 3;

    for (; inc2 <= 400; inc2 += 2)//px //10
    {

        goodST2(inc2, ii);
        ii += 25;
    }
}

function goodST2(i: number, ii: number) {
    setTimeout(() => {
        ball.setAttribute("transform", `translate(0 ${i})`);
        var newdate = Date.now();
        var newdiff = newdate - dated;
        mili += 25;
        timet.innerHTML = mili.toString();

        timet2.innerHTML = newdiff.toString();
    }, ii);
}

所以，请帮助我使用一个.net标准函数，例如adeing.sleep在Blazor中制作动画。 谢谢

这就是我所尝试的：

@*<svg width="12cm" height="4cm" viewBox="0 0 1200 400">*@
    @*<button class="btn btn-primary" @onclick="transformar">Ver caer</button>*@
    <button class="btn btn-primary" @onclick="tt">Ver caer</button>
    <div>
        <svg viewBox="0 0 100 100">
            @*<circle cx="10" cy="@c1" r="5" fill="blue" stroke="black" stroke-width="0.2" transform="translate(10,@c1)">*@
            <circle cx="10" cy="8" r="5" fill="blue" stroke="black" stroke-width="0.2" transform="translate(10,@c1)">
                @*<animate attributeName="cy" attributeType="XML" begin="0s" dur="4s" from="8" to="28" fill="remove" />*@
            </circle>

            <rect x="10" y="25" width="4" height="4" fill="red" stroke="black" stroke-width="0.5">
                @*<animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite"></animate>*@
            </rect>
        </svg>
    </div>
</div>
@{tt(); }
    @code {
        private void transformar()
        {
            c1++;
        }
        // Demonstrates how a parent component can supply parameters
        [Parameter]
        public string Saludos { get; set; }
        string Saludos2 = "Hola Diego";
        public bool bA { get; set; }
        [Parameter] public  EventCallback<bool> TransitionEnded { get; set; }
        int c1 = 8;

        void tt()
        {
            System.Timers.Timer t = new System.Timers.Timer();
            t.Interval = 500;
            t.AutoReset = true;
            t.Enabled = true;
            t.Start();
            for (var i = 0; i < 16; i++)
            {
                t.Elapsed += ett;

            }
            t.Stop();
        }

        public void ett(Object source, System.Timers.ElapsedEventArgs e)
        {
            caer2();
        }

        void caer2()
        { c1++; }
        //SetTimer(c1);
        //public int c1 { get; set; } = 8;
        //for(var i=10;i<22;i++>)
        //    {
        //    }
        private static System.Timers.Timer aTimer;
        private static void SetTimer(int c1)
        {
            aTimer = new System.Timers.Timer(500);
            //aTimer.Elapsed += caer(c1); //OntimedEvent;
            aTimer.AutoReset = true;
            aTimer.Enabled = true;
        }
        //private static void caer(Object source, System.Timers.ElapsedEventArgs e, int s)
        private void caer()
        {
            int dormir = 0;
            for (var i=0;i<16;i++)
            {
                c1++;
                //SurveyPrompt2.c1 c1++;
                //System.Timers.Timer(500);
                //Task.Run(()=>CaerAnimate());
                //System.Threading.Thread.Sleep(200);
                //esperar(dormir+200);
                //Task.WaitAll(Task.Delay(100));

            }
        }
        void esperar(int d)
        {
            System.Threading.Thread.Sleep(d);
        }

        async Task CaerAnimate()
        {
            bA = !bA;
            await Task.Delay(10600);
            await TransitionEnded.InvokeAsync(bA);
            //var tcs = new TaskCompletionSource<bool>();
            //DateTime endT = DateTime.Now.AddMilliseconds(3000);
            //while (DateTime.Now<endT)
            //{
            //await Task.Delay(10000000);
            //c1++;
            //}
            //return tcs.Task;
            //await System.Threading.Thread.Sleep(100);

        }


    }

---

我尝试了定时器，但不工作，或者我不知道如何实现。提前感谢。

我删除了所有额外的代码位以保持干净

河狸 @代码{ int c1=8； 专用静态系统定时器定时器定时器； 无效tt { 如果aTimer为空 { aTimer=新System.Timers.Timer500； aTimer.appeased+=sender，args=>{c1=c1>16-8:c1+1；invokeasyncstatechanged；}； aTimer.AutoReset=true； aTimer.Enabled=true； } 其他的 { 停下来； a.处理； aTimer=null； } } } 您可以使用计时器，但在经过的事件中，您需要调用StateHasChanged来标记要呈现的组件-您应该通过InvokeAsync来完成这一操作，以确保它发生在呈现器上下文中

请在此处查看它的实际操作：