在手动设置平移x和平移y时设置svg平移动画

Question

我有一个动态生成的svg图像，我正在使用Ariutta的svg平移-缩放插件。当我双击一个svg图像时，我将pan.x=centerOfScreenX和pan.y=centerOfScreenY设置为将图像置于屏幕中间。即：

$('.svg').dblclick(function(){
    zoom.pan({'x':centerOfScreenX, 'y':centerOfScreenY });
});

目前，这会导致图像突然移动到屏幕中心。有没有一种方法可以设置平移位置的动画，使双击的图像沿着一条路径移动到屏幕中心？

---

Bumbu提出了两条解决方案路径（见下面的答案），我尝试了第一条。然而，我的尝试没有奏效，我不知道为什么。

// centerOfScreenX and centerOfScreenY are the correct values that pan.x and  
// pan.y should have to center the svg in the middle of the screen 
// xInterval and yInterval break the distance between the current pan     
// position and the desired pan position into 10 steps
var xInterval = (centerOfScreenX - pan.x)/10;
var yInterval = (centerOfScreenY - pan.y)/10;
while( pan.x !== centerOfScreenX && pan.y !== centerOfScreenY ){
    if(pan.x !== centerOfScreenX){
        pan({'x': pan.x + xInterval })
    }
    if(pan.y !== centerofScreenY){
        pan({'y': pan.y + yInterval })
    }
}

当我尝试运行此代码时，窗口会冻结，除非我关闭窗口并重新加载，否则我无法再与我的应用程序交互。我的猜测是，我正在以某种方式触发一个无限循环。

Answer 1

目前还没有简单的动画制作解决方案。还有一个类似的问题（关于设置缩放动画）。答案是：

目前不支持此类功能。你可以用两种方法：

• 使用一个双库（或者编写自己的函数），只需在小迭代中多次调用pan。这可能很慢，但这是许多库在实现动画（例如jQuery）时所做的
• 使用SVG animateTransform元素。这似乎是正确的方式。但它需要一些工作才能完成

实际上，您可以尝试通过收听zoom来实现第二个解决方案事件，取消它们并将animateTransform手动添加到SVG中。动画完成后，再次调用缩放，但这次不要取消它（需要更新库内部状态）。

目前正在讨论下一个更具可扩展性的库版本。这将允许编写插件。动画是候选之一。但这需要一些时间（几个月）。

如果您能找到一个临时解决方案，请在这里或github上共享，我们很乐意更新库或将其集成到下一个版本中。

编辑

我添加了一个如何实现这种动画的简单示例。你可以在demo/simple-animation.html 中找到它

我在那里用了一个简单的音程。更高级的版本应该考虑自上次间隔调用以来经过的时间，并为pan发送正确的数量。但即使这样，它也能很好地工作。

库内部使用requestAnimationFrame，因此即使每毫秒也可以调用panBy，而且它不应该阻塞浏览器。