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/sfallt2();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.