Question

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

像这样加载Svg

＆＃13;

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();
				
				
	});

＆＃13;

我使用的功能就是这个

＆＃13;

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); 
 });
}

＆＃13;

Codepen：http://codepen.io/georgegijo/pen/mEdEYK

Answer 1

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

我怀疑最初的问题可能是这条线虽然......

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

我注意到在代码的前面，该元素被称为＆＃39; g＆＃39;。这是因为元素是一个＆＃39;组＆＃39;元素？

如果是这样，您不能使用x，y，因为它们不是组元素的有效属性。您需要使用变换。因此，您可以将代码更改为......

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

＆＃39;＆＃39;是翻译，你也可以添加＆＃39; r＆＃39;稍后如果你想通过movepoint.alpha旋转它。

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

如果它是一个＆＃39; svg＆＃39;元素本身由inkscape创建，您可能希望将其附加到＆＃39;组＆＃39;元素，如果还没有完成，并按照上面的说明，作为＆＃39; svg＆＃39;元素并不真正支持变换（所以也许x，y可以工作）。

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

1 个答案: