Анимировать по BezierCurveTo или quadraticCurveTo

Question

Есть ли в javascript встроенный способ анимировать объект (например, изображение) по пути, который вы нарисовали с помощью bezierCurveTo или quadraticCurveTo? То, что я пытаюсь сделать, это точно оживить траекторию и точку приземления шара, если это поможет.

Answer 1

Я знаю, что это немного поздно, но я думаю, что это может быть то, что вы ищете.

Пример: http://joelb.me/scrollpath/ Git: https://github.com/JoelBesada/scrollpath

Answer 2

Есть, хотя поддержка браузера все еще нестабильна: вы можете использовать пунктирные линии.

Итак, если у вас есть функция рисования:

function draw() {
  ctx.beginPath();
  ctx.moveTo(20,20);
  ctx.quadraticCurveTo(100,100,30,90);
}

Вы можете настроить анимацию следующим образом:

var start = null;
var duration = 1000;
var length = 150; // I'm guessing here, but you can calculate it

function step(timestamp) {
  if(start === null) { start = timestamp; } 
  canvas.width = canvas.width;
  var progress = Math.min((timestamp - start)/duration,1);
  ctx.setLineDash([0,length,3,0]);
  ctx.lineWidth = 3;
  ctx.lineDashOffset = progress * length;
  draw();
  ctx.stroke();
  if(progress < 1) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

Вы просто должны убедиться, что начальная черта больше, чем вся ваша линия, а затем анимировать смещение вдоль, чтобы одиночная короткая черта (ваша «точка») скользила вдоль вашего пути. Вы можете округлить его с lineCap. Рабочая демоверсия: http://jsbin.com/UFOTavoX/1

Поддержка setLineDash и lineDashOffset не универсальна. http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html говорит больше об этом.

Answer 3

Есть ли встроенный способ в javascript

Нет, извините.На самом деле это короткий ответ здесь.Нет, по крайней мере, в canvas.

Там - это способ анимировать вдоль пути в SVG.На самом деле вы можете анимировать вдоль SVG и захватывать все точки x, y, когда вы собираетесь использовать в Canvas, хотя это, вероятно, действительно неэффективно.кривая Безье, которая по совпадению дает вам середину этой кривой.Затем разделите две меньшие кривые.Делайте это снова и снова, и в конечном итоге вы получите список средних точек, которые вы можете использовать для построения траектории объекта, который вы хотите анимировать.