From b491fbd9fc3da0d1421606906659ed59569c7de3 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Thu, 13 May 2021 05:00:18 +0000 Subject: [PATCH] Slightly less confusing sprite animation --- js/grid.js | 1 - js/grid.js.map | 2 +- js/sequence_tile.js | 15 +++++++++------ js/sequence_tile.js.map | 2 +- ts/sequence_tile.ts | 15 +++++++++------ 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/js/grid.js b/js/grid.js index a983f8b..28a10c1 100644 --- a/js/grid.js +++ b/js/grid.js @@ -4,7 +4,6 @@ export class Grid { this.layers = new Map(); this.prnt = prnt; this.prnt.style.display = 'grid'; - this.prnt.style.position = 'relative'; } set_size(x, y) { this.height = y; diff --git a/js/grid.js.map b/js/grid.js.map index 38a235b..38699ef 100644 --- a/js/grid.js.map +++ b/js/grid.js.map @@ -1 +1 @@ -{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,IAAI;IAMf,YAAY,IAAiB;QAH7B,WAAM,GAAuB,IAAI,GAAG,EAAiB,CAAC;QAIpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IACzD,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,IAAI,CAAC,OAAO,aAAa,CAAC;QAE3E,sBAAsB;IACxB,CAAC;IAED,UAAU,CAAC,MAAgB;QACzB,MAAM,QAAQ,GAAgB,IAAI,GAAG,CAAS,MAAM,CAAC,CAAC;QAEtD,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC1B,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,kCAAkC;gBAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,CAAC;YAC1C,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAClC;IACH,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAEjF,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"} \ No newline at end of file +{"version":3,"file":"grid.js","sourceRoot":"","sources":["../ts/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,IAAI;IAMf,YAAY,IAAiB;QAH7B,WAAM,GAAuB,IAAI,GAAG,EAAiB,CAAC;QAIpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,QAAQ,CAAC;IACzD,CAAC;IAED,WAAW,CAAC,GAAW;QACrB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,IAAI,CAAC,OAAO,aAAa,CAAC;QAE3E,sBAAsB;IACxB,CAAC;IAED,UAAU,CAAC,MAAgB;QACzB,MAAM,QAAQ,GAAgB,IAAI,GAAG,CAAS,MAAM,CAAC,CAAC;QAEtD,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC1B,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;gBAC1B,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAChC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACvB,kCAAkC;gBAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,CAAC;YAC1C,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SAClC;IACH,CAAC;IAED,QAAQ,CAAC,YAAyB,EAAE,CAAS,EAAE,CAAS;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAE,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAEjF,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACd,CAAC;CACF"} \ No newline at end of file diff --git a/js/sequence_tile.js b/js/sequence_tile.js index 97310a6..f0298c1 100644 --- a/js/sequence_tile.js +++ b/js/sequence_tile.js @@ -13,21 +13,24 @@ export class SequenceTile extends AnimatableTile { 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', + 'offset': 0, + 'easing': 'step-end', 'opacity': '0.0', }, { - 'offset': (i + 1) * tile_chunk, - 'easing': 'step-start', + 'offset': i * tile_chunk, + 'easing': 'step-end', 'opacity': '1.0', }, + { + 'offset': (i + 1) * tile_chunk, + 'opacity': '0.0', + }, ], { - 'duration': delay * (tiles.length + 1), + 'duration': tiles.length * delay, 'iterations': repeat ? Infinity : 1, }); } diff --git a/js/sequence_tile.js.map b/js/sequence_tile.js.map index 938352c..16fc91e 100644 --- a/js/sequence_tile.js.map +++ b/js/sequence_tile.js.map @@ -1 +1 @@ -{"version":3,"file":"sequence_tile.js","sourceRoot":"","sources":["../ts/sequence_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,OAAO,YAAa,SAAQ,cAAc;IAC9C,YAAY,KAAa,EAAE,MAAc,EAAE,UAA6C,EAAE,KAAa,EAAE,KAAa,EAAE,MAAe;QACrI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YAEhC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAC3B;gBACE;oBACE,QAAQ,EAAE,CAAC,GAAG,UAAU;oBACxB,QAAQ,EAAE,YAAY;oBACtB,SAAS,EAAE,KAAK;iBACjB;gBACD;oBACE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU;oBAC9B,QAAQ,EAAE,YAAY;oBACtB,SAAS,EAAE,KAAK;iBACjB;aACF,EACD;gBACE,UAAU,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBACtC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACpC,CACF,CAAC;SACH;QAED,IAAI,CAAC,MAAM,EAAE;YACX,SAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACpD;IACH,CAAC;IAED,IAAI,CAAC,CAAS;QACZ,OAAO,SAAS,CAAC;IACnB,CAAC;CACF"} \ No newline at end of file +{"version":3,"file":"sequence_tile.js","sourceRoot":"","sources":["../ts/sequence_tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,OAAO,YAAa,SAAQ,cAAc;IAC9C,YAAY,KAAa,EAAE,MAAc,EAAE,UAA6C,EAAE,KAAa,EAAE,KAAa,EAAE,MAAe;QACrI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAEtC,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAEtB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;YACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;YAEhC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAC3B;gBACE;oBACE,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,UAAU;oBACpB,SAAS,EAAE,KAAK;iBACjB;gBACD;oBACE,QAAQ,EAAE,CAAC,GAAG,UAAU;oBACxB,QAAQ,EAAE,UAAU;oBACpB,SAAS,EAAE,KAAK;iBACjB;gBACD;oBACE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU;oBAC9B,SAAS,EAAE,KAAK;iBACjB;aACF,EACD;gBACE,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK;gBAChC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACpC,CACF,CAAC;SACH;QAED,IAAI,CAAC,MAAM,EAAE;YACX,SAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;SACpD;IACH,CAAC;IAED,IAAI,CAAC,CAAS;QACZ,OAAO,SAAS,CAAC;IACnB,CAAC;CACF"} \ No newline at end of file diff --git a/ts/sequence_tile.ts b/ts/sequence_tile.ts index 2b17fce..db937d2 100644 --- a/ts/sequence_tile.ts +++ b/ts/sequence_tile.ts @@ -19,24 +19,27 @@ export class SequenceTile extends AnimatableTile { 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', + 'offset': 0, + 'easing': 'step-end', 'opacity': '0.0', }, { - 'offset': (i + 1) * tile_chunk, - 'easing': 'step-start', + 'offset': i * tile_chunk, + 'easing': 'step-end', 'opacity': '1.0', }, + { + 'offset': (i + 1) * tile_chunk, + 'opacity': '0.0', + }, ], { - 'duration': delay * (tiles.length + 1), + 'duration': tiles.length * delay, 'iterations': repeat ? Infinity : 1, }, );