49. Framer Motion: Жесты

Framer Motion предоставляет мощные инструменты для обработки жестов: наведение, клик, перетаскивание (drag) и панорамирование.

Icon: Hand (Рука)

Описание

Вместо ручной обработки onMouseDown, onMouseMove и onMouseUp, вы просто передаете декларативные пропсы компоненту motion.

Mermaid Диаграмма

graph TD
    User[Пользователь] -->|Hover| WhileHover[whileHover]
    User -->|Tap/Click| WhileTap[whileTap]
    User -->|Drag| Drag[drag & dragConstraints]
    WhileHover --> UI[Визуальный отклик]
    WhileTap --> UI
    Drag --> UI

Примеры жестов

Наведение и Клик

<motion.button
  whileHover={{ scale: 1.1, backgroundColor: "#f00" }}
  whileTap={{ scale: 0.9 }}
>
  Нажми меня
</motion.button>

Перетаскивание (Drag)

<motion.div
  drag
  dragConstraints={{ left: -50, right: 50, top: -50, bottom: 50 }}
  dragElastic={0.2}
  whileDrag={{ scale: 1.2, boxShadow: "0px 5px 10px rgba(0,0,0,0.2)" }}
  style={{ width: 100, height: 100, background: 'green' }}
/>

Drag Constraints

Вы можете ограничить область перетаскивания:

• Объектом с координатами: { left: 0, right: 100 }.
• Рефом на родительский элемент (ref).

События жестов

Вы можете подписываться на колбэки:

• onDragStart
• onDragEnd
• onHoverStart
• onTap

Это позволяет синхронизировать анимацию с логикой вашего приложения.

---

🔗 Полезные ссылки

• Основы Framer Motion

Практика

Попробуйте примеры в интерактивном редакторе: