Question

是否可以将两条线合并为一条并将其动画为单曲线？这是我的一个例子：

const line1 = 'M0,100V100H0V0';
const line2 = 'M-200,200V200H0V100';

const path = d3.select('#line')
    .attr('d', line1 + line2);
const pathLength = path.node().getTotalLength();

function _interpolateDashOffset () {;
  const interpolate = d3.interpolateNumber(pathLength, pathLength * 2);
  return () => time => interpolate(time);
}

d3.select('#line')
  .attr('fill', 'none')
  .attr('stroke', 'black')
  .attr('stroke-width', 8)
  .attr('stroke-dasharray', `${pathLength} ${pathLength}`)
  .transition()
  .ease(d3.easeLinear)
  .duration(2000)
  .attrTween('stroke-dashoffset', _interpolateDashOffset())
  .on('end', () => {
    console.log('path animation ended');
});

Demo: jsfiddle

（它使用es6，只有FF和chrome可以打开没有错误）

如您所见，线条合并为一个而非动画。但是动画在底部绘制一条线，然后在顶部绘制一条线。有可能以某种方式将这些线组合成一条线并将其作为一条线进行动画制作吗？

Desired behavior: jsfiddle

（它只有一行，我希望两个人用组合线看到这种行为）

由于

Answer 1

有可能。我认为令人困惑的是，在SVG中，坐标系原点位于左上角，这意味着y向下增加。此图表应该有用：https://sarasoueidan.com/blog/svg-coordinate-systems/#initial-coordinate-system

这两条路径应该正确设置动画：

const line1 = 'M0,300V-100';
const line2 = 'M0,-200V-200';

Here's a working jsfiddle

此外，您正在向后设置动画。也就是说，您从下到上绘制路径，但动画从上到下运行。我不确定这是否有意。

Answer 2

可能的解决方案之一是正确合并线条：例如，我们有

const line1 = 'M0,100V100H0V0';
const line2 = 'M200,200V200H0V100';
const line3 = 'M200,300V300H200V200'

就我而言，我正在画一条从下到上的路径。我正在走最后一条路，我需要知道line3的最终坐标，而不是合并没有M的行（moveto）：line3 + line2 (without 'M') + line1 (without 'M')。结果我有：

const mergedLine = 'M200,300V300H200V200 V200H0V100 V100H0V0';

Final solution: jsfiddle

D3：将合并的行绘制为单个

2 个答案: