Не срабатывает вызов функции JQUERY?

Question

[Analka]

есть код, после завершения таймера должна срабатывать requestAnimationFrame(animate) - отрисовка canvas, но она не срабатывает

//Таймер обратного отсчета
    let waitTimeShow = $('#waitTimeShow');
    let mutShow = $('#mutShow');

    let timerTime = 5;
    waitTimeShow.html(timerTime + "s");
    function timer(){
        timerTime--;
        waitTimeShow.html(timerTime + "s");
        if (timerTime == 0){
            requestAnimationFrame(animate);
            waitTimeShow.addClass('hide');
            mutShow.removeClass('hide');
            setTimeout(function(){},1000);
        } else {
            setTimeout(timer,1000);
        }
    }
    setTimeout(timer,1000);  

     function lerp(a,b,t) {
      return a + (b-a)*t 
    }

    function animate(t){
      t /= 2000; // Время анимации
      if (t > 1) return;
      let x = lerp(10, 590, t)
      let y = lerp(390, 100, t)
      ctx.clearRect(40, 40, canvas.width, canvas.height - 70);
      arrow({x: 40, y: canvas.height - 40}, {x, y}, 40);
      requestAnimationFrame(animate)
    }

    function arrow (p1, p2, size) {
      var angle = Math.atan2((p2.y - p1.y) , (p2.x - p1.x));
      var hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));

      ctx.save();
      ctx.translate(p1.x, p1.y);
      ctx.rotate(angle);

      // line
      ctx.strokeStyle = '#e4c358';
      ctx.lineWidth = "8";
      ctx.beginPath();  
      ctx.moveTo(0, 0);
      ctx.lineTo(hyp - size, 0);
      ctx.stroke();

      // triangle
      ctx.fillStyle = '#e4c358';
      ctx.beginPath();
      ctx.lineTo(hyp - size , size/2);
      ctx.lineTo(hyp, 0);
      ctx.lineTo(hyp - size, -size/2);
      ctx.fill();

      ctx.restore();

      ctx.fillStyle = '#e4c358ab';
      ctx.beginPath();
      ctx.lineTo(40,canvas.height - 40);
      ctx.lineTo(p2.x, p2.y);
      ctx.lineTo(p2.x,canvas.height - 40);
      ctx.fill();
    }

Comments

[Somewhere Intech]

В консоль что нибудь сыпет?
Не в том ли проблема что вы не передаёте параметр t?
function animate(t){

[Analka]

Johnny Lowhunter, пробовал requestAnimationFrame(animate(t));, но без анимации рисует линию и так animate(t) - вообще не работает

[RAX7]

Analka, requestAnimationFrame сам передаст в коллбэк время, он у тебя правильно используется.
А вот время анимации t /= 2000 ты рассчитываешь не верно.

[Analka]

RAX7, а как правильно?

[RAX7]

Analka, ну примерно так

let begin;
const duration = 2000;

function animate(now) {
  begin = begin || now;
  const t = Math.min(1, (now - begin) / duration); // Время анимации [0, 1]
  let x = lerp(10, 590, t)
  let y = lerp(390, 100, t)
  ctx.clearRect(40, 40, canvas.width, canvas.height - 70);
  arrow({x: 40, y: canvas.height - 40}, {x, y}, 40);
  
  if (t === 1) return;
  requestAnimationFrame(animate)
}

[Analka]

RAX7, теперь вот так отображается https://codepen.io/maxim-drozdow/pen/rNNJXej