Framer Motion 5 个让动效起飞的技巧

动画能让界面"活"起来，但不好的动画会让用户抓狂。

技巧一：用 spring 代替 duration

// 不推荐
animate={{ x: 100 }}
transition={{ duration: 0.3 }}

// 推荐 - 更自然 animate={{ x: 100 }} transition={{ type: "spring", stiffness: 300, damping: 30 }} ```

技巧二：stagger 错开时间

使用 `staggerChildren` 让列表项逐个出现：

const container = {
  hidden: {},
  show: {
    transition: { staggerChildren: 0.1 }
  }
}

技巧三：whileInView 替代 IntersectionObserver

<motion.div
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
/>