Don't look for alt tiles if alpha is 1

src/ol/renderer/canvas/tilelayer.js

@@ -178,15 +178,16 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
         tile = tile.getInterimTile();
       }
       if (this.isDrawableTile_(tile)) {
-        var inTransition = false;
+        var uid = ol.getUid(this);
         if (tile.getState() == ol.TileState.LOADED) {
           tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
-          inTransition = tile.inTransition && tile.inTransition(ol.getUid(this));
+          var inTransition = tile.inTransition(uid);
           if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) {
             newTiles = true;
           }
         }
-        if (!inTransition) {
+        if (tile.getAlpha(uid, frameState.time) === 1) {
+          // don't look for alt tiles if alpha is 1
           continue;
         }
       }
@@ -310,7 +311,8 @@ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState
   if (!image) {
     return;
   }
-  var alpha = transition ? tile.getAlpha(ol.getUid(this), frameState.time) : 1;
+  var uid = ol.getUid(this);
+  var alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
   if (alpha === 1 && !this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
     this.context.clearRect(x, y, w, h);
   }
@@ -327,6 +329,8 @@ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState
   }
   if (alpha !== 1) {
     frameState.animate = true;
+  } else if (transition) {
+    tile.endTransition(uid);
   }
 };
 

src/ol/tile.js

@@ -200,7 +200,6 @@ ol.Tile.prototype.getAlpha = function(id, time) {
 
   var delta = time - start + (1000 / 60); // avoid rendering at 0
   if (delta >= this.transition_) {
-    this.transitionStarts_[id] = -1;
     return 1;
   }
   return ol.easing.easeIn(delta / this.transition_);
@@ -219,3 +218,13 @@ ol.Tile.prototype.inTransition = function(id) {
   }
   return this.transitionStarts_[id] !== -1;
 };
+
+/**
+ * Mark a transition as complete.
+ * @param {number} id An id for the renderer.
+ */
+ol.Tile.prototype.endTransition = function(id) {
+  if (this.transition_) {
+    this.transitionStarts_[id] = -1;
+  }
+};

test/spec/ol/tile.test.js

@@ -47,22 +47,9 @@ describe('ol.Tile', function() {
       var coord = [0, 0, 0];
       var tile = new ol.Tile(coord, ol.TileState.IDLE);
       var id = 'test';
-      var time = Date.now();
 
       expect(tile.inTransition(id)).to.be(true);
-
+      tile.endTransition(id);
-      // start of transition
-      tile.getAlpha(id, time);
-      expect(tile.inTransition(id)).to.be(true);
-
-      // mid way through transition
-      time += tile.transition_ / 2;
-      tile.getAlpha(id, time);
-      expect(tile.inTransition(id)).to.be(true);
-
-      // end of transition
-      time += tile.transition_ / 2;
-      tile.getAlpha(id, time);
       expect(tile.inTransition(id)).to.be(false);
     });
   });