Question

javascript中是否有内置方法可以沿着您使用bezierCurveTo或quadraticCurveTo绘制的路径为对象（例如图像）设置动画？如果有帮助的话，我想要做的就是准确地为球的轨迹和着陆点设置动画。

Answer 1

javascript中是否有内置方式

不，抱歉。真的，这是简短的答案。没有，至少没有画布。

是一种在SVG中沿着路径制作动画的方法。实际上你可以沿着SVG制作动画并捕捉所有的x，y点，就像你在Canvas中使用的那样，尽管这可能效率很低。

另一种方法是将数学运算平分（分割）一个贝塞尔曲线，这恰好可以得到该曲线的中点。然后将两条较小的曲线平分。反复这样做，最终得到一个中点列表，您可以用它来绘制想要设置动画的对象的轨迹。

Answer 2

我知道这有点晚了，但我想这可能就是你要找的东西。

示例：http://joelb.me/scrollpath/ Git：https://github.com/JoelBesada/scrollpath

Answer 3

虽然浏览器支持仍然不稳定：您可以使用虚线。

所以如果你有绘图功能：

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更多地谈论它。

沿着bezierCurveTo或quadraticCurveTo动画

3 个答案: