手动设置pan.x和pan.y时动画svg pan

Question

我有一个动态生成的svg图像，我正在使用Ariutta的SVG-pan-缩放插件。当我双击svg图像时，我设置pan.x = centerOfScreenX，并将pan.y = centerOfScreenY设置为在屏幕中间对图像进行居中。ie：

$('.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元素。这似乎是正确的方法。但它需要一些工作才能完成。

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

有一个关于下一个版本的库的正在进行的讨论将更可扩展。这将允许编写插件。动画是其中的候选人之一。但要做到这一点需要一些时间(几个月)。

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

编辑

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

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

库内部使用requestAnimationFrame，所以您甚至可以每毫秒调用一次panBy，它不应该阻塞浏览器。