Switch to animating visibility, remove flicker

This commit is contained in:
Ian Gulliver
2021-05-13 05:02:05 +00:00
parent b491fbd9fc
commit 65a1b6d942
3 changed files with 9 additions and 9 deletions

View File

@@ -13,21 +13,21 @@ export class SequenceTile extends AnimatableTile {
tile.elem.style.position = 'absolute';
tile.elem.style.top = '0';
tile.elem.style.left = '0';
tile.elem.style.opacity = '0.0';
tile.elem.style.visibility = 'hidden';
animation = tile.elem.animate([
{
'offset': 0,
'easing': 'step-end',
'opacity': '0.0',
'visibility': 'hidden',
},
{
'offset': i * tile_chunk,
'easing': 'step-end',
'opacity': '1.0',
'visibility': 'visible',
},
{
'offset': (i + 1) * tile_chunk,
'opacity': '0.0',
'visibility': 'hidden',
},
], {
'duration': tiles.length * delay,

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,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"}
{"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,UAAU,GAAG,QAAQ,CAAC;YAEtC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAC3B;gBACE;oBACE,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,QAAQ;iBACvB;gBACD;oBACE,QAAQ,EAAE,CAAC,GAAG,UAAU;oBACxB,QAAQ,EAAE,UAAU;oBACpB,YAAY,EAAE,SAAS;iBACxB;gBACD;oBACE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU;oBAC9B,YAAY,EAAE,QAAQ;iBACvB;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,23 +19,23 @@ export class SequenceTile extends AnimatableTile {
tile.elem.style.position = 'absolute';
tile.elem.style.top = '0';
tile.elem.style.left = '0';
tile.elem.style.opacity = '0.0';
tile.elem.style.visibility = 'hidden';
animation = tile.elem.animate(
[
{
'offset': 0,
'easing': 'step-end',
'opacity': '0.0',
'visibility': 'hidden',
},
{
'offset': i * tile_chunk,
'easing': 'step-end',
'opacity': '1.0',
'visibility': 'visible',
},
{
'offset': (i + 1) * tile_chunk,
'opacity': '0.0',
'visibility': 'hidden',
},
],
{