Framer Motion — это мощная библиотека анимации для React, которая позволяет разработчикам создавать потрясающие интерактивные пользовательские интерфейсы. В этой статье мы рассмотрим различные методы, предоставляемые Framer Motion, и предоставим примеры кода, демонстрирующие их использование. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство поможет вам использовать весь потенциал Framer Motion в ваших веб-проектах.
- Базовые анимации.
Framer Motion обеспечивает простой способ анимации элементов. Вот пример анимации элемента div:
import { motion } from "framer-motion";
const MyComponent = () => {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Hello, Framer Motion!
</motion.div>
);
};
- Варианты.
Варианты позволяют определять многократно используемые состояния анимации для элементов. Вот пример использования вариантов для создания прыгающей кнопки:
import { motion } from "framer-motion";
const buttonVariants = {
initial: { scale: 1 },
hover: { scale: 1.2 },
};
const MyComponent = () => {
return (
<motion.button
variants={buttonVariants}
initial="initial"
whileHover="hover"
>
Click me!
</motion.button>
);
};
- Жесты.
Framer Motion позволяет легко добавлять интерактивные жесты к вашим компонентам. Вот пример перетаскивания элемента div:
import { motion } from "framer-motion";
const MyComponent = () => {
return (
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
>
Drag me!
</motion.div>
);
};
- Переходы страниц.
Framer Motion позволяет создавать плавные переходы страниц. Вот пример плавного перехода между страницами:
import { motion } from "framer-motion";
const MyComponent = () => {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
Page content
</motion.div>
);
};
- Анимация SVG:
Framer Motion поддерживает анимацию элементов SVG. Вот пример анимации круга SVG:
import { motion } from "framer-motion";
const MyComponent = () => {
return (
<svg>
<motion.circle
cx="50"
cy="50"
r="25"
fill="blue"
animate={{ cx: [null, 100, 50], cy: [null, 50, 100], fill: ["blue", "red"] }}
transition={{ duration: 2, repeat: Infinity }}
/>
</svg>
);
};
Framer Motion — это универсальная библиотека анимации, которая оживляет ваши приложения React. В этой статье мы рассмотрели различные методы, предоставляемые Framer Motion, включая базовые анимации, варианты, жесты, переходы страниц и анимацию SVG. Используя возможности Framer Motion, вы можете создавать привлекательный и визуально привлекательный пользовательский опыт. Поэкспериментируйте с этими примерами и раскройте весь потенциал Framer Motion в своих проектах.