Ensure animation loop stops after raster tiles fade in (#3764)

* Ensure animation loop stops after raster tiles fade in

* Fix unit tests

js/render/draw_raster.js

@@ -36,7 +36,7 @@ function drawRasterTile(painter, sourceCache, layer, coord) {
     const tile = sourceCache.getTile(coord);
     const posMatrix = painter.transform.calculatePosMatrix(coord, sourceCache.getSource().maxzoom);
 
-    tile.setAnimationLoop(painter.style.animationLoop, layer.paint['raster-fade-duration']);
+    tile.registerFadeDuration(painter.style.animationLoop, layer.paint['raster-fade-duration']);
 
     const program = painter.useProgram('raster');
     gl.uniformMatrix4fv(program.u_matrix, false, posMatrix);

js/source/source_cache.js

@@ -344,7 +344,7 @@ class SourceCache extends Evented {
             const id = ids[k];
             coord = TileCoord.fromID(id);
             tile = this._tiles[id];
-            if (tile && tile.animationLoopEndTime >= Date.now()) {
+            if (tile && tile.fadeEndTime >= Date.now()) {
                 // This tile is still fading in. Find tiles to cross-fade with it.
                 if (this.findLoadedChildren(coord, maxCoveringZoom, retain)) {
                     retain[id] = true;

js/source/tile.js

@@ -41,12 +41,13 @@ class Tile {
         this.state = 'loading';
     }
 
-    setAnimationLoop(animationLoop, t) {
-        this.animationLoopEndTime = t + Date.now();
-        if (this.animationLoopId !== undefined) {
-            animationLoop.cancel(this.animationLoopId);
-        }
-        this.animationLoopId = animationLoop.set(t);
+    registerFadeDuration(animationLoop, duration) {
+        const fadeEndTime = duration + this.timeAdded;
+        if (fadeEndTime < Date.now()) return;
+        if (this.fadeEndTime && fadeEndTime < this.fadeEndTime) return;
+
+        this.fadeEndTime = fadeEndTime;
+        animationLoop.set(this.fadeEndTime - Date.now());
     }
 
     /**

test/js/source/source_cache.test.js

@@ -386,7 +386,7 @@ test('SourceCache#update', (t) => {
             loadTile: function(tile, callback) {
                 tile.timeAdded = Infinity;
                 tile.state = 'loaded';
-                tile.setAnimationLoop(animationLoop, 100);
+                tile.registerFadeDuration(animationLoop, 100);
                 callback();
             }
         });
@@ -419,7 +419,7 @@ test('SourceCache#update', (t) => {
             loadTile: function(tile, callback) {
                 tile.timeAdded = Infinity;
                 tile.state = 'loaded';
-                tile.setAnimationLoop(animationLoop, 100);
+                tile.registerFadeDuration(animationLoop, 100);
                 callback();
             }
         });