Colleagues, what do you think, how can I slowly slow down the circle drawing at the end of the animation? Experience javascript = junior.

PS Updated js, added animation function, found here http://kodhus.com/easings/ Understand how to use it correctly

let canvas = document.querySelector('#cvs'); let ctx = canvas.getContext('2d'); let levelOfKnowledge = document.querySelector('#percent'); let nameOfKnowledge = 'HTML'; //имя знания let pi = Math.PI; let coefficient = pi * 2 / 100; let min = 0; //Ρ‚ΠΎΡ‡ΠΊΠ° старта Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ let maxPercent = 78; //ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ Π·Π½Π°Π½ΠΈΠΉ let circleStyle = 50; //функция которая Π²Ρ€ΠΎΠ΄Π΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‡ΡŒ с ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ // t: current time/currnet step // b: starting position // c: amount of change (end - start) // d: total animation time/steps function easeInOutQuart(t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } let start = 0; let frameRate = 60 / 1000; let duration = 1000; let currentStep = 0; let newStep = 0; let draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); currentStep++; newStep = easeInOutQuart(currentStep, start, start - maxPercent, frameRate * duration); //Π·Π°ΠΏΠΈΡˆΡƒ Π² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Ρ‡Ρ‚ΠΎ Π±Ρ‹ Ρ‡ΠΈΡ‚Π°Π»ΠΎΡΡŒ Π»ΡƒΡ‡ΡˆΠ΅ ctx.beginPath(); ctx.strokeStyle = "hsl(190, 80%," + circleStyle + "%" + ")"; ctx.lineWidth = "30"; ctx.arc(150, 150, 100, 0, min / newStep, false); // ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ здСсь ctx.stroke(); levelOfKnowledge.innerHTML = `${nameOfKnowledge} ${Math.round(min)} %`; min++; circleStyle--; if (min <= maxPercent) { requestAnimationFrame(draw); } else { // alert(`Мой скилл ${nameOfKnowledge} Ρ€Π°Π²Π΅Π½ ${maxPercent}% βœ”`) } }; draw(); 
 canvas { border: 1px solid #000; } #percent { color: green; position: absolute; left: 20px; bottom: 20px; } .doghnuts { display: flex; flex-direction: row; align-items: center; position: relative; } 
 <div class="doghnuts"> <canvas width="350" height="350" id="cvs"></canvas> <div id="percent"></div> </div>

Who is comfortable on the codepen: https://codepen.io/likeavenus/pen/XGdpzN

Ps Found such a function , it seems like it should help, but it does not work as it should. The description says:

t: current time / currnet step

b: starting position

c: amount of change (end - start)

d: total animation time / steps

 function easeInOutQuart(t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }
  • need to build on time and not rely on asynchronous calls - Stranger in the Q

0