Refactor animation logic

src/ol/base/map.js

@@ -76,6 +76,7 @@ ol.MapPaneZIndex = {
 /**
  * @constructor
  * @extends {ol.Object}
+ * @implements {goog.fx.anim.Animated}
  * @param {Element} target Target.
  * @param {function(new: ol.MapRenderer, Element, ol.Map)} rendererConstructor
  *     Renderer constructor.
@@ -104,13 +105,13 @@ ol.Map = function(
    * @private
    * @type {boolean}
    */
-  this.animating_ = false;
+  this.animatedRenderer_ = false;
 
   /**
    * @private
-   * @type {boolean}
+   * @type {number}
    */
-  this.dirty_ = false;
+  this.animatingCount_ = 0;
 
   /**
    * @private
@@ -118,6 +119,12 @@ ol.Map = function(
    */
   this.freezeRenderingCount_ = 0;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.dirty_ = false;
+
   /**
    * @private
    * @type {Element}
@@ -163,12 +170,6 @@ ol.Map = function(
   this.renderer_ = new rendererConstructor(target, this);
   this.registerDisposable(this.renderer_);
 
-  /**
-   * @private
-   * @type {ol.MapAnimation}
-   */
-  this.animation_ = new ol.MapAnimation(this.renderer_);
-
   /**
    * @private
    * @type {Element}
@@ -203,16 +204,6 @@ ol.Map = function(
 goog.inherits(ol.Map, ol.Object);
 
 
-/**
- * @private
- */
-ol.Map.prototype.animate_ = function() {
-  goog.asserts.assert(!this.animating_);
-  goog.fx.anim.registerAnimation(this.animation_);
-  this.animating_ = true;
-};
-
-
 /**
  * @return {boolean} Can rotate.
  */
@@ -537,6 +528,14 @@ ol.Map.prototype.isDef = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.Map.prototype.onAnimationFrame = function() {
+  this.renderFrame_();
+};
+
+
 /**
  * @private
  */
@@ -559,11 +558,9 @@ ol.Map.prototype.recalculateTransforms_ = function() {
 /**
  */
 ol.Map.prototype.render = function() {
-  if (!this.animating_) {
+  if (this.animatingCount_ < 1) {
     if (this.freezeRenderingCount_ === 0) {
-      if (this.renderer_.render()) {
+      this.renderFrame_();
-        this.animate_();
-      }
     } else {
       this.dirty_ = true;
     }
@@ -571,6 +568,24 @@ ol.Map.prototype.render = function() {
 };
 
 
+/**
+ * @private
+ */
+ol.Map.prototype.renderFrame_ = function() {
+  var animatedRenderer = this.renderer_.render();
+  this.dirty_ = false;
+  if (animatedRenderer != this.animatedRenderer_) {
+    if (animatedRenderer) {
+      this.startAnimating();
+    } else {
+      this.stopAnimating();
+    }
+    this.animatedRenderer_ = animatedRenderer;
+  }
+  this.dispatchEvent(ol.MapEventType.POST_RENDER);
+};
+
+
 /**
  * @param {ol.Color} backgroundColor Background color.
  */
@@ -700,16 +715,33 @@ goog.exportProperty(
     ol.Map.prototype.setUserProjection);
 
 
+/**
+ */
+ol.Map.prototype.startAnimating = function() {
+  if (++this.animatingCount_ == 1) {
+    goog.fx.anim.registerAnimation(this);
+  }
+};
+
+
+/**
+ */
+ol.Map.prototype.stopAnimating = function() {
+  goog.asserts.assert(this.animatingCount_ > 0);
+  if (--this.animatingCount_ === 0) {
+    goog.fx.anim.unregisterAnimation(this);
+  }
+};
+
+
 /**
  */
 ol.Map.prototype.unfreezeRendering = function() {
   goog.asserts.assert(this.freezeRenderingCount_ > 0);
-  if (--this.freezeRenderingCount_ === 0) {
+  if (--this.freezeRenderingCount_ === 0 &&
-    if (!this.animating_ && this.dirty_) {
+      this.animatingCount_ < 1 &&
-      if (this.renderer_.render()) {
+      this.dirty_) {
-        this.animate_();
+    this.renderFrame_();
-      }
-    }
   }
 };
 
@@ -727,30 +759,3 @@ ol.Map.prototype.withFrozenRendering = function(f, opt_obj) {
     this.unfreezeRendering();
   }
 };
-
-
-
-/**
- * @constructor
- * @implements {goog.fx.anim.Animated}
- * @param {!ol.MapRenderer} renderer Map renderer.
- */
-ol.MapAnimation = function(renderer) {
-
-  /**
-   * @private
-   * @type {ol.MapRenderer}
-   */
-  this.renderer_ = renderer;
-
-};
-
-
-/**
- * @inheritDoc
- */
-ol.MapAnimation.prototype.onAnimationFrame = function() {
-  if (!this.renderer_.render()) {
-    goog.fx.anim.unregisterAnimation(this);
-  }
-};