我可以减慢 OpenSeaDragon 平移/缩放动画吗？答案

【问题标题】：Can I slow down OpenSeaDragon pan/zoom animations?我可以减慢 OpenSeaDragon 平移/缩放动画吗？
【发布时间】：2014-07-29 16:43:25
【问题描述】：

OpenSeaDragon 很棒。

如果我使用 Viewport#fitBounds JS 方法移动到具有默认参数的新矩形，它会“动画”当前视图和新请求边界之间的过渡。

有什么方法可以控制这个动画的速度吗？我想放慢速度，因此从当前视图移动到请求的边界需要更长的时间，以便更悠闲地游览。

【问题讨论】：

标签： javascript animation seadragon openseadragon

【解决方案1】：

您可以在创建 OSD 查看器时设置 animationTime 和/或 springStiffness。但这也会在使用鼠标（或触摸板/屏幕等）手动平移和缩放时影响用户体验。当我随心所欲地放慢速度时，手动平移/缩放体验令人不安和困难。

但是我想出了这个技巧来在执行#fitBounds 时临时更改animationTime（或者也可能是springStiffness），然后将其恢复到完成时的状态。

// temporarily set OpenSeadragon animation params
// to a very slow animate, then restore.
function withSlowOSDAnimation(viewport, f) {

// save old ones
var oldValues = {};
oldValues.centerSpringXAnimationTime = viewport.centerSpringX.animationTime;
oldValues.centerSpringYAnimationTime = viewport.centerSpringY.animationTime;
oldValues.zoomSpringAnimationTime = viewport.zoomSpring.animationTime;

// set our new ones
viewport.centerSpringX.animationTime =
  viewport.centerSpringY.animationTime =
  viewport.zoomSpring.animationTime =
  6;

// callback
f()

// restore values
viewport.centerSpringX.animationTime = oldValues.centerSpringXAnimationTime;
viewport.centerSpringY.animationTime = oldValues.centerSpringYAnimationTime;
viewport.zoomSpring.animationTime = oldValues.zoomSpringAnimationTime;
}

像这样使用：

withSlowOSDAnimation(viewer.viewport, function() {
  // stuff
  viewer.viewport.fitBounds(somebounds);
});

这可行，但我不确定我是否使用可能会更改的内部 API。这可能是 OpenSeadragon 的一个很好的附加功能，能够通过 fitBounds 调用提供 animationTime、springStiffness 和/或只是一些 OpenSeadragon.Spring 对象，以应用于该 fitBounds。

【讨论】：

鉴于可用的 API，这似乎是一个很好的解决方案。这些至少是半内部的，因此将来可能会中断，但它们应该相对稳定。为自定义动画添加更好的支持会很棒...随时在 OpenSeadragon GitHub 上提交问题！

【解决方案2】：

很高兴你喜欢！

要影响动画速度，请在创建查看器时使用 springStiffness 和 animationTime 选项。见：

http://openseadragon.github.io/docs/OpenSeadragon.html#Options

【讨论】：

谢谢！在查看器创建时设置 springStiffness 和 animationTime 会导致通过鼠标拖动等手动平移和缩放的用户体验不佳。但我想出了一个 hacky 方式，我将输入另一个答案，以便我可以粘贴源代码。可能是一个更受支持的功能的想法。