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

1. Хук useAnimation:
   Хук useAnimation позволяет программно управлять анимацией. Вы можете использовать его для запуска анимации на основе взаимодействия с пользователем, событий или определенных условий. Вот пример:

import { useAnimation } from "framer-motion";
const MyComponent = () => {
  const controls = useAnimation();
  const startAnimation = () => {
    controls.start({ opacity: 1, scale: 1, transition: { duration: 0.5 } });
  };
  return (
    <div>
      <button onClick={startAnimation}>Start Animation</button>
      <motion.div initial={{ opacity: 0, scale: 0 }} animate={controls}>
        {/* Your content */}
      </motion.div>
    </div>
  );
};

1. Хук useCycle:
   Хук useCycle полезен, когда вы хотите циклически перемещаться по набору анимаций или состояний. Он позволяет вам определять несколько вариантов анимации и переключаться между ними с помощью простого вызова функции. Посмотрите этот пример:

import { useCycle } from "framer-motion";
const MyComponent = () => {
  const [animationState, cycleAnimation] = useCycle("open", "close");
  const toggleAnimation = () => {
    cycleAnimation();
  };
  return (
    <div>
      <button onClick={toggleAnimation}>Toggle Animation</button>
      <motion.div variants={{ open: { opacity: 1 }, close: { opacity: 0 } }} animate={animationState}>
        {/* Your content */}
      </motion.div>
    </div>
  );
};

1. Хук useTransform:
   Хук useTransform позволяет создавать динамические анимации путем сопоставления одного диапазона значений с другим. Это особенно полезно для анимации элементов на основе положения прокрутки, входных значений или любых других изменяющихся данных. Вот пример:

import { useTransform } from "framer-motion";
const MyComponent = () => {
  const scrollY = useScrollY(); // Custom hook to get scroll position
  const opacity = useTransform(scrollY, [0, 100], [1, 0]);
  return (
    <motion.div style={{ opacity }}>
      {/* Your content */}
    </motion.div>
  );
};

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

Не забудьте поэкспериментировать и изучить документацию Framer Motion, чтобы найти более захватывающие возможности анимации.