Merge pull request #6103 from tschaub/inanimate

Properly complete multiple parallel animations

src/ol/control/zoom.js

@@ -106,6 +106,9 @@ ol.control.Zoom.prototype.zoomByDelta_ = function(delta) {
   if (currentResolution) {
     var newResolution = view.constrainResolution(currentResolution, delta);
     if (this.duration_ > 0) {
+      if (view.getAnimating()) {
+        view.cancelAnimations();
+      }
       view.animate({
         resolution: newResolution,
         duration: this.duration_,

src/ol/view.js

@@ -271,7 +271,7 @@ ol.View.prototype.getAnimating = function() {
 /**
  * Cancel any ongoing animations.
  */
-ol.View.prototype.cancelAnimations_ = function() {
+ol.View.prototype.cancelAnimations = function() {
   for (var i = 0, ii = this.animations_.length; i < ii; ++i) {
     var series = this.animations_[i];
     if (series[0].callback) {
@@ -305,7 +305,7 @@ ol.View.prototype.updateAnimations_ = function() {
       }
       var elapsed = now - animation.start;
       var fraction = elapsed / animation.duration;
-      if (fraction > 1) {
+      if (fraction >= 1) {
         animation.complete = true;
         fraction = 1;
       } else {
@@ -345,14 +345,16 @@ ol.View.prototype.updateAnimations_ = function() {
       }
     }
     if (seriesComplete) {
+      this.animations_[i] = null;
       this.setHint(ol.View.Hint.ANIMATING, -1);
-      var completed = this.animations_.pop();
+      var callback = series[0].callback;
-      var callback = completed[0].callback;
       if (callback) {
         callback(true);
       }
     }
   }
+  // prune completed series
+  this.animations_ = this.animations_.filter(Boolean);
   if (more && this.updateAnimationKey_ === undefined) {
     this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
   }
@@ -807,7 +809,7 @@ ol.View.prototype.rotate = function(rotation, opt_anchor) {
 ol.View.prototype.setCenter = function(center) {
   this.set(ol.View.Property.CENTER, center);
   if (this.getAnimating()) {
-    this.cancelAnimations_();
+    this.cancelAnimations();
   }
 };
 
@@ -836,7 +838,7 @@ ol.View.prototype.setHint = function(hint, delta) {
 ol.View.prototype.setResolution = function(resolution) {
   this.set(ol.View.Property.RESOLUTION, resolution);
   if (this.getAnimating()) {
-    this.cancelAnimations_();
+    this.cancelAnimations();
   }
 };
 
@@ -850,7 +852,7 @@ ol.View.prototype.setResolution = function(resolution) {
 ol.View.prototype.setRotation = function(rotation) {
   this.set(ol.View.Property.ROTATION, rotation);
   if (this.getAnimating()) {
-    this.cancelAnimations_();
+    this.cancelAnimations();
   }
 };
 

test/spec/ol/view.test.js

@@ -484,6 +484,39 @@ describe('ol.View', function() {
 
     });
 
+    it('completes multiple staggered animations run in parallel', function(done) {
+
+      var view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      var calls = 0;
+
+      view.animate({
+        zoom: 1,
+        duration: 25
+      }, function() {
+        ++calls;
+      });
+
+      setTimeout(function() {
+        expect(view.getZoom() > 0).to.be(true);
+        expect(view.getZoom() < 1).to.be(true);
+        expect(view.getAnimating()).to.be(true);
+        view.animate({
+          zoom: 2,
+          duration: 25
+        }, function() {
+          expect(calls).to.be(1);
+          expect(view.getZoom()).to.roughlyEqual(2, 1e-8);
+          expect(view.getAnimating()).to.be(false);
+          done();
+        });
+      }, 10);
+
+    });
+
   });
 
   describe('#getResolutions', function() {