Как сделать анимацию отрисовки линий в canvas?

Question

[annnger]

Написал функцию, которая рисует в канвасе стрелку на координатной прямой от x0 до x1: https://gyazo.com/38ecb65bfec50bf22e25c377430b1e0b . Как сделать, чтобы стрелка появлялась не сразу, а как-будто ее рисуют от руки? Внятных туториалов не нашел, подскажите, в какую сторону копать.

Comments

[Alex]

во первых не работает ссылка

[Alex]

во вторых код лучше показывать а не картинку

Answer 1

[annnger]

function drawCurvedArrow(start, 
                         end, 
                          curveHeigh
) {
  var x0 = 35
  var y0 = 175;
  var divValue=39;
  var arrowWidth = 15;
  var startPointX = x0+start*39;
  var endPointX = x0+end*39
  ctx.save();
  ctx.strokeStyle = 'tomato';
  ctx.lineWidth = 3;
  var curveCenter = (startPointX+endPointX)/2
  var arrowAngle = Math.atan2(curveCenter - endPointX, curveHeigh - y0) + Math.PI;
  ctx.beginPath();
  ctx.moveTo(startPointX, y0);
  ctx.quadraticCurveTo(curveCenter, curveHeigh, endPointX, y0);

  ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6)));
  ctx.lineTo(endPointX, endPointY);

  ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6)));
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}

Comments

[Alex]

https://codepen.io/pen/

Answer 2

[kulaeff]

Вам надо курить requestAnimationFrame.

Comments

[Alex]

не обязательно, можно и таймаутом.

[kulaeff]

Можно и таймаутом (колхоз), но requestAnimationFrame будет правильнее и плавнее.