Question

我需要用SVG创建速度表。当速度改变时，旋转针头以指示测量仪上的适当速度，并且在针尖之后围绕测量仪的圆周绘制弧线。

我试图使用三个不同的库（VelocityJS，SnapSVG和GSAP）来解决针旋转的问题，但我还没有成功找到有效的实现。

我最初的尝试是 Velocity 。我让它在IE以外的所有浏览器中工作。在IE中，所有更改transform-origin的尝试均失败。

然后我尝试了 SnapSVG 和 GSAP ，但有两个问题不断出现：

针头的旋转大多运作良好，但偶尔会在测量仪下方以错误的方向旋转，毫无疑问是在距离点最短的距离之后。
在IE中，stroke-dashoffset会导致无法预测的结果。

我创建了一个 CodePen ，显示了这三个库中的任何一个驱动时的衡量标准。

任何帮助？

Answer 1

Snap版本对我来说很好，但我猜测所提到的问题是stroke-dashoffset，我无法在IE中测试。

如果不能使用stroke-dashoffset，则有一种可能性是每次都重建路径字符串。使用更多的资源，但我认为可能没问题。

否则，您可以尝试绘制与其上方的弧相同大小的蒙版或剪辑，并为其设置动画，但它也将使用更多资源。

这是一个Snap解决方案，每次都重建弧形路径。

修改后的代码......


var arc = Snap.select('#gauge-arc');
var arcLength = arc.getTotalLength();
var arcString = arc.attr('d');
arc.attr({ d: ''})

Snap.animate(0,arcLength, function( val ) {
      var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
      arc.attr({ d: arcSubPath });
    }, 100, function() {
      Snap.animate(arcLength,0, function( val ) {
          var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
          arc.attr({ d: arcSubPath });
      },500);

    })
  },

Example fiddle（请注意，其他按钮可能无效，因为我已删除了svg标记中的stroke-dashoffset。）

带JS的SVG动画 - 与transform-origin和stroke-dashoffset有关

1 个答案: