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

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

当我尝试运行此代码时，window 冻结并且我无法再与我的应用程序交互，除非我关闭 window 并重新加载它。我的猜测是我以某种方式触发了无限循环。

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，并且它不会阻塞浏览器。

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

animating svg pan when manually setting pan.x and pan.y

javascript

animation

svgpanzoom