Slightly less confusing sprite animation

This commit is contained in:
Ian Gulliver
2021-05-13 05:00:18 +00:00
parent d1bdcf5485
commit b491fbd9fc
5 changed files with 20 additions and 15 deletions

View File

@@ -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;

View File

@@ -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"}
{"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"}

View File

@@ -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,
});
}

View File

@@ -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"}
{"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"}

View File

@@ -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,
},
);