3 продвинутых Framer Motion эффекта в React

Анимации — мощный инструмент для улучшения пользовательского опыта, и когда дело доходит до создания анимаций в React, Framer Motion — популярная библиотека.

В этом посте мы рассмотрим 3 сложные анимации или эффекты, которые можно создать с помощью Framer Motion в React и которые поднимут ваш веб-сайт на новый уровень.

1. Эффект следования за мышью

В этом случае небольшой элемент, например круг, следует за мышью при ее движении. Чтобы добиться этого эффекта, нам сначала нужно отслеживать положение курсора каждый раз, когда он перемещается. Мы сохраняем значения x и y положения мыши в переменной состояния. Затем мы создаем эффект, который запускает функцию pointermove.

Чтобы получить позицию мыши относительно объекта, который будет следовать за мышью, мы добавим ref к этому элементу. В функции pointermove мы используем свойства окна clientX и clientY в качестве параметров объекта. Вот код эффекта:

useEffect(() => {
  //  check if DOM element referenced by ref has been mounted
  if (ref.current) {
    const handlePointerMove = ({ clientX, clientY }) => {
      const element = ref.current;
      // calculate x and y coordinates
      const x = clientX - element.offsetLeft - element.offsetWidth / 2;
      const y = clientY - element.offsetTop - element.offsetHeight / 2;
      // update state
      setCoordinates({ x, y });
    };

    window.addEventListener("pointermove", handlePointerMove);
    return () => window.removeEventListener("pointermove", handlePointerMove);
  }
}, []);

Здесь element относится к элементу DOM, на который в данный момент ссылается объект ref (в нашем случае круг, который будет следовать за мышью). Координаты x и y вычисляются путем вычитания offsetLeft из offsetTop горизонтальных и вертикальных координат положения указателя на экране (clientX и clientY). Наконец, мы вычитаем половину ширины и высоты элемента из значений, рассчитанных выше, чтобы гарантировать, что указатель расположен в центре круга.

Далее мы создаем круг с помощью компонента motion.div, присваивая ему объект ref. Значения x и y будут анимированы с использованием значений состояния, а также мы добавим пружинящий переход, чтобы создать крутой эффект отскока.

Полный код и демо-версию можно увидеть ниже:

2. Перетаскиваемый список

Общей функцией большинства списков, таких как списки дел, списки сохраненных элементов или просто настраиваемые вкладки, является возможность переупорядочивать элементы с помощью функции перетаскивания. Давайте углубимся в то, как создавать перетаскиваемые списки с помощью Framer Motion в React.

Для этого эффекта мы будем использовать компонент ReOrder.Group, доступный в Framer Motion. Список будет заключен в этот компонент, или вы можете напрямую отображать элементы списка внутри этого компонента. Несколько интересных реквизитов, доступных для компонента ReOrder.Group:

• as: Определите, хотите ли вы, чтобы список был упорядоченным или неупорядоченным.
• axis: Укажите ориентацию списка. Например, вертикальное расположение для списков дел и горизонтальное расположение вкладок.
• values: Массив значений, используемый в качестве источника.
• onReorder(newOrder): Это функция обратного вызова, которая запускается при перетаскивании элементов и изменении их порядка. Обычно функция stateSetter передается, если элементы списка хранятся в массиве состояний.

Кроме того, для компонента есть несколько полезных реквизитов Reorder.Item. Вы можете проверить их в официальной документации.

Основы довольно просты. Чтобы создать демонстрационную версию перетаскиваемого списка, следующий код предоставляет основы:

export default function App() {
  const [listItems, setListItems] = useState(list);

  return (
    <Reorder.Group axis="y" onReorder={setListItems} values={listItems}>
      {listItems.map((el) => (
        <Reorder.Item key={el} value={el}>
          <span>{el}</span>
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}

Здесь мы отображаем массив состояний элементов списка. Каждый элемент представлен в виде Reorder.Item в рамках Reorder.Group. Ось вертикальная, а значением по умолчанию является неупорядоченный список. Демо можно увидеть ниже:

3. Эффект параллакса

Эффект parallax — это широко используемый метод, используемый для создания глубины и динамизма путем перемещения элементов с разной скоростью при прокрутке веб-страницы пользователем. Мы можем создать этот эффект, используя всего пару строк кода с помощью Framer Motion. В нашем примере у нас будет текст поверх полноэкранного изображения. Текст будет двигаться с другой скоростью по сравнению с фоном.

Чтобы создать этот эффект, мы сначала рассчитаем прогресс вертикальной прокрутки страницы относительно контрольной точки (в нашем случае текста). Затем мы воспользуемся хуком useTransform и сопоставим это значение с диапазоном [-60, 60], который представляет максимальное и минимальное смещение текста по оси Y. Это преобразованное значение затем применяется как свойство y в стиле текста, создавая желаемый эффект параллакса.

function App() {
  const textRef = useRef();
  const { scrollYProgress } = useScroll({ target: textRef });
  const y = useTransform(scrollYProgress, [0, 1], [-60, 60]);

  return (
    <div className="app">
      <motion.div className="text" ref={textRef} style={{ y: y, x: "-50%" }}>
        <h2>Hello, World!</h2>
        <p>Framer motion parallax effects are super cool!</p>
      </motion.div>
      <img
        src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_640.png"
        className="background-image"
      />
    </div>
  );
}

scrollYProgress дает нам значение от 0 до 1 в зависимости от процента прокрутки страницы относительно файла textRef.

Результат будет выглядеть примерно так:

Вы также можете добавить эффект свечения трассировки мыши к компонентам React.