Для этого нам понадобится тег <animate />. Например, попробуем анимировать радиус круга:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="100" r="15" width="200" height="200" fill="red">
		<animate
		attributeName="r"
		from="15"
		to="50"
		dur="3s"
		repeatCount="indefinite" />
	</circle>
</svg>

Получаем следующий результат:

При помощи элемента <animateTransform /> можно анимировать перемещения (translate), масштабирования (scale), вращения (rotate) и наклоны (skewX и skewY).

Например, создадим вращающийся зеленый квадрат:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect x="50" y="50" width="100" height="100" fill="green">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 100 100"
            to="360 100 100"
            dur="5s"
            repeatCount="indefinite"
          />
        </rect>
      </svg>

Он будет выглядеть так:

Это довольно простая анимация, и ее можно было бы реализовать при помощи CSS. Однако с помощью технологии SMIL можно воспользоваться средствами синхронизации.

Например, добавим еще один тег animateTransform с атрибутом additive=”sum”. Тогда две анимации наложатся друг на друга, и при этом им можно будет задать разные настройки по времени и количеству повторений. Добавим масштабирование:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect x="50" y="50" width="100" height="100" fill="green">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 100 100"
            to="360 100 100"
            dur="5s"
            repeatCount="indefinite"
          />
          <animateTransform
            attributeName="transform"
            type="scale"
            values="0.5; 1; 0.5"
            keyTimes="0; 0.5; 1"
            dur="4s"
            repeatCount="indefinite"
            additive='sum'
          />
        </rect>
      </svg>

И получим вот такой результат:

Возможно, вы зададитесь вопросом: “Что же случилось? Почему квадрат раньше вращался относительно центра, а теперь – нет?”. Все дело в том, что из-за добавления additive=”sum” анимации накладываются, и при изменении размера квадрата (от анимации scale) меняется и его траектория движения. Так что к использованию такого суммирования анимаций нужно подходить очень внимательно.

Тег <animateMotion /> подходит для работы со сложными формами. Например, чтобы создать анимацию движения по сложной траектории. Для наглядности возьмем SVG-изображение кота:

<svg
        width="300"
        height="300"
        viewBox="0 0 64 64"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894 17.7573L46.1708 20.3944C45.832 21.072 45.1395 21.5 44.382 21.5H42C40.8954 21.5 40 20.6046 40 19.5V17.8028L38 20.8028V24.5C38 25.6046 37.1046 26.5 36 26.5H15.5C14.3954 26.5 13.5 25.6046 13.5 24.5V13Z"
          fill="white"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M55.49 24.3586C55.5681 24.9053 55.1882 25.4118 54.6414 25.4899L47.6414 26.4899C47.0947 26.5681 46.5882 26.1882 46.5101 25.6414C46.4319 25.0947 46.8118 24.5882 47.3586 24.51L54.3586 23.51C54.9053 23.4319 55.4118 23.8118 55.49 24.3586ZM47 28C47 27.4477 47.4477 27 48 27H54.5C55.0523 27 55.5 27.4477 55.5 28C55.5 28.5523 55.0523 29 54.5 29H48C47.4477 29 47 28.5523 47 28Z"
          fill="white"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M34.51 24.3586C34.4319 24.9053 34.8118 25.4118 35.3586 25.4899L42.3586 26.4899C42.9053 26.5681 43.4118 26.1882 43.4899 25.6414C43.5681 25.0947 43.1882 24.5882 42.6414 24.51L35.6414 23.51C35.0947 23.4319 34.5882 23.8118 34.51 24.3586ZM43 28C43 27.4477 42.5523 27 42 27H35.5C34.9477 27 34.5 27.4477 34.5 28C34.5 28.5523 34.9477 29 35.5 29H42C42.5523 29 43 28.5523 43 28Z"
          fill="white"
        />
      </svg>

К этому коту мы можем добавить точку, которая будет двигаться по его контуру. Для этого необходимо в тег <circle></circle> положить animateMotion с заданными настройками анимации. Также в тег нужно добавить mpath, который будет ссылаться на path – траекторию движения точки:

<circle cx="0" cy="0" r="1" fill="green">
          <animateMotion dur="20s" repeatCount="indefinite">
            <mpath href="#motionPath" />
          </animateMotion>
        </circle>

Объединяем все вместе:

<svg
        width="300"
        height="300"
        viewBox="0 0 64 64"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M8 13C8 11.8954 8.89543 11 10 11H13.5C14.6046 11 15.5 11.8954 15.5 13V24.5H36V20.8028C36 20.4079 36.1169 20.0219 36.3359 19.6934L38.3359 16.6934C39.4336 15.0469 42 15.824 42 17.8028V19.5H44.382L45.7005 16.8629C46.5725 15.119 49.1696 15.5262 49.4661 17.4532L49.8579 20L50 20C51.1046 20 52 20.8954 52 22V30.25C52 31.1316 51.3481 31.861 50.5 31.9823V38C50.5 39.1046 49.6046 40 48.5 40H48V51.5C48 52.6046 47.1046 53.5 46 53.5H42C40.8954 53.5 40 52.6046 40 51.5V40H39.5V51.5C39.5 52.6046 38.6046 53.5 37.5 53.5H33.5C32.3954 53.5 31.5 52.6046 31.5 51.5V40H24.5V51.5C24.5 52.6046 23.6046 53.5 22.5 53.5H18.5C17.3954 53.5 16.5 52.6046 16.5 51.5V40H16V51.5C16 52.6046 15.1046 53.5 14 53.5H10C8.89543 53.5 8 52.6046 8 51.5V13ZM13.5 13L10 13V51.5H14V40C14 38.8954 14.8954 38 16 38H16.5C17.6046 38 18.5 38.8954 18.5 40V51.5H22.5V40C22.5 38.8954 23.3954 38 24.5 38H31.5C32.6046 38 33.5 38.8954 33.5 40V51.5H37.5V40C37.5 38.8954 38.3954 38 39.5 38H40C41.1046 38 42 38.8954 42 40V51.5H46V40C46 38.8954 46.8954 38 48 38H48.5V31.75C48.5 30.8684 49.1519 30.139 50 30.0177V22H49.8579C48.8708 22 48.0313 21.2798 47.8812 20.3041L47.4894 17.7573L46.1708 20.3944C45.832 21.072 45.1395 21.5 44.382 21.5H42C40.8954 21.5 40 20.6046 40 19.5V17.8028L38 20.8028V24.5C38 25.6046 37.1046 26.5 36 26.5H15.5C14.3954 26.5 13.5 25.6046 13.5 24.5V13Z"
          fill="white"
          id="motionPath"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M55.49 24.3586C55.5681 24.9053 55.1882 25.4118 54.6414 25.4899L47.6414 26.4899C47.0947 26.5681 46.5882 26.1882 46.5101 25.6414C46.4319 25.0947 46.8118 24.5882 47.3586 24.51L54.3586 23.51C54.9053 23.4319 55.4118 23.8118 55.49 24.3586ZM47 28C47 27.4477 47.4477 27 48 27H54.5C55.0523 27 55.5 27.4477 55.5 28C55.5 28.5523 55.0523 29 54.5 29H48C47.4477 29 47 28.5523 47 28Z"
          fill="white"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M34.51 24.3586C34.4319 24.9053 34.8118 25.4118 35.3586 25.4899L42.3586 26.4899C42.9053 26.5681 43.4118 26.1882 43.4899 25.6414C43.5681 25.0947 43.1882 24.5882 42.6414 24.51L35.6414 23.51C35.0947 23.4319 34.5882 23.8118 34.51 24.3586ZM43 28C43 27.4477 42.5523 27 42 27H35.5C34.9477 27 34.5 27.4477 34.5 28C34.5 28.5523 34.9477 29 35.5 29H42C42.5523 29 43 28.5523 43 28Z"
          fill="white"
        />
        <circle cx="0" cy="0" r="1" fill="green">
          <animateMotion dur="20s" repeatCount="indefinite">
            <mpath href="#motionPath" />
          </animateMotion>
        </circle>
      </svg>

И получаем точку, которая ползает по нашему векторному коту:

Например, с помощью lottie-web – библиотеки, позволяющей воспроизводить в веб-приложениях анимации Lottie:

import * as React from 'react';
import Lottie, { AnimationItem } from 'lottie-web';

const TestLottie: React.FC = () =>  {
  const [animationItem, setAnimationItem] =
    React.useState<AnimationItem | null>(null);
    
  const containerRef = React.useRef<HTMLDivElement>(null);
  
  React.useEffect(() => {
    if (containerRef.current) {
      const animation = Lottie.loadAnimation({
        container: containerRef.current,
        path: 'https://lottie.host/d08e7662-fa30-4250-85b2-e2b84099d740/2RdMSZgTtW.json'
      });

      setAnimationItem(animation);
    }

    return () => {
      animationItem?.destroy();
    };
  }, []);

  return (
      <div ref={containerRef} className="div" />
  );
}

export default TestLottie;

Здесь мы в animationItem при помощи useState сохраняем экземпляр анимации. АuseRef создаёт ссылку containerRef – она используется для получения доступа к элементу div, в котором отображается анимация.

Далее в useEffect мы загружаем анимацию и привязываем ее к контейнеру, при этом path указывает путь к анимационному файлу. В функции очистки обязательно возвращаем animationItem?.destroy(), чтобы уничтожить анимацию при размонтировании и предотвратить утечку памяти.

Получаем вот такую симпатичную анимацию в браузере:

Если вы хотите использовать для анимации локальный JSON, то вместо path нужно использовать animationData:

import testAnim from './test.json';

const animation = Lottie.loadAnimation({

container: containerRef.current,

animationData: testAnim

});

В качестве параметра для loadAnimation можно можно также передать renederer. Его значение по умолчанию равно svg, но можно задать canvas или html.

const animation = Lottie.loadAnimation({

container: containerRef.current,

animationData: testAnim,

renderer: 'canvas',

});

Если передать canvas, то получится следующий результат:

У animationItem здесь есть различные методы управления. Самый простой пример – возможность ставить на паузу и воспроизводить анимацию:

const handlePlayClick = () => {
    animationItem?.play();
  }

  const handlePauseClick = () => {
    animationItem?.pause();
  }

  return (
    <>
      <div ref={containerRef} className="div"/>
      <button onClick={handlePlayClick}>Play</button>
      <button onClick={handlePauseClick}>Pause</button>
    </>
  );

Результат:

Анимацию dotLottie можно встроить при помощи библиотеки @lottiefiles/dotlottie-react. Для этого необходимо взять компонент DotLottieReact:

<DotLottieReact
        src={testAnim}
        loop
        autoplay
      />

В этой библиотеке поддерживается рендер только в качестве Canvas.

Для управления анимации здесь используется dotLottieRefCallback:

import * as React from 'react';
import testAnim from './dotTest.lottie';
import { DotLottie, DotLottieReact } from '@lottiefiles/dotlottie-react';

const TestDotLottie: React.FC = () => {
  const [dotLottie, setDotLottie] = React.useState<DotLottie | null>(null);

  const play = () => {
    dotLottie?.play();
  };

  const pause = () => {
    dotLottie?.pause();
  };

  const stop = () => {
    dotLottie?.stop();
  };

  return (
    <>
      <DotLottieReact
        src={testAnim}
        loop
        autoplay
        dotLottieRefCallback={setDotLottie}
      />
      <div>
        <button onClick={play}>Play</button>
        <button onClick={pause}>Pause</button>
        <button onClick={stop}>Stop</button>
      </div>
    </>
  );
};

export default TestDotLottie;

Пример реализации собственного класса для анимации вращения кубика для той же Мегабашни:

export interface SpriteOptions {
  ctx: CanvasRenderingContext2D;
  image: string;
  width: number;
  height: number;
  frameWidth: number;
  frameHeight: number;
  lines: number;
  columns: number;
  ticksPerFrame?: number;
  numberOfFrames?: number;
}

export class Sprite {
  ctx: CanvasRenderingContext2D;
  image: HTMLImageElement;
  width: number;
  height: number;
  ticksPerFrame: number;
  numberOfFrames: number;
  frameWidth: number;
  frameHeight: number;
  frameIndex: number;
  tickCount: number;
  lines: number;
  columns: number;
  animation: ReturnType<typeof requestAnimationFrame> | null = null;

  private _oneFrameWidth: number;
  private _oneFrameHeight: number;

  constructor(options: SpriteOptions) {
    // Контекст канваса
    this.ctx = options.ctx;

    // Изображение спрайта, которое будет отрисовываться
    const imageElement = new Image();

    imageElement.src = options.image;
    this.image = imageElement;

    // Текущий фрейм спрайта
    this.frameIndex = 0;
    // Счетчик тиков, нужен для отслеживания, сколько тиков прошло с момента последнего отрисовывания
    this.tickCount = 0;
    // Кол-во тиков для смены кадра (при 60 fps, ticksPerFrame = 4 будет 15 кадров/с)
    this.ticksPerFrame = options.ticksPerFrame ?? 0;
    // Количество фреймов в спрайте
    this.numberOfFrames = options.numberOfFrames ?? 1;

    // Размеры выходного изображения (оно будет скейлиться)
    this.width = options.width;
    this.height = options.height;

    // Размеры одного фрейма (для масштабирования)
    this.frameWidth = options.frameWidth;
    this.frameHeight = options.frameHeight;

    // Кол-во линий и колонок в спрайте
    this.lines = options.lines;
    this.columns = options.columns;

    // Размеры одного фрейма в спрайте
    this._oneFrameWidth = options.width / options.columns;
    this._oneFrameHeight = options.height / options.lines;
  }

  private _update() {
    this.tickCount++;

    if (this.tickCount > this.ticksPerFrame) {
      this.tickCount = 0;

      this.frameIndex = this.frameIndex + 1 > this.numberOfFrames ? 0 : this.frameIndex + 1;
    }
  }

  private _render() {
    this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);
    this.ctx.drawImage(
      this.image,
      (this.frameIndex % this.columns) * this._oneFrameWidth,
      (Math.floor(this.frameIndex / this.columns) % this.lines) * this._oneFrameHeight,
      this._oneFrameWidth,
      this._oneFrameHeight,
      0,
      0,
      this.frameWidth,
      this.frameHeight
    );
  }

  start() {
    const loop = () => {
      this._update();
      this._render();

      this.animation = window.requestAnimationFrame(loop);
    };

    this.animation = window.requestAnimationFrame(loop);
  }

  stop() {
    if (this.animation) {
      window.cancelAnimationFrame(this.animation);
    }

    this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);
  }
}

Здесь для описания параметров, передаваемых классу, используется SpriteOptions, который состоит из:

• ctx − контекст CanvasRenderingContext2D, куда будет отрисовываться спрайт;

• image − путь к изображению спрайта;

• width и height − размеры всего изображения спрайта;

• frameWidth и frameHeight − размеры одного кадра;

• lines и columns − количество строк и колонок кадров в спрайте;

• ticksPerFrame (опционально) − количество “тиков” для смены кадра, управляет скоростью анимации;

• numberOfFrames (опционально) − общее количество кадров.

В конструкторе инициализируем следующие поля класса:

• ctx − сохраняет контекст канваса;

• image − загружает изображение спрайта в HTMLImageElement;

• кадры и анимация:

  • frameIndex − текущий индекс кадра;

  • tickCount − счетчик для отслеживания количества тиков с момента последнего отрисовывания;

  • ticksPerFrame − количество тиков, необходимое для смены кадра;

  • numberOfFrames − количество фреймов в спрайте;

• размеры:

  • width и height − размеры всего изображения;

  • frameWidth и frameHeight − размеры одного кадра;

  • _oneFrameWidth и _oneFrameHeight − размеры одного фрейма в спрайте, вычисленные автоматически.

Приватные методы класса:

• _update() − увеличивает счетчик tickCount. Если прошло достаточно тиков (больше ticksPerFrame), то увеличивает frameIndex. Если текущий кадр был последним, то в frameIndex записывает 0;

• _render() − очищает предыдущий кадр (ctx.clearRect) и отрисовывает следующий через drawImage.

  Подробнее про метод drawImage CanvasRenderingContext2D: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

  • image − элемент, который мы отрисовываем;

  • sx и sy − координата по осям X и Y левого верхнего угла изображения. Здесь это:

    • (this.frameIndex % this.columns) * this._oneFrameWidth для оси X;

    • (Math.floor(this.frameIndex / this.columns) % this.lines) * this._oneFrameHeight для оси Y;

  • sWidth и sHeight − ширина и высота прямоугольника исходного изображения, который будет отрисовываться (здесь берем this._oneFrameWidth и this._oneFrameHeight);

  • dx и dy − начальная точка на канвасе, куда рисуется кадр (здесь всегда 0, 0);

  • dWidth и dHeight − размеры, с которыми кадр будет отрисован на канвасе (здесь берем this.frameWidth и this.frameHeight).

Методы управления анимацией:

• start() − запускает цикл анимации с помощью requestAnimationFrame . Внутри loop вызываются _update (обновление кадра) и _render (отрисовка кадра), идентификатор сохраняется в this.animation, чтобы анимацию можно было остановить;

• stop() − останавливает анимацию, вызывая cancelAnimationFrame с сохраненным идентификатором, и очищает канвас.

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

Для этого напишем компонент Dice со следующими состояниями:

• diceResultLoading − указывает, идет ли сейчас анимация броска (загрузка результата):

  • если значение true, то анимация проигрывается;

  • если значение сменилось на false, это означает, что анимация завершена и пора показывать результат;

• diceResult − хранит результат броска кубика;

• isResultAnimation − указывает, проигрывается ли CSS-анимация кубика.

Также внутри компонента будут следующие ссылки:

• canvasRef − на canvas, где проигрывается анимация;

• spriteRef − на объект Sprite, который управляет анимацией.

Основные функции:

• getDiceResult − отвечает за симуляцию загрузки и генерацию результата броска кубика. Принцип ее работы следующий:

  • сначала она устанавливает diceResultLoading в true;

  • затем запускает setTimeout, который через заданное время установит diceResultLoading в false, запишет случайное число в diceResult и вызовет переданную callback-функцию (здесь будем передавать handleStartResultAnimation, которую рассмотрим далее);

• handleStartResultAnimation − управляет запуском CSS-анимации результата:

  • сначала устанавливает isResultAnimation в true;

  • затем запускает setTimeout, который через заданное время выключает анимацию (ставит isResultAnimation в false);

• handleDiceClick − обрабатывает клик на кубике:

  • вызывает getDiceResult, передавая в нее handleStartResultAnimation в качестве коллбэка.

Анимация:

• когда diceResultLoading становится true, выполняются:

  • проверка наличия <canvas> через canvasRef;

  • получение контекста для рисования (ctx);

  • создание нового объекта Sprite с параметрами для анимации:

    • image: изображение спрайта;

    • width, height: размеры изображения;

    • numberOfFrames: общее количество кадров в спрайте;

    • lines, columns: строки и столбцы (8x8);

    • ticksPerFrame: скорость смены кадров (1 тик = 1 кадр);

  • запуск анимации методом spriteRef.current.start();

• когда diceResultLoading становится false, анимация спрайта останавливается вызовом spriteRef.current.stop().

Получаем такой компонент:

import cx from 'clsx';
import * as React from 'react';

import diceSprite from '../assets/images/dice/cube-sprite.png';

import s from './Dice.module.scss';
import { Sprite } from './Sprite';
import { DICE_IMAGES } from '../assets/images/dice';
const DICE_RESULT_ANIMATION_TIME = 1200;

type Props = {
  onHandleNextStepFinished?: () => void;
};

type DiceResult = 1 | 2 | 3 | 4 | 5 | 6;

const Dice: React.FC<Props> = () => {
  const [diceResultLoading, setDiceResultLoading] = React.useState(false);
  const [diceResult, setDiceResult] = React.useState<DiceResult>(1);
  const [isResultAnimation, setIsResultAnimation] = React.useState(false);

  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const spriteRef = React.useRef<Sprite | null>(null);

  const getDiceResult = React.useCallback((callback?: () => void) => {
    setDiceResultLoading(true);

    setTimeout(() => {
      setDiceResultLoading(false);
      setDiceResult(Math.ceil(Math.random() * 6) as DiceResult);

      callback?.();
    }, 2000);
  }, []);

  const handleStartResultAnimation = React.useCallback(() => {
    setIsResultAnimation(true);

    const timeout = setTimeout(() => {
      setIsResultAnimation(false);
    }, DICE_RESULT_ANIMATION_TIME);

    return () => {
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, []);

  const handleDiceClick = React.useCallback(() => {
    getDiceResult(handleStartResultAnimation);
  }, [getDiceResult, handleStartResultAnimation]);

  React.useEffect(() => {
    if (!diceResultLoading || !canvasRef.current) {
      spriteRef.current?.stop();

      return undefined;
    }

    const ctx = canvasRef.current.getContext('2d');

    if (!ctx) {
      return undefined;
    }

    spriteRef.current = new Sprite({
      ctx,
      image: diceSprite,
      width: 2048,
      height: 2048,
      numberOfFrames: 60,
      frameHeight: 100,
      frameWidth: 100,
      lines: 8,
      columns: 8,
      ticksPerFrame: 1,
    });

    spriteRef.current.start();

    return () => {
      spriteRef.current?.stop();
    };
  }, [diceResultLoading]);

  return (
    <div
      className={cx(s['dice-wrapper'], { [s.inactive]: diceResultLoading })}
      onClick={handleDiceClick}
    >
      <div className={s.dice}>
        {!diceResultLoading && (
          <img
            src={DICE_IMAGES[diceResult - 1]}
            className={cx(s.image, {
              [s.image_withAnimation]: isResultAnimation,
            })}
          />
        )}
        <canvas width={100} height={100} ref={canvasRef} />
      </div>
    </div>
  );
};

export default Dice;

Если результат броска загружен (!diceResultLoading), отображается <img> с результатом кубика (DICE_IMAGES[diceResult - 1]) и небольшой CSS-анимацией. В момент загрузки результата показываем анимацию. На результат можно посмотреть чуть ниже.