1

OpenSeaDragon is awesome.

If I use the Viewport#fitBounds JS method to move to a new rectangle, with default arguments, it 'animates' the transition between current view and the new requested bounds.

Is there any way to control the speed of this animation? I'd like to slow it down, so it takes longer to move from current view to the requested bounds, for a more leisurely tour.

jrochkind
  • 22,799
  • 12
  • 59
  • 74

2 Answers2

4

You can set animationTime and/or springStiffness when you create the OSD viewer. But this will effect the user experience when manually panning and zooming with mouse (or touchpad/screen etc) too. When I slowed it down as much as I wanted, the manual pan/zoom experience was disconcerting and difficult.

But I worked out this hack to temporarily change the animationTime (or possibly springStiffness too) when doing a #fitBounds, then putting it back to what it was when you are done. 

// 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;
}

Use like:

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

This works, although I'm not sure if I'm using internal API that may be subject to change. This would perhaps be a good additional feature for OpenSeadragon, ability to supply animationTime, springStiffness, and/or just some OpenSeadragon.Spring object(s) with the fitBounds call, to apply to that fitBounds.

jrochkind
  • 22,799
  • 12
  • 59
  • 74
  • That seems like a great solution, given the API that's available. Those are at least semi-internal, so it's possible it may break in the future, but they should be relatively stable. Adding better support for customizing the animations would be great... feel free to file an issue on the OpenSeadragon GitHub! – iangilman Aug 04 '14 at 23:41
2

Glad you like!

To affect the animation speed, play with the springStiffness and animationTime options when creating your viewer. See:

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

iangilman
  • 2,144
  • 1
  • 13
  • 16
  • Thanks! Setting springStiffness and animationTime on viewer creation led to poor user experience with manually panning and zooming via mouse drags etc. But I figured out a hacky way I'll put in another answer so I can paste source code. May be an idea for a more supported feature. – jrochkind Aug 03 '14 at 19:40