Framer Motion - события перетаскивания и значения движения

С помощью библиотеки Framer Motion мы можем легко визуализировать анимацию в нашем приложении React.

В этой статье мы рассмотрим, как начать работу с Framer Motion.

Перетащить события

Мы можем отслеживать события перетаскивания с помощью событий onDrag, onDragStart, onDragEnd, onDirectionLock.

Например, мы можем написать:

import { motion } from "framer-motion";
import React from "react";
export default function App() {
  return (
    <>
      <motion.div
        style={{ backgroundColor: "red", width: 100, height: 100 }}
        drag="x"
        onDrag={(event, info) => console.log(info.point.x, info.point.y)}
        onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
        onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
      />
    </>
  );
}

чтобы мы могли слушать события перетаскивания.

info.point.x и info.point.y имеют координаты x и y положения перетаскивания.

Мы также можем добавить событие onDirectionLock для прослушивания блокировок направления перетаскивания.

Например, мы можем написать:

import { motion } from "framer-motion";
import React from "react";
export default function App() {
  return (
    <>
      <motion.div
        style={{ backgroundColor: "red", width: 100, height: 100 }}
        drag="x"
        dragDirectionLock
        onDirectionLock={(axis) => console.log(axis)}
        onDrag={(event, info) => console.log(info.point.x, info.point.y)}
        onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
        onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
      />
    </>
  );
}

Мы устанавливаем опору dragDirectionLock на true и опору drag на 'x', поэтому параметр axis будет установлен на 'x'.

MotionValue

MotionValues ​​отслеживает состояние и скорость анимации значений.

Мы можем создать MotionValues ​​вручную, чтобы установить и получить их состояние, передать несколько компонентов для синхронизации движения между компонентами, связать MotionValues ​​с помощью ловушки useTransform и обновить визуальные свойства без повторного рендеринга.

Например, мы можем использовать их для изменения непрозрачности div при перетаскивании, написав:

import { motion, useMotionValue, useTransform } from "framer-motion";
import React from "react";
const input = [-200, 0, 200];
const output = [0, 1, 0];
export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, input, output);
  return (
    <motion.div
      drag="x"
      style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

Хук useMotionValue используется для создания MotionValue.

Затем мы используем значение useTransform для сопоставления значения x с input и output.

Массив input имеет диапазон позиций в массиве.

Массив output имеет диапазон непрозрачности.

Таким образом, позиция изменяется при перетаскивании, и это возвращает непрозрачность div.

Мы можем получить и установить MotionValues.

Метод set устанавливает MotionValue.

А методы get и getVelocity получают позицию и скорость соответственно.

Например, мы можем написать:

import { motion, useMotionValue, useTransform } from "framer-motion";
import React, { useEffect } from "react";
const input = [-200, 0, 200];
const output = [0, 1, 0];
export default function App() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, input, output);
  useEffect(() => {
    x.set(100);
  }, []);
  useEffect(() => {
    console.log(x.get());
    console.log(x.getVelocity());
  }, [x]);
  return (
    <motion.div
      drag="x"
      style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
    />
  );
}

для установки положения с помощью set и получения положения и скорости с помощью get и getVelocity.

Заключение

Мы можем получать и устанавливать значения MotionValue и обрабатывать события перетаскивания с помощью Framer Motion.