上下移动水平线

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上，它会更容易帮助。