React Academy · 课时

Motion 组件与基础动画

Q: 「Motion 组件与基础动画」这节课中我会学到什么？

将 div 替换为 motion.div，并使用 animate、initial 和 exit 属性实现简单动画。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 div 替换为 motion.div，并使用 animate、initial 和 exit 属性实现简单动画。

第 1 / 4 课14 个步骤

Motion 组件与基础动画 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是 Framer Motion

Framer Motion 是一个 React 动画库。将 HTML 元素替换为对应的 motion.*，即可通过属性而不是 CSS 关键帧添加声明式动画。

安装

安装 Framer Motion，并从中导入 motion。

npm install framer-motion

import { motion } from 'framer-motion';

您的第一个动画

将 <div> 替换为 <motion.div>，并添加 initial、animate 和 transition 属性。

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

initial 属性

initial 定义动画的起始状态 — 即元素在动画过渡到 animate 状态之前所处的状态。

// 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 属性

animate 定义目标状态。Framer Motion 会使用弹簧物理效果或指定的缓动函数，在 initial 和 animate 之间进行插值。

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

过渡选项

transition 属性控制动画的运动方式：duration、ease、delay、type（'spring' | 'tween' | 'inertia'）。

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' }}
/>

悬停和点击状态

whileHover 和 whileTap 为悬停和按压交互定义动画状态，并在手势结束时自动恢复。

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

使用 inView 在滚动时添加动画

使用 whileInView 属性，在元素滚动进入视口时触发动画。

<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>

使用 AnimatePresence 的 exit 属性

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 进行命令式控制

useAnimate() 返回一个 scope 引用和一个 animate 函数，用于在声明式属性系统之外以编程方式控制动画。

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>;
}

减少动画

请通过 useReducedMotion() 钩子尊重用户的减少动画偏好。

import { useReducedMotion } from 'framer-motion';

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

快速检查

Framer Motion 的哪个属性定义了组件应到达的动画状态（即目标状态）？

在交互式课程中回答

回顾

将 HTML 元素替换为 motion.* 对应项。使用 initial 设置起始状态，使用 animate 设置目标状态，使用 transition 设置时间安排，使用 whileHover/whileTap 处理手势，并使用 whileInView 创建由滚动触发的动画。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「Motion 组件与基础动画」课时是免费的吗？

是的 — 「Motion 组件与基础动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Motion 组件与基础动画」这节课中我会学到什么？

将 div 替换为 motion.div，并使用 animate、initial 和 exit 属性实现简单动画。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Motion 组件与基础动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy