0

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

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

4

1 回答 1

1

目前没有以简单的方式制作动画的解决方案。有一个类似的问题（关于动画缩放）。那里的答案（调整到这个）是：

目前不支持此类功能。你可以通过两种方式做到这一点：

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

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

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

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

编辑

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

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

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

于 2015-03-21T20:23:07.833 回答