React Academy · 课时

手势动画：悬停、点击与拖拽

Q: 「手势动画：悬停、点击与拖拽」这节课中我会学到什么？

使用 whileHover、whileTap 和 drag 属性，根据用户手势为组件添加动画。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 whileHover、whileTap 和 drag 属性，根据用户手势为组件添加动画。

第 3 / 4 课13 个步骤

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

手势属性概览

Framer Motion 手势属性会响应用户输入为组件添加动画，而无需使用 JavaScript 事件处理程序。主要属性包括 whileHover、whileTap、whileDrag 和 whileFocus。

whileHover

定义光标悬停在元素上时的动画状态。光标离开后会自动恢复。

<motion.button
  whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Hover me
</motion.button>

whileTap

定义元素被按下时的动画状态，非常适合提供按钮按压反馈。

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click
</motion.button>

whileFocus

元素获得键盘焦点时播放动画 — 非常适合创建无障碍焦点指示器。

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

启用拖拽

添加 drag 属性即可使元素可拖拽。将其设置为 true、'x' 或 'y'，即可限制拖拽轴。

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
  style={{ cursor: 'grab' }}
>
  Drag me
</motion.div>

使用引用设置 dragConstraints

使用引用将拖拽限制在容器元素内，而不是使用像素值 — 可拖拽元素无法离开该容器。

const constraintsRef = useRef(null);

<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    style={{ width: 80, height: 80, background: '#4f46e5' }}
  />
</div>

拖拽弹性

dragElastic 控制元素超出拖拽约束后还能被拖动多少（0 = 无弹性，1 = 完全弹性）。

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

拖拽回到原点

设置 dragSnapToOrigin 后，元素在释放时会以弹簧效果回到原始位置。

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

平移事件

使用 onPanStart、onPan 和 onPanEnd 跟踪平移手势期间的光标位置，而无需启用完整的拖拽模式。

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

拖拽事件

监听拖拽生命周期事件：onDragStart、onDrag 和 onDragEnd。info 对象包含速度和偏移量。

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

卡片滑动模式

使用拖拽速度检测释放时的滑动方向，即可实现 Tinder 风格的滑动。

function SwipeCard({ onSwipe }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.7}
      onDragEnd={(_, info) => {
        if (Math.abs(info.velocity.x) > 400) {
          onSwipe(info.velocity.x > 0 ? 'right' : 'left');
        }
      }}
    />
  );
}

快速检查

释放拖拽元素时，Framer Motion 的哪个属性会使它回到原始位置？

在交互式课程中回答

回顾

使用 whileHover、whileTap 和 whileFocus 创建交互状态动画。为可拖拽元素添加 drag，使用 dragConstraints 设置约束，并利用 onDragEnd 中的速度检测滑动手势。

免费开始

用 AI 导师学习 React — 免费

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

课程: 88
课程: 324

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

常见问题解答

「手势动画：悬停、点击与拖拽」课时是免费的吗？

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

「手势动画：悬停、点击与拖拽」这节课中我会学到什么？

使用 whileHover、whileTap 和 drag 属性，根据用户手势为组件添加动画。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「手势动画：悬停、点击与拖拽」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy