沿bezierCurveTo或quadraticCurveTo设置动画

Question

javascript中有没有一种内置的方法，可以让一个对象(比如图像)沿着你用bezierCurveTo或quadraticCurveTo绘制的路径生成动画呢？如果有帮助的话，我想要做的就是精确地动画球的轨迹和落点。

Answer 1

在javascript中有内置的方式吗？

不，对不起。真的，这是这里的简短答案。没有，至少在画布上没有。

不过，有一种方法可以在SVG中沿路径设置动画。实际上，您可以沿SVG设置动画，并在Canvas中使用时捕获所有的x，y点，尽管这可能效率很低。

另一种方法是计算等分(分割)一条bezier曲线，这恰好得到了该曲线的中点。然后将两条较小的曲线一分为二。一遍又一遍这样做，最终你会得到一个中点列表，你可以用它来绘制你想要设置动画的对象的轨迹。

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谈到了更多关于它的内容。