조율된 애니메이션을 위한 변형
이름이 있는 변형 객체를 정의하고 부모-자식 컴포넌트 트리 전체에 전달합니다.
조율된 애니메이션을 위한 변형은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
변형 상태란 무엇입니까
변형 상태는 객체로 정의하는 이름이 지정된 애니메이션 상태입니다. 인라인 값을 사용하는 대신 구성 요소에서 'hidden' 및 'visible'과 같은 변형 상태 이름을 참조합니다. 부모 구성 요소는 자식 구성 요소를 자동으로 조정할 수 있습니다.
변형 상태 정의하기
이름이 지정된 상태를 포함하는 variants 객체를 만드십시오. 이를 모션 구성 요소의 variants 속성에 전달하십시오.
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>자식 구성 요소 순차 애니메이션
부모의 전환에 staggerChildren을 사용하면 각 자식 구성 요소 사이에 지연을 두고 하나씩 애니메이션할 수 있습니다.
const containerVariants = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0 },
};
<motion.ul variants={containerVariants} initial="hidden" animate="visible">
{items.map(item => (
<motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
))}
</motion.ul>변형 상태 전파
부모의 변형 상태가 변경되면 같은 변형 상태 이름을 공유하는 모든 자식 구성 요소도 자동으로 애니메이션됩니다. 각 자식 구성 요소에 animate를 전달할 필요가 없습니다.
// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
<motion.div variants={parent} initial="hidden" animate="visible">
<motion.p variants={child}>First</motion.p>
<motion.p variants={child}>Second</motion.p>
<motion.p variants={child}>Third</motion.p>
</motion.div>상태 간 전환하기
상태 변수를 사용해 어떤 변형 상태를 활성화할지 제어하십시오. Framer Motion은 이름이 지정된 상태 사이를 부드럽게 전환합니다.
const [isOpen, setIsOpen] = useState(false);
const panelVariants = {
closed: { height: 0, opacity: 0 },
open: { height: 'auto', opacity: 1 },
};
<motion.div
variants={panelVariants}
animate={isOpen ? 'open' : 'closed'}
initial="closed"
transition={{ duration: 0.3 }}
/>변형 상태별 사용자 지정 전환
특정 상태의 시간 설정만 사용자 지정하려면 변형 상태 내부에 transition 키를 추가하십시오.
const menuVariants = {
closed: {
scaleY: 0,
transition: { duration: 0.2, ease: 'easeIn' },
},
open: {
scaleY: 1,
transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
},
};AnimatePresence를 사용한 종료 변형 상태
변형 상태 객체에 exit 키를 추가하고 구성 요소를 AnimatePresence로 감싸 마운트 해제 시 애니메이션을 실행하십시오.
const pageVariants = {
initial: { opacity: 0, x: '100%' },
enter: { opacity: 1, x: 0 },
exit: { opacity: 0, x: '-100%' },
};
<AnimatePresence mode="wait">
<motion.div
key={router.pathname}
variants={pageVariants}
initial="initial"
animate="enter"
exit="exit"
transition={{ duration: 0.3 }}
/>
</AnimatePresence>중첩된 변형 상태 재정의
필요한 경우 자식 구성 요소가 자체 initial 또는 animate 속성으로 상속된 변형 상태를 재정의하여 부모의 조정에서 벗어날 수 있습니다.
명령형 변형 상태 제어를 위한 useAnimation
useAnimation()은 애니메이션 제어 객체를 반환합니다. 프로그래밍 방식으로 변형 상태를 시작하려면 controls.start('variantName')을 호출하십시오.
const controls = useAnimation();
async function sequence() {
await controls.start('wiggle');
await controls.start('bounce');
}
<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />조정 옵션
staggerChildren 외에도 when ('beforeChildren' | 'afterChildren')을 사용해 부모와 자식의 애니메이션 순서를 정할 수 있습니다.
const container = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
when: 'beforeChildren', // parent fades in before stagger starts
staggerChildren: 0.1,
},
},
};재사용 가능한 변형 상태 라이브러리
공유 파일에 변형 상태를 정의하고 필요한 곳에서 가져오면 앱 전체에서 애니메이션 설정을 일관되게 유지할 수 있습니다.
// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />빠른 확인
자식 애니메이션을 하나씩 지연시키는 Framer Motion 전환 옵션은 무엇입니까?
복습
변형 상태는 객체로 정의하는 이름이 지정된 상태입니다. 부모의 전환에 staggerChildren을 설정하면 자식 구성 요소 전체에 애니메이션이 자동으로 연쇄 적용됩니다. 명령형 제어에는 useAnimation()을 사용하고, 마운트 해제 애니메이션에는 종료 변형 상태와 함께 AnimatePresence를 사용하십시오.
자주 묻는 질문
“조율된 애니메이션을 위한 변형” 강의는 무료인가요?
네 — “조율된 애니메이션을 위한 변형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“조율된 애니메이션을 위한 변형”에서 뭘 배우나요?
이름이 있는 변형 객체를 정의하고 부모-자식 컴포넌트 트리 전체에 전달합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“조율된 애니메이션을 위한 변형” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.