Snap.svg圆形路径动画返回NaN的路径数据错误

Question

我正在使用 snap.svg 创建一个带有边框的圆形按钮，该边框在鼠标悬停时缠绕在按钮周围，在鼠标移出时展开，但我不得不将其拼凑在一起。

我用作模板的原始实现使用步进函数作为 Snap.animate 中的 setter 函数，但我运行遇到了 mouseout 事件会留下残差的问题阻止路径，所以我从第二个 "step" 变量（第 55 行）添加了“-1”。

path: Snap.path.getSubpath(loop, 0, step-1)

js的相关部分

var hoverbpath =  s.path({
  path: Snap.path.getSubpath(loop, 0, 0),
  stroke: "#000",
  fillOpacity: 0,
  strokeWidth: 0,
  strokeLinecap: "square"
});

ctabtn.hover(function(e){
  Snap.animate(0, loopLength,
    function(step){
      hoverbpath.attr({
      path: Snap.path.getSubpath(loop, 0, step),
      strokeWidth: 11
    });
  }, 250, mina.easeIn);
ctabtn.attr({fill: "l(0, 0, 1, 1)#000-#333"});
});

hoverbpath.mouseout(function(e){
  Snap.animate(loopLength, 0,
    function(step){
      hoverbpath.attr({
      path: Snap.path.getSubpath(loop, 0, step-1),
      strokeWidth: 11
    });
  }, 250, mina.easeOut);
ctabtn.attr({fill: "l(0, 0, 1, 1)#333-#000"});
});

工作正常，但每次鼠标移出事件都会返回错误："Error: Invalid value for attribute d="M74.7,5.2CNaN,NaN,NaN,NaN,NaN,NaN"e @ snap.svg-min.js:18"

我想知道按钮和动画的实现是否可以优化，如果不能，那么如何修复错误。

谢谢！

Answer 1

从 this example 借用代码，它只是在 mouseout 处理程序的末尾添加一个回调以将路径设置为 strokeWidth=0。所以它不会删除最后一小块，它只是隐藏它，我认为这很好。

第一步：删除您添加的 step-1 hack，只需在两个处理程序中使用 step。然后像这样调整你的 JS:

hoverbpath.mouseout(function(e){
  Snap.animate(loopLength, 0,
    function(step){
      hoverbpath.attr({
        path: Snap.path.getSubpath(loop, 0, step),
        strokeWidth: 11
      });
    }, 250, mina.easeOut, function() {
      hoverbpath.attr({
        path: Snap.path.getSubpath(loop, 0, 0),
        strokeWidth: 0
      });
    });
ctabtn.attr({fill: "l(0, 0, 1, 1)#333-#000"});
});

JSFiddle：https://jsfiddle.net/aha24p0h/1/

Snap.svg圆形路径动画返回NaN的路径数据错误

Snap.svg circular path animation returning path data error of NaN

javascript

animation

svg

snap.svg