1

есть код, после завершения таймера должна срабатывать 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();
    }
7
  • непонятно, что за объект ctx. нигде не объявлен. requestAnimationFrame, который вызывается через 5 секунд, тоже не объявлен. также рекомендую использовать console.log, таймер вроде правильно написан, но мало ли какая ошибка в логах. 6 ноя 2019 в 10:54
  • в логах нет ошибок
    – Corona
    6 ноя 2019 в 10:55
  • в начало requestAnimationFrame вставьте console.log('requestAnimationFrame'). так вы точно будете уверены, что проблемы с таймером нет. а проблема, скажем в canvas. 6 ноя 2019 в 10:56
  • если в таймере вставлю так requestAnimationFrame(animate(2000)), то график появляется без анимации и в консоле ругается, что лишний аргумент 2000
    – Corona
    6 ноя 2019 в 11:00
  • ну наверное потому, что requestAnimationFrame принимает на вход функцию, а не ее значение. 2000 нужно передавать отдельным аргументом (если он предусмотрен). а вобще трудно что-то сказать, не видя полный код (нет requestAnimationFrame). 6 ноя 2019 в 11:05

1 ответ 1

0

Во-первых, при вызовые функции animate переменная t у вас всегда больше 1, поэтому происходит выход из функции. Во-вторых, в предоставленом фрагменте кода отсутствует определение ctx, поэтому даже если убрать строчку if (t > 1) return;, то получаем ReferenceError: ctx is not defined.

6
  • а как решить проблему с t ?
    – Corona
    6 ноя 2019 в 10:54
  • наверное эта строчка имеет смысл, раз ее написали ) вобще интересно приведенный выше код когда-нибудь работал? 6 ноя 2019 в 11:09
  • @Corona а за что отвечает t?
    – STY
    6 ноя 2019 в 11:55
  • я вот и пишу его) смысл такой, по истечению таймера, запустить построение диаграммы привязанной к системе координат, пока это тестово, но вообще нужно по оси y сделать секунду, по оси X коэффициенты как здесь wink.org/?r=cryptofriend#/platform/dice-moon
    – Corona
    6 ноя 2019 в 12:00
  • t - для анимации прорисовки графика, чтобы не сразу показывался
    – Corona
    6 ноя 2019 в 12:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.