View animation

src/ol/view.js

@@ -97,6 +97,14 @@ ol.View = function(opt_options) {
    */
   this.animations_ = [];
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.updateAnimationKey_;
+
+  this.updateAnimations_ = this.updateAnimations_.bind(this);
+
   /**
    * @type {Object.<string, *>}
    */
@@ -228,6 +236,7 @@ ol.View.prototype.animate = function(var_args) {
   }
   this.animations_.push(series);
   this.animating_ = true;
+  this.updateAnimations_();
 };
 
 
@@ -254,6 +263,67 @@ ol.View.prototype.cancelAnimations_ = function() {
   this.animating_ = false;
 };
 
+/**
+ * Update all animations.
+ */
+ol.View.prototype.updateAnimations_ = function() {
+  if (this.updateAnimationKey_ !== undefined) {
+    cancelAnimationFrame(this.updateAnimationKey_);
+    this.updateAnimationKey_ = undefined;
+  }
+  if (!this.animating_) {
+    return;
+  }
+  var now = Date.now();
+  var more = false;
+  for (var i = this.animations_.length - 1; i >= 0; --i) {
+    var series = this.animations_[i];
+    var animation;
+    for (var j = 0, jj = series.length; j < jj; ++j) {
+      var candidate = series[i];
+      if (candidate.duration > now - candidate.start) {
+        animation = candidate;
+        break;
+      }
+    }
+    if (animation) {
+      var progress = animation.easing((now - animation.start) / animation.duration);
+      if (animation.sourceCenter) {
+        var x0 = animation.sourceCenter[0];
+        var y0 = animation.sourceCenter[1];
+        var x1 = animation.targetCenter[0];
+        var y1 = animation.targetCenter[1];
+        var x = x0 + progress * (x1 - x0);
+        var y = y0 + progress * (y1 - y0);
+        this.set(ol.View.Property.CENTER, [x, y]);
+      }
+      if (animation.sourceResolution) {
+        var resolutionDelta = progress * (animation.targetResolution - animation.sourceResolution);
+        this.set(ol.View.Property.RESOLUTION, animation.sourceResolution + resolutionDelta);
+      }
+      if (animation.sourceRotation !== undefined) {
+        var rotationDelta = progress * (animation.targetRotation - animation.sourceRotation);
+        this.set(ol.View.Property.ROTATION, animation.sourceRotation + rotationDelta);
+        if (animation.rotationAnchor) {
+          var center = this.getCenter().slice();
+          ol.coordinate.sub(center, animation.rotationAnchor);
+          ol.coordinate.rotate(center, rotationDelta);
+          ol.coordinate.add(center, animation.rotationAnchor);
+          this.set(ol.View.Property.CENTER, center);
+        }
+      }
+      more = true;
+    } else {
+      this.animations_.pop();
+      if (this.animations_.length === 0) {
+        this.animating_ = false;
+      }
+    }
+  }
+  if (more && this.updateAnimationKey_ === undefined) {
+    this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
+  }
+};
 
 /**
  * @param {number} rotation Target rotation.