Using the equivalent Javascript SetTimeOut() function to do animations on Blazor .net

Question

Question: In the past I have been able to animate using SetimeOut function in Javascript. Here is a code of a ball falling:

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

So please help me one .net standard function that such as Theading.sleep to do animations in Blazor. Thanks,

This is what I tried:

@*<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);

        }


    }

I tryed Timer, but is not working or I don't know how to implemented. Thanks in advance.

Answer 1

I removed all the extra bits of code to keep it clean

<button class="btn btn-primary" @onclick="tt">Ver caer</button>
<div>
    <svg viewBox="0 0 100 100">
        <circle cx="10" cy="8" transform="translate(10,@c1)" r="5" fill="blue" stroke="black" stroke-width="0.2" >
        </circle>

        <rect x="10" y="25" width="4" height="4" fill="red" stroke="black" stroke-width="0.5">
        </rect>
    </svg>
</div>

@code {
    int c1 = 8;

    private static System.Timers.Timer aTimer;
    void tt()
    {
        if (aTimer is null)
        {
            aTimer = new System.Timers.Timer(500);
            aTimer.Elapsed += (sender,args) => { c1 = c1 > 16 ? 8 : c1+1; InvokeAsync(StateHasChanged); };
            aTimer.AutoReset = true;
            aTimer.Enabled = true;
        }
        else
        {
            aTimer.Stop();
            aTimer.Dispose();
            aTimer = null;
        }
    }

}

You can use a timer, but in the Elapsed event, you need to call StateHasChanged to flag the component to be rendered - and you should do this via InvokeAsync to make sure it happens in the Renderers context.

See it in action here : https://blazorfiddle.com/s/9jbd8f34