Framer Motion의 드래그 앤 드롭을 위한 변형

Framer Motion 라이브러리를 사용하면 React 앱에서 애니메이션을 쉽게 렌더링할 수 있습니다.

이 기사에서는 Framer Motion을 시작하는 방법을 살펴보겠습니다.

변형

변형으로 스타일을 구성할 수 있습니다.

이를 통해 단일animate 소품으로 전환하여 구성 요소 트리 전체에서 애니메이션을 제어할 수 있습니다.

견본:

import React from "react";
import { motion } from "framer-motion";
const variants = {
  active: {
    backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
};
export default function App() {
  return (
    <>
      <motion.div
        style={{ width: 100, height: 100 }}
        variants={variants}
        animate="active"
      />
    </>
  );
}

애니메이션의 다양한 단계에서 적용할 몇 가지 스타일로 variants 개체를 만듭니다.

그런 다음 variants 개체를 variants 소품의 값으로 전달하여 적용합니다.

그런 다음 animate를 'active'로 설정하여 애니메이션이 종료될 때 스타일을 활성 속성의 스타일로 설정합니다.

스타일

style prop은 React의 style prop과 같지만 모션 값과 transform 값을 지원하도록 향상되었습니다.

견본:

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

x 모션 값을 style 소품으로 전달하여 div의 수평 위치를 설정할 수 있습니다.

레이아웃 애니메이션

Framer Motion으로 레이아웃 애니메이션을 만들 수 있습니다.
layout 소품을 사용하면 레이아웃이 변경될 때 요소를 새 위치로 애니메이션화할 수 있습니다.

견본:

import React from "react";
import { AnimateSharedLayout, motion } from "framer-motion";
const items = [
  { name: "foo", isSelected: true, id: 1 },
  { name: "bar", isSelected: false, id: 2 },
  { name: "baz", isSelected: true, id: 3 }
];
export default function App() {
  return (
    <AnimateSharedLayout>
      {items.map((item) => (
        <motion.li layout key={item.id}>
          {item.name}
          {item.isSelected && <motion.hr layoutId="underline" />}
        </motion.li>
      ))}
    </AnimateSharedLayout>
  );
}

AnimateSharedLayout 구성 요소를 사용하여 레이아웃의 변경 사항을 애니메이션으로 만들 수 있습니다.
motion.li 레이아웃이 변경될 때 li 요소에 애니메이션을 적용하는 li가 있습니다.

견인

Framer Motion으로 요소에 드래그 앤 드롭 기능을 추가할 수 있습니다.

견본:

import React, { useRef } from "react";
import { motion } from "framer-motion";
export default function App() {
  const constraintsRef = useRef(null);
  return (
    <motion.div
      ref={constraintsRef}
      style={{ background: "green", width: 200, height: 200 }}
    >
      <motion.div
        drag
        dragConstraints={constraintsRef}
        style={{ background: "red", width: 100, height: 100 }}
      />
    </motion.div>
  );
}

빨간색 div를 녹색 div 내에서 드래그할 수 있습니다. 녹색 div에 ref를 할당하여 이를 수행합니다. 그런 다음 ref를 dragConstraints prop의 값으로 전달합니다. drag 소품을 사용하면 빨간색 div에서 드래그할 수 있습니다.