javascript - 手动设置 pan.x 和 pan.y 时对 svg pan 进行动画处理

Question

我有一个动态生成的 svg 图像，我正在使用 Ariutta 的 svg-pan-zoom 插件。当我双击 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

目前还没有一种简单的方法来制作动画。 有一个similar question (关于动画缩放)。那里的答案(调整为这个)是:

Currently such functionality is not supported. You could do it in 2 ways:

• Use a twin library (or write you own function) and just call pan in small iterations multiple times. This may be slow but it is what many libraries do when implementing animation (eg. jQuery).
• Use SVG animateTransform element. It seems to be the right way. But it needs some work to get it done.

You can actually try to implement second solution by listening to zoom events, canceling them and adding animateTransform manually to the SVG. When your animation is done, call zoom again but this time don't cancel it (necessary to update library inner state).

有一个ongoing discussion关于库的下一个版本将更具可扩展性。这将允许编写插件。动画是候选者之一。但这需要一些时间(几个月)。

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

编辑

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

我在那里使用了一个简单的间隔。更高级的版本应考虑自上次间隔调用以来耗时并发送正确的平移量。但即使这样，它的效果也很好。

该库内部使用 requestAnimationFrame，因此您甚至可以每毫秒调用 panBy，并且它不会阻塞浏览器。