SequenceTile{Factory}

2021-05-12 04:48:16 +00:00
parent a1fea04b14
commit a067dc616f
21 changed files with 4667 additions and 2 deletions
--- a/js/sequence_tile.js
+++ b/js/sequence_tile.js
@@ -0,0 +1,42 @@
+import { Tile } from './tile.js';
+export class SequenceTile extends Tile {
+    constructor(width, height, tiles, delay, repeat) {
+        super(width, height);
+        this.elem.style.position = 'relative';
+        const tile_chunk = 1 / tiles.length;
+        let animation = null;
+        for (let i = 0; i < tiles.length; i++) {
+            const tile = tiles[i];
+            this.elem.appendChild(tile.elem);
+            tile.elem.style.width = '100%';
+            tile.elem.style.height = '100%';
+            tile.elem.style.position = 'absolute';
+            tile.elem.style.top = '0';
+            tile.elem.style.left = '0';
+            tile.elem.style.zIndex = `${i}`;
+            tile.elem.style.opacity = '0.0';
+            animation = tile.elem.animate([
+                {
+                    'offset': i * tile_chunk,
+                    'easing': 'step-start',
+                    'opacity': '0.0',
+                },
+                {
+                    'offset': (i + 1) * tile_chunk,
+                    'easing': 'step-start',
+                    'opacity': '1.0',
+                },
+            ], {
+                'duration': delay * (tiles.length + 1),
+                'iterations': repeat ? Infinity : 1,
+            });
+        }
+        if (!repeat) {
+            animation.finished.then(() => this.elem.remove());
+        }
+    }
+    play(_) {
+        return undefined;
+    }
+}
+//# sourceMappingURL=sequence_tile.js.map