Анимации жестов: наведение, нажатие и перетаскивание
Используйте свойства whileHover, whileTap и drag, чтобы анимировать компоненты в ответ на жесты пользователя.
«Анимации жестов: наведение, нажатие и перетаскивание» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Обзор пропсов жестов
Пропсы жестов Framer Motion анимируют компоненты в ответ на ввод пользователя без обработчиков событий JavaScript. Основные из них — whileHover, whileTap, whileDrag и whileFocus.
whileHover
Задаёт анимированное состояние, пока курсор находится над элементом. Автоматически возвращает исходное состояние, когда курсор покидает элемент.
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Hover me
</motion.button>whileTap
Задаёт анимированное состояние, пока элемент нажат. Идеально подходит для визуальной обратной связи при нажатии кнопки.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Запускает анимацию, когда элемент получает фокус клавиатуры, — это особенно полезно для доступных индикаторов фокуса.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Включение перетаскивания
Добавьте проп drag, чтобы сделать элемент перетаскиваемым. Установите значение true, 'x' или 'y', чтобы ограничить ось.
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
style={{ cursor: 'grab' }}
>
Drag me
</motion.div>dragConstraints со ссылкой
Ограничьте перетаскивание контейнером с помощью ссылки вместо значений в пикселях — перетаскиваемый элемент не сможет покинуть контейнер.
const constraintsRef = useRef(null);
<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
<motion.div
drag
dragConstraints={constraintsRef}
style={{ width: 80, height: 80, background: '#4f46e5' }}
/>
</div>dragElastic
dragElastic управляет тем, насколько элемент может выйти за установленные ограничения при перетаскивании (0 = без упругости, 1 = полная упругость).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Установка dragSnapToOrigin заставляет элемент пружинить обратно в исходное положение после отпускания.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>События панорамирования
Используйте onPanStart, onPan и onPanEnd, чтобы отслеживать положение курсора во время жестов панорамирования без включения полноценного режима перетаскивания.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>События перетаскивания
Отслеживайте события жизненного цикла перетаскивания: onDragStart, onDrag и onDragEnd. Объект info содержит скорость и смещение.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Шаблон смахивания карточки
Реализуйте смахивание в стиле Tinder, используя скорость перетаскивания для определения направления смахивания после отпускания.
function SwipeCard({ onSwipe }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.7}
onDragEnd={(_, info) => {
if (Math.abs(info.velocity.x) > 400) {
onSwipe(info.velocity.x > 0 ? 'right' : 'left');
}
}}
/>
);
}Быстрая проверка
Какой проп Framer Motion возвращает перетаскиваемый элемент в исходное положение после отпускания?
Итоги
Используйте whileHover, whileTap и whileFocus для анимации интерактивных состояний. Добавляйте drag для перетаскиваемых элементов, ограничивайте движение с помощью dragConstraints и используйте скорость в onDragEnd для определения смахиваний.
Часто задаваемые вопросы
Урок «Анимации жестов: наведение, нажатие и перетаскивание» бесплатный?
Да — полный текст урока «Анимации жестов: наведение, нажатие и перетаскивание» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Анимации жестов: наведение, нажатие и перетаскивание»?
Используйте свойства whileHover, whileTap и drag, чтобы анимировать компоненты в ответ на жесты пользователя. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Анимации жестов: наведение, нажатие и перетаскивание»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Компоненты Motion и базовые анимации
- Варианты для согласованных анимаций
- Анимации жестов: наведение, нажатие и перетаскивание
- Анимации макета и AnimatePresence