Компоненты Motion и базовые анимации
Замените div на motion.div и используйте свойства animate, initial и exit для простых анимаций.
«Компоненты Motion и базовые анимации» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое Framer Motion
Framer Motion — это библиотека анимаций для React. Заменяйте элементы HTML их эквивалентами motion.*, чтобы добавлять декларативные анимации через пропсы вместо ключевых кадров CSS.
Установка
Установите Framer Motion и импортируйте из него motion.
npm install framer-motion
import { motion } from 'framer-motion';Ваша первая анимация
Замените <div> на <motion.div> и добавьте пропсы initial, animate и transition.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>Проп начального состояния
initial задаёт начальное состояние анимации — положение, в котором элемент находится до перехода к состоянию animate.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>Проп целевого состояния
animate задаёт целевое состояние. Framer Motion интерполирует значения между initial и animate, используя физику пружины или указанное сглаживание.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Параметры перехода
Проп transition управляет тем, как выполняется анимация: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Ключевые кадры в анимации
Передайте массив для любого анимируемого значения, чтобы создать анимацию по ключевым кадрам, проходящую через несколько состояний.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Состояния при наведении и нажатии
whileHover и whileTap задают анимированные состояния для взаимодействий с наведением и нажатием, автоматически возвращаясь к исходному состоянию после завершения жеста.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Анимация при прокрутке с помощью inView
Используйте проп whileInView, чтобы запускать анимацию, когда элемент появляется в области просмотра.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>Проп выхода с AnimatePresence
exit задаёт анимацию при размонтировании компонента. Она работает только внутри <AnimatePresence>.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate для императивного управления
useAnimate() возвращает ссылку scope и функцию animate для программного управления анимацией вне системы декларативных пропсов.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Уменьшение анимации
Учитывайте предпочтение пользователя по уменьшению движения с помощью хука useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Быстрая проверка
Какой проп Framer Motion задаёт состояние анимации, которого должен достичь компонент, то есть его цель?
Итоги
Заменяйте элементы HTML эквивалентами motion.*. Используйте initial для начального состояния, animate для целевого, transition для настройки времени, whileHover/whileTap для жестов и whileInView для анимаций, запускаемых прокруткой.
Часто задаваемые вопросы
Урок «Компоненты Motion и базовые анимации» бесплатный?
Да — полный текст урока «Компоненты Motion и базовые анимации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Компоненты Motion и базовые анимации»?
Замените div на motion.div и используйте свойства animate, initial и exit для простых анимаций. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Компоненты Motion и базовые анимации»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Компоненты Motion и базовые анимации
- Варианты для согласованных анимаций
- Анимации жестов: наведение, нажатие и перетаскивание
- Анимации макета и AnimatePresence