mcpField
F
framer-motion

framer-motion

github.com/calesthio设计与 UI73.0k1.1k 次安装1 天前更新
代码仓库

关于 framer-motion

这项参考技能介绍如何用 Framer Motion 的声明式 React API 实现迪士尼 12 条动画原则，并说明状态变体、手势、时长和子元素交错等功能。

主要功能

  1. 01十二条动画原则
  2. 02声明式 React 动画
  3. 03变体与动画状态
  4. 04手势和退出动画
  5. 05时长设置与子元素交错

适用场景

  1. 01在 React 界面应用动画原则
  2. 02设置动作时长和缓动
  3. 03为悬停或点击添加动画
  4. 04交错显示子元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill framer-motion

安装后在 Claude Code 中输入/framer-motion确认已加载。

详细介绍

Framer Motion 动画原理

使用 Framer Motion 声明式 React API 实现迪士尼的全部 12 条动画原理。

1. 挤压与拉伸

<motion.div
  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
  transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>

2. 预备动作

<motion.div
  variants={{
    idle: { y: 0, scaleY: 1 },
    anticipate: { y: 10, scaleY: 0.9 },
    jump: { y: -200 }
  }}
  initial="idle"
  animate={["anticipate", "jump"]}
  transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>

3. 演出布局

<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}

4. 连续动作 / 关键姿势

<motion.div
  animate={{
    x: [0, 100, 200, 300],
    y: [0, -50, 0, -30]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>

5. 跟随动作与重叠动作

<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.5, delay: 0.05 }} // hair
  />
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.6, delay: 0.1 }} // cape
  />
</motion.div>

6. 慢入与慢出

<motion.div
  animate={{ x: 300 }}
  transition={{
    duration: 0.6,
    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier
  }}
/>
// Or use: "easeIn", "easeOut", "easeInOut"

7. 弧线运动

<motion.div
  animate={{
    x: [0, 100, 200],
    y: [0, -100, 0]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>

8. 次要动作

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  <motion.span
    animate={{ rotate: [0, 10, -10, 0] }}
    transition={{ duration: 0.3 }}
  >
    Icon
  </motion.span>
</motion.button>

9. 时间把控

const timings = {
  fast: { duration: 0.15 },
  normal: { duration: 0.3 },
  slow: { duration: 0.6 },
  spring: { type: "spring", stiffness: 300, damping: 20 }
};

10. 夸张手法

<motion.div
  animate={{ scale: 1.5, rotate: 720 }}
  transition={{
    type: "spring",
    stiffness: 200,
    damping: 10 // low damping = overshoot
  }}
/>

11. 扎实绘制

<motion.div
  style={{ perspective: 1000 }}
  animate={{ rotateX: 45, rotateY: 30 }}
  transition={{ duration: 0.5 }}
/>

12. 魅力

<motion.div
  whileHover={{
    scale: 1.02,
    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
  }}
  transition={{ duration: 0.3 }}
/>

子元素交错动画

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

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

Framer Motion 的主要功能

  • animate - 目标状态
  • variants - 命名动画状态
  • whileHover / whileTap - 手势动画
  • transition - 时间与缓动
  • AnimatePresence - 退出动画
  • useAnimation - 通过编程控制
  • layout - 自动为布局变化添加动画

评论

支持 Markdown