Slow down animation? about aerisjs

[eschwartz]

Yes -- adjusting the animation speed is simple:

var animation = new aeris.interactive.animations.AnimationSync([radarLayer], {
  // set the initial animation speed
  speed: 60
});

// Change the animation speed
animation.setSpeed(120);

The speed number represents how many minutes of weather data will be displayed in a second. So for example, a speed of 60 means that your animation will play from 1pm to 2pm in one second.

By the way, the animations are set up so you can "lazy-load" tiles images, without making the user wait for everything to load. The tile images are loaded in such a way that you can immediately start the animation, without waiting for everything to preload -- it will start out "choppy", but become smoother as images are loaded.

v0.7.13 introduced a preload method, which makes this even easier. To make the UI feel less laggy, I'll do something like this:

// Start preloading animation images
myAnimation.preload();

// Show some kind of loading indicator
showLoadingProgressUI('0% complete');

// Hide the animation layer until the animation is preloaded
// Note that the radar layer MUST have a map set when you call preload()
radarLayer.setMap(null);

// Animation objects fire 'load:progress' events as
// tile images are loaded.
myAnimation.on('load:progress', function(progress) {
  var progressDisplay = (progress * 100).toFixed(0)  + '% complete';
  showLoadingProgressUI(progressDisplay);

  // Because preloading the entire animation may take a while,
  // we'll just tell the user that we're done when enough images are loaded
  // that animation won't look choppy
  if (progress > 0.5) {
    // Hide your loading UI
    hideLoadingProgressUI();

    // clean up the 'load:progress' event listener
    myAnimation.off('load:progress');

    // Show the radar layer
    radarLayer.setMap(myMap);
  }
});

I'm a little embarrassed to say that none of this is really well documented. If you're interested, there's some auto-generated documentation up at docs.aerisjs.com/api.

I hope this helps -- let me know if you run into any issues.

Edan

[andrewlively]

Awesome, I figured you had something in there, I just had trouble finding it. Thanks for the help and the link, I'll bookmark that as a reference