framer-motion（Framer Motion 工具）

Framer Motion

Basic Animation

import { motion } from 'framer-motion'

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Hello World
    </motion.div>
  )
}

Animate Properties

<motion.div
  animate={{
    x: 100,
    y: 50,
    scale: 1.2,
    rotate: 180,
    opacity: 0.5,
    backgroundColor: '#ff0000',
    borderRadius: '50%',
  }}
  transition={{
    duration: 0.5,
    ease: 'easeInOut',
    delay: 0.2,
  }}
/>

Transition Types

// Spring (default)
transition={{ type: 'spring', stiffness: 100, damping: 10 }}

// Tween
transition={{ type: 'tween', duration: 0.5, ease: 'easeInOut' }}

// Inertia
transition={{ type: 'inertia', velocity: 50 }}

// Ease presets
ease: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'backIn' | 'backOut' | 'anticipate'

Variants

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
}

function List({ items }) {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item) => (
        <motion.li key={item.id} variants={itemVariants}>
          {item.name}
        </motion.li>
      ))}
    </motion.ul>
  )
}

Hover, Tap, Focus

<motion.button
  whileHover={{ scale: 1.05, backgroundColor: '#3b82f6' }}
  whileTap={{ scale: 0.95 }}
  whileFocus={{ boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.5)' }}
>
  Click me
</motion.button>

Drag

<motion.div
  drag                    // Enable both axes
  drag="x"                // Horizontal only
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  dragElastic={0.2}       // Elasticity outside constraints
  dragMomentum={true}     // Continue after release
  onDragStart={(e, info) => console.log(info.point)}
  onDrag={(e, info) => console.log(info.delta)}
  onDragEnd={(e, info) => console.log(info.velocity)}
/>

Scroll Animations

import { motion, useScroll, useTransform } from 'framer-motion'

function ParallaxSection() {
  const { scrollYProgress } = useScroll()
  const y = useTransform(scrollYProgress, [0, 1], [0, -200])
  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0])

  return (
    <motion.div style={{ y, opacity }}>
      Parallax Content
    </motion.div>
  )
}

// Scroll-triggered animation
function ScrollTriggered() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 0.6 }}
    >
      Appears on scroll
    </motion.div>
  )
}

Layout Animations

function LayoutExample() {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <motion.div
      layout
      onClick={() => setIsExpanded(!isExpanded)}
      style={{
        width: isExpanded ? 300 : 100,
        height: isExpanded ? 200 : 100,
      }}
      transition={{ layout: { duration: 0.3 } }}
    />
  )
}

// Shared layout
import { LayoutGroup } from 'framer-motion'

function Tabs() {
  const [selected, setSelected] = useState(0)

  return (
    <LayoutGroup>
      {tabs.map((tab, i) => (
        <button key={tab} onClick={() => setSelected(i)}>
          {tab}
          {selected === i && (
            <motion.div layoutId="underline" className="underline" />
          )}
        </button>
      ))}
    </LayoutGroup>
  )
}

AnimatePresence (Exit Animations)

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

function Modal({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9 }}
          transition={{ duration: 0.2 }}
        >
          <ModalContent onClose={onClose} />
        </motion.div>
      )}
    </AnimatePresence>
  )
}

useAnimate Hook

import { useAnimate } from 'framer-motion'

function SequenceAnimation() {
  const [scope, animate] = useAnimate()

  const handleClick = async () => {
    await animate(scope.current, { scale: 1.2 })
    await animate(scope.current, { rotate: 180 })
    await animate(scope.current, { scale: 1, rotate: 0 })
  }

  return (
    <motion.div ref={scope} onClick={handleClick}>
      Click for sequence
    </motion.div>
  )
}

Motion Values

import { motion, useMotionValue, useTransform } from 'framer-motion'

function MotionValueExample() {
  const x = useMotionValue(0)
  const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])
  const background = useTransform(
    x,
    [-200, 0, 200],
    ['#ff0000', '#00ff00', '#0000ff']
  )

  return (
    <motion.div
      drag="x"
      style={{ x, opacity, background }}
    />
  )
}

Stagger Children

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.3,
    },
  },
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
}

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map((i) => (
    <motion.li key={i} variants={item} />
  ))}
</motion.ul>

Loading Skeleton

function Skeleton() {
  return (
    <motion.div
      animate={{ opacity: [0.5, 1, 0.5] }}
      transition={{ duration: 1.5, repeat: Infinity }}
      className="bg-gray-200 rounded h-4"
    />
  )
}

Number Counter

import { motion, useSpring, useTransform } from 'framer-motion'

function Counter({ value }) {
  const spring = useSpring(0, { stiffness: 100, damping: 30 })
  const display = useTransform(spring, (v) => Math.round(v))

  useEffect(() => {
    spring.set(value)
  }, [value, spring])

  return <motion.span>{display}</motion.span>
}