คอมโพเนนต์ Motion และแอนิเมชันพื้นฐาน

Framer Motion คืออะไร

การติดตั้ง

npm install framer-motion

import { motion } from 'framer-motion';

แอนิเมชันแรกของคุณ

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
>
  Hello, Framer Motion!
</motion.div>

พร็อพ initial

// Fade in from left
<motion.div
  initial={{ opacity: 0, x: -50 }}
  animate={{ opacity: 1, x: 0 }}
/>

// Scale up from center
<motion.button
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
/>

พร็อพ animate

<motion.h1
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, color: '#4f46e5' }}
  transition={{ duration: 0.6, ease: 'easeOut' }}
>
  Welcome
</motion.h1>

ตัวเลือกการเปลี่ยนผ่าน

transition={{
  type: 'spring',
  stiffness: 300,
  damping: 20,
  delay: 0.2,
}}

คีย์เฟรมใน animate

<motion.div
  animate={{ x: [0, 30, 0] }}
  transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>

สถานะเมื่อวางเมาส์และแตะ

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
  whileTap={{ scale: 0.95 }}
  style={{ backgroundColor: '#6366f1' }}
>
  Press me
</motion.button>

ทำแอนิเมชันเมื่อเลื่อนด้วย inView

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.5 }}
>
  <h2>Revealed on scroll</h2>
</motion.section>

พร็อพ exit กับ AnimatePresence

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>

useAnimate สำหรับการควบคุมแบบสั่งการ

import { useAnimate } from 'framer-motion';

function ShakeButton() {
  const [scope, animate] = useAnimate();
  const handleClick = async () => {
    await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
  };
  return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}

การลดการเคลื่อนไหว

import { useReducedMotion } from 'framer-motion';

function AnimatedCard() {
  const shouldReduce = useReducedMotion();
  return (
    <motion.div
      animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
    />
  );
}

ตรวจสอบความเข้าใจ

สรุปทบทวน