D3.js:设置贝塞尔曲线的动画

D3.js: Animating a bezier curve

本文关键字：曲线 动画 js 设置 D3      更新时间：2023-09-26

我正在使用以下代码为工作流设计生成bezier curve：

    group.append("svg:path")
  .attr("d","m " +(300*k) +",0 q "+(z*150)+",-300,"+z*300+", 0")
      .attr("fill","blue")
  .style("stroke", "blue").attr("stroke-width",2)
  .attr("marker-end", "url(#arrow)").attr("fill","none").append("text");

我想在曲线上实现这个动画。任何建议都可能有所帮助。

这里是一个动画Bezier曲线的示例。你可以检查他在该页面上使用的代码，但基本上，诀窍是正如他们所说的。。。

对于二阶或二次Bézier曲线，首先我们沿着三个控制点之间的线找到两个t的中间点。然后，我们再次执行相同的插值步骤，并沿着这两个中间点之间的线找到另一个t的点。绘制最后一点可以得到一条二次Bézier曲线。对于更高的订单，可以重复相同的步骤。

相关文章：