← На главную
Серия практических разборов

Изменение размера во время анимации нужно обрабатывать явно

Адаптивная вёрстка HTML5-игры для Poki • Раздел 9 из 11

13. Изменение размера во время анимации нужно обрабатывать явно

Размер экрана может измениться во время анимации.

Например, слой завершения показывает заголовок и подпись прогресса рядом с изображением. Если экран меняется во время появления, целевые координаты устаревают.

В LevelCompletionOverlayComponent:

this.unsubscribeScreenChanged = this.node.events.on(SharedUiEvents.ScreenChanged, () => {
  this.completeActiveRevealStateOnResize();
  this.syncDimmerLayout();
  void this.trackTask(this.syncTextLayoutAfterResize());
});

Если анимация появления активна, я завершаю её в корректное состояние:

if (this.titleRevealActive) {
  void this.getRequiredTitle().runAction('completionTitleReveal', {
    mode: 'complete',
    targetX: this.resolveArtworkCenterX(),
    targetY: this.resolveTitleY(),
  });
  this.titleRevealActive = false;
}

Затем размещение текста пересчитывается по новым границам.

LevelCompletionButtonComponent использует похожий принцип: если размер меняется во время появления, твин останавливается, кнопка получает итоговый масштаб, а фоновая анимация перезапускается.