Snap.js 沿指定路径移动 SVG 对象

Question

我正在尝试使用 Snap.js 为我使用 Inkscape 创建的 SVG 制作动画。但我发现的问题是，当尝试为对象设置动画时，它没有正确响应。

Svg 是这样加载的

var s = Snap("#svgB");
var g ;
var group = s.g();

var myPathB = s.path("M246,1723.4c-27.2-18-76.8-50.3-61.3-73.2c15.5-22.8-4.9-42.7-15.8-34.8 c-31.9,3.9-16.6-45.2-23.9-64.6c-4.5-11.9-30.3-38.4-11.6-45c21.6-20.5-20.4-25.7-4.4-28.1c16-2.4,14.3-22.7-3.3-30 c-9.5-4-30.3-69.9-7.9-74.1c22.3-4.2,6.1-65.6,8.8-86.7c3.6-27.6,19.1-63.4,34.8-51c15.7,12.5,17.6,14.2,20.7-8 c3-22.2,14.8-21.8,20.9-5.7c6.1,16.2,55.8-14.1,75.6-37.3c46.5-54.5,22.3-50.4-2-68.5c-30.9-23,20-100,20-100").attr({
  fill: "none",
  strokeWidth: "17",
  stroke: "#FFF",
  strokeMiterLimit: "10",
  strokeLinecap: "round",
  strokeDasharray: "10",
  strokeDashOffset: "1000"
});
  
 
 Snap.load("car.svg", function (f) {
    g=  f.select("g");
    g.drag(function () {
          animateAlongPath(myPathB,group,0,100330);  
 
                }); 
 
                s.append(group);
                g.drag();
    
    
 });

我用的函数是这个

function animateAlongPath( path, element, start, dur ) {
 var len = Snap.path.getTotalLength( path );
setTimeout( function() {
        Snap.animate( 0, len, function( value ) {
        var movePoint = Snap.path.getPointAtLength(path,value);
  console.log(movePoint);
        element.transform('t' + movePoint.x + ',' + movePoint.y)  ;   
}, dur,mina.easeinout); 
 });
}

代码笔：http://codepen.io/georgegijo/pen/mEdEYK

Answer 1

您可能需要提供一个工作示例，因为上面的代码不足以进行测试。

我怀疑最初的问题可能出在这一行上...

element.attr({ x: movePoint.x, y: movePoint.y });

我注意到在代码的前面，该元素称为 'g'。这是因为该元素是 'group' 元素吗？

如果是，则不能使用 x,y，因为它们不是组元素的有效属性。您将需要使用转换。所以你会改变代码看起来像...

element.transform('t' + movepoint.x + ',' + movepoint.y )

't'是平移的，如果你想旋转movepoint.alpha，你也可以在后面加一个'r'带角度。

如果它不是一个组元素，例如它是一个矩形，那么你可以忽略上面的内容，我会编辑问题以包括实际发生的事情、任何错误等，还可能包括被移动的对象等等，所以我们可以做一个测试。

如果它是由 inkscape 创建的 'svg' 元素本身，您可能希望将其附加到 'group' 元素（如果尚未完成），然后按照上述步骤作为 'svg' 元素并不真正支持转换（所以也许 x,y 可以工作）。

Snap.js 沿指定路径移动 SVG 对象

Snap.js Moving SVG Object Along a Specified Path

snap.svg

svg-animate