上下移动水平线

Question

我有一个svg类型的温度计。我想用Snap创建一些动画。我可以使用给定值为文本设置动画，但无法为屏幕截图中的虚线设置动画，以按照给定值移动。我该怎么办？

这是我的代码

const svg = Snap(this.svg);
    const { color } = this.state;
    svg.line(55, 366, 90, 366).attr({
      id: 'marker-line',
      stroke: color,
      strokeDasharray: '2 4',
      strokeWidth: '1'
});



 const animateMarker = (value, svg, marker, lastValue) => {
      // Snap.animate(value);
      const markerLine = svg.select('#marker-line');
      if (markerLine) {
        Snap.animate(
          lastValue || 0,
          value,
          val => {
            // markerLine.attr({ y1: 366-val });
            marker.textContent = roundOffDecimalDigit(val, 2); // eslint-disable-line no-param-reassign
          },
          400
        );
      }
    };

Answer 1

没有剩下的代码，很难说清楚。你的代码看起来不错，只是它只设置了一个y坐标，我假设你想要设置它们。例如

Snap.animate(lastValue,value, function( val ) { markerLine.attr({ y1: val, y2: val }); }, 400 )

如果仍然无法正常工作，请尝试将其放在jsfiddle上，这将更容易提供帮助。