Хуки для работы с анимациями: Практическое руководство для начинающих

Основы хуков для анимаций

Чтобы создать анимацию в React, нужно уметь отслеживать состояние компонента и вызывать изменение стилей или позиций в нужные моменты. Один из популярных подходов — использование хуков, таких как useState и useEffect, для управления состоянием анимаций.

Пример: предположим, что у нас есть компонент, который должен изменять цвет при клике. Используя useState, мы можем создать состояние isToggled, которое будет контролировать, должен ли измениться цвет. Когда isToggled обновляется, анимация будет автоматически перезапускаться.

import React, { useState } from 'react';



function ColorToggle() {

  const [isToggled, setIsToggled] = useState(false);



  const toggleColor = () => {

    setIsToggled(!isToggled);

  };



  return (

    <div

      onClick={toggleColor}

      style={{

        backgroundColor: isToggled ? 'blue' : 'green',

        transition: 'background-color 0.5s ease'

      }}

    >

      Click me!

    </div>

  );

}



export default ColorToggle;

Здесь useState создает состояние, а transition в стилях обеспечивает плавный переход между цветами. Каждый клик по блоку меняет его состояние и вызывает обновление цвета, создавая простую анимацию.

Плавные анимации с useEffect

Для более сложных анимаций с временными задержками и начальными значениями полезно использовать useEffect. Этот хук позволяет контролировать анимацию по мере изменения состояний или при первом рендере компонента.

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

import React, { useState, useEffect } from 'react';



function MoveBox() {

  const [position, setPosition] = useState(0);



  useEffect(() => {

    const interval = setInterval(() => {

      setPosition((prev) => prev + 10);

    }, 100);

    return () => clearInterval(interval);

  }, []);



  return (

    <div

      style={{

        transform: `translateX(${position}px)`,

        transition: 'transform 0.2s ease'

      }}

    >

      Moving Box

    </div>

  );

}



export default MoveBox;

В этом примере useEffect вызывает функцию каждые 100 мс, что обновляет позицию блока. Используя свойство transform, мы получаем плавное перемещение объекта по экрану. Важно, что clearInterval внутри return функции useEffect останавливает таймер при размонтировании компонента, предотвращая утечки памяти.

Продвинутые анимации с useRef и CSS-анимациями

Если нужно отслеживать состояние анимации или ее конкретные параметры, useRef может стать полезным инструментом. Он позволяет сохранить ссылку на DOM-элемент и управлять анимацией напрямую через его свойства.

Пример: создадим компонент, который с помощью CSS-анимаций и useRef будет увеличиваться в размерах при клике.

import React, { useRef } from 'react';



function ScalingBox() {

  const boxRef = useRef(null);



  const scaleBox = () => {

    boxRef.current.style.transform = 'scale(1.5)';

    boxRef.current.style.transition = 'transform 0.5s ease';



    setTimeout(() => {

      boxRef.current.style.transform = 'scale(1)';

    }, 500);

  };



  return (

    <div

      ref={boxRef}

      onClick={scaleBox}

      style={{

        width: '100px',

        height: '100px',

        backgroundColor: 'coral'

      }}

    >

      Click to Scale

    </div>

  );

}



export default ScalingBox;

Здесь useRef позволяет нам получить прямую ссылку на div, что облегчает управление стилями в JavaScript. При клике элемент сначала увеличивается, а затем возвращается к исходному размеру, создавая эффект масштабирования.

Эти простые примеры с хуками позволяют создавать разнообразные анимации, которые добавляют динамики и взаимодействия в приложение.