LoadingTransition.tsx

Обзор

Файл LoadingTransition.tsx содержит React-компонент, реализующий анимированный экран загрузки для игры. Его основная задача — визуально информировать пользователя о процессе загрузки, показывая прогресс в процентах, сменяющиеся советы и анимационные эффекты (частицы, спиннер). После достижения 100% загрузки компонент вызывает callback-функцию onComplete, которая сигнализирует о завершении загрузочного этапа и позволяет перейти к следующему этапу приложения.

Компонент используется для улучшения пользовательского опыта во время инициализации игры, создавая атмосферу ожидания с полезной информацией и динамичными визуальными элементами.

Подробное описание компонентов и функций

LoadingTransitionProps

interface LoadingTransitionProps {
  onComplete: () => void;
}

• Описание: Интерфейс пропсов для компонента LoadingTransition.

• Свойства:

  • onComplete: функция без параметров и возвращаемого значения, вызывается после завершения анимации загрузки (когда прогресс достигает 100%).

LoadingTransition

const LoadingTransition: React.FC<LoadingTransitionProps> = ({ onComplete }) => { ... }

• Описание: Основной React-функциональный компонент, реализующий анимационный экран загрузки.

• Параметры:

  • Принимает объект пропсов с функцией onComplete.

• Возвращаемое значение: JSX-элемент, отображающий анимированный интерфейс загрузки.

Внутренние состояния

• progress: number — текущий прогресс загрузки в процентах (от 0 до 100).

• currentTip: number — индекс текущего отображаемого совета из массива tips.

Основные переменные

• tips: string[] — массив строк с советами для пользователей, которые циклично меняются во время загрузки.

Хук useEffect

• Запускает два интервала:

  1. Интервал прогресса (progressInterval): увеличивает значение progress каждые 50 мс случайной величиной от 1 до 4. Когда progress достигает или превышает 100, интервал очищается, вызывается onComplete через 500 мс.

  2. Интервал смены советов (tipsInterval): каждые 1.5 секунды меняет индекс текущего совета, циклично переходя по массиву tips.

• При размонтировании компонента оба интервала очищаются.

Разметка JSX

• Фон с частицами: 30 элементов с классом loading-particle, позиционируемых случайным образом и анимируемых с разной задержкой и длительностью.

• Логотип игры: изображение с путем /resources/logo.svg.

• Текст загрузки: заголовок и подзаголовок.

• Прогресс-бар: визуальное отображение прогресса загрузки с анимируемой заливкой и свечением, а также текст с процентами.

• Советы: меняющийся текст с советами из массива tips.

• Спиннер: три кольцевых элемента с анимацией вращения.

Важные детали реализации и алгоритмы

• Анимация прогресса: Используется случайное приращение прогресса для создания эффекта естественного, нерегулярного заполнения шкалы. Это предотвращает ощущение монотонной и предсказуемой загрузки.

• Циклическая смена советов: Индекс текущего совета увеличивается по модулю длины массива, что обеспечивает бесконечную цикличность без выхода за границы.

• Очистка интервалов: Использование очистки интервалов в useEffect предотвращает утечки памяти и некорректное поведение при размонтировании компонента.

• Задержка перед вызовом onComplete: Полсекундная задержка после достижения 100% прогресса позволяет завершить анимацию плавно, улучшая UX.

Взаимодействие с другими частями приложения

• Компонент LoadingTransition обычно используется в качестве начального экрана при загрузке игры.

• При вызове onComplete сигнализирует родительскому компоненту или роутеру о завершении загрузки, чтобы переключить экран на основной интерфейс игры.

• Подгружает логотип из /resources/logo.svg, который должен быть доступен в публичных ресурсах проекта.

• Визуальные стили (CSS-классы) должны быть определены отдельно для классов, используемых в JSX, чтобы обеспечить корректное отображение и анимацию.

Пример использования

import React, { useState } from 'react';
import LoadingTransition from './LoadingTransition';

const App = () => {
  const [loadingComplete, setLoadingComplete] = useState(false);

  const handleLoadingComplete = () => {
    setLoadingComplete(true);
  };

  return (
    <>
      {!loadingComplete ? (
        <LoadingTransition onComplete={handleLoadingComplete} />
      ) : (
        <MainGameComponent />
      )}
    </>
  );
};

Диаграмма структуры компонента

componentDiagram
    LoadingTransition <|-- React.FC

    LoadingTransition : +progress: number (state)
    LoadingTransition : +currentTip: number (state)
    LoadingTransition : +onComplete(): void (prop)
    LoadingTransition : +tips: string[]
    LoadingTransition : +useEffect() - запуск интервалов
    LoadingTransition : +рендер JSX с элементами:
    LoadingTransition :   - loading-particles (30 div'ов)
    LoadingTransition :   - loading-logo (img)
    LoadingTransition :   - loading-text (h2, div)
    LoadingTransition :   - loading-progress-bar (div с шириной progress%)
    LoadingTransition :   - loading-tips (текущий совет)
    LoadingTransition :   - loading-spinner (3 кольца)

Итог

LoadingTransition.tsx — это многофункциональный React-компонент, отвечающий за отображение анимированного и информативного экрана загрузки в игре. Он сочетает в себе плавный прогресс-бар, цикличные советы, динамичные частицы и спиннеры для создания привлекательного UX. Компонент легко интегрируется в приложение, предоставляя callback для обработки окончания загрузки и перехода к игровому процессу.