javascript - d3.js 形状动画的技巧

Question

您可以看到我在 this 中的工作示例

我怎样才能让它不那么生涩？

代码的工作原理如下:

我有一个通过 requestAnimationFrame 调用自身的方法

  animateCircle(state, direction) {
    this.drawSineGraph(state, direction);

    requestAnimationFrame(this.animateCircle.bind(this, state, direction));
  }

这又调用了一个drawSineGraph函数:

  drawSineGraph(state, direction) {
    d3.select('.sine-curve').remove();

    const increase = 54 / 1000;

    state.sineIncrease = state.sineIncrease || 0;

    state.sineIncrease += increase;

    const sineData = d3.range(0, state.sineIncrease)
            .map(x => x * 10 / 85)
            .map((x) => {
              return {x: x, y: Math.sin(x)};
            });

    state.nextCoord = {x: state.xScale(_.last(sineData).x), y: state.yScale(Math.sin(_.last(sineData).y) + 1)};

    const sine = d3.svg.line()
            .interpolate('monotone')
            .x( (d) => {return state.xScale(d.x);})
            .y( (d) => {return state.yScale(d.y + 1);});

    state.xAxisGroup.append('path')
      .datum(sineData)
      .attr('class', 'sine-curve')
      .attr('d', sine);
  }

它增加了一个计数器并将正弦波绘制到该点，但效果非常不稳定。

如何在正弦波扩展时实现平滑运动？

Answer 1

看看生成代码，您一遍又一遍地重新创建每个曲线段。重叠超过 100 条曲线。您必须在上一个段的末尾添加一个段。问题在于:

 animateCircle(state, direction) {
    this.drawSineGraph(state, direction); // <--recreate the curve from the origin

    requestAnimationFrame(this.animateCircle.bind(this, state, direction)); 
  }