在现代 Web 应用中，优雅的过渡动画能够显著提升用户体验。Framer Motion 的 layoutId 属性为我们提供了一种强大而简洁的方式来实现"共享元素动画"——让同一个视觉元素在不同位置之间平滑过渡，就像是在不同组件之间"传送"一样。

什么是 layoutId？

layoutId 是 Framer Motion 中的一个特殊属性，它允许你标记不同的 motion 组件，使它们在视觉上表现为"同一个元素"。当具有相同 layoutId 的元素在 DOM 中出现或消失时，Framer Motion 会自动创建一个平滑的布局动画。

核心概念

layoutId 的工作原理基于以下几个关键点：

1. 单例模式：在任意时刻，具有相同 layoutId 的元素在视觉上被视为同一个元素
2. 自动过渡：当元素位置、大小或形状改变时，自动生成流畅的过渡动画
3. 跨组件工作：即使元素在不同的 React 组件中，只要 layoutId 相同就能实现动画

基础示例：选项卡切换

让我们从一个最常见的场景开始——选项卡的活动指示器动画。

1import { motion } from "motion/react";
2import { useState } from "react";
3
4const tabs = ["首页", "文章", "相册", "关于"];
5
6function TabBar() {
7  const [activeTab, setActiveTab] = useState(0);
8
9  return (
10    <div className="flex gap-2 bg-gray-100 p-2 rounded-lg">
11      {tabs.map((tab, index) => (
12        <button
13          key={tab}
14          onClick={() => setActiveTab(index)}
15          className="relative px-4 py-2 text-sm font-medium transition-colors"
16        >
17          {/* 共享的活动背景 */}
18          {activeTab === index && (
19            <motion.div
20              layoutId="tab-indicator"
21              className="absolute inset-0 bg-white rounded-md shadow"
22              transition={{
23                type: "spring",
24                duration: 0.5,
25                bounce: 0.2,
26              }}
27            />
28          )}
29          <span className="relative z-10">{tab}</span>
30        </button>
31      ))}
32    </div>
33  );
34}

关键点：

• 活动背景使用 layoutId="tab-indicator"，确保同一时刻只有一个背景元素
• 当 activeTab 改变时，背景会自动从旧位置过渡到新位置
• transition 配置控制动画的物理效果（关于 spring 参数，详见《深入理解 Framer Motion 弹簧动画的物理原理》）

进阶示例：目录导航高亮

在我的博客中，我实现了一个灵动岛样式的目录导航。当用户滚动页面时，当前章节会高亮显示，而高亮背景会平滑地在不同章节之间移动。

1function TableOfContents({ items }: { items: TocItem[] }) {
2  const [activeId, setActiveId] = useState<string>("");
3
4  return (
5    <div className="space-y-1">
6      {items.map((item) => (
7        <motion.button
8          key={item.id}
9          onClick={() => scrollTo(item.id)}
10          className={cn(
11            "relative w-full text-left px-3 py-2 rounded-lg",
12            activeId === item.id
13              ? "text-white font-medium"
14              : "text-white/70"
15          )}
16        >
17          {/* 共享的高亮背景 */}
18          {activeId === item.id && (
19            <motion.div
20              layoutId="active-toc-background"
21              className="absolute inset-0 bg-white/20 rounded-lg"
22              transition={{
23                type: "spring",
24                duration: 0.38,
25                bounce: 0,
26              }}
27            />
28          )}
29          
30          <span className="relative z-10">{item.text}</span>
31
32          {/* 共享的当前章节指示器 */}
33          {activeId === item.id && (
34            <motion.div
35              layoutId="active-toc-indicator"
36              className="relative w-3 h-3"
37              transition={{
38                type: "spring",
39                duration: 0.38,
40                bounce: 0,
41              }}
42            >
43              <div className="w-1.5 h-1.5 rounded-full bg-white" />
44            </motion.div>
45          )}
46        </motion.button>
47      ))}
48    </div>
49  );
50}

亮点：

• 使用了两个不同的 layoutId：active-toc-background 和 active-toc-indicator
• 每个 layoutId 独立工作，创建两个独立的共享动画
• z-index 通过 z-10 确保文字始终在动画背景之上

实战案例：图片画廊展开

一个更复杂的场景是从缩略图网格展开到全屏查看。

1function Gallery() {
2  const [selectedId, setSelectedId] = useState<string | null>(null);
3
4  return (
5    <>
6      {/* 缩略图网格 */}
7      <div className="grid grid-cols-3 gap-4">
8        {images.map((image) => (
9          <motion.div
10            key={image.id}
11            layoutId={`image-${image.id}`}
12            onClick={() => setSelectedId(image.id)}
13            className="aspect-square rounded-lg overflow-hidden cursor-pointer"
14          >
15            <img src={image.thumbnail} alt={image.title} />
16          </motion.div>
17        ))}
18      </div>
19
20      {/* 全屏预览 */}
21      {selectedId && (
22        <>
23          {/* 遮罩层 */}
24          <motion.div
25            initial={{ opacity: 0 }}
26            animate={{ opacity: 1 }}
27            exit={{ opacity: 0 }}
28            className="fixed inset-0 bg-black/80 z-50"
29            onClick={() => setSelectedId(null)}
30          />
31
32          {/* 展开的图片 */}
33          <motion.div
34            layoutId={`image-${selectedId}`}
35            className="fixed inset-0 z-50 flex items-center justify-center p-8"
36          >
37            <img
38              src={images.find((img) => img.id === selectedId)?.full}
39              className="max-w-full max-h-full rounded-lg"
40            />
41          </motion.div>
42        </>
43      )}
44    </>
45  );
46}

技术要点：

• 缩略图和全屏图共享同一个 layoutId={image-${image.id}}
• 点击时，图片会从网格位置平滑放大到全屏
• 配合 initial、animate、exit 实现遮罩层淡入淡出

最佳实践

1. 确保 layoutId 唯一性

在同一时刻，相同的 layoutId 只应该存在于一个元素上。如果多个元素使用相同的 layoutId，动画可能会出现不可预期的行为。

1// ✅ 好的做法
2{activeId === item.id && (
3  <motion.div layoutId="indicator" />
4)}
5
6// ❌ 不好的做法
7{items.map(item => (
8  <motion.div layoutId="indicator" /> // 所有元素都使用相同 layoutId
9))}

2. 合理设置 transition

不同场景需要不同的动画参数：

1// 快速响应的 UI 元素（如选项卡）
2transition={{
3  type: "spring",
4  duration: 0.5,
5  bounce: 0.2,
6}}
7
8// 平滑无弹跳的过渡（如目录高亮）
9transition={{
10  type: "spring",
11  duration: 0.38,
12  bounce: 0,
13}}
14
15// 缓慢优雅的动画（如模态框）
16transition={{
17  type: "spring",
18  duration: 0.8,
19  bounce: 0.15,
20}}

3. 注意层级关系

当使用 layoutId 时，确保其他内容不会被动画元素遮挡：

1<motion.button className="relative">
2  {/* 背景层 */}
3  {isActive && (
4    <motion.div 
5      layoutId="background"
6      className="absolute inset-0 bg-blue-500"
7    />
8  )}
9  
10  {/* 内容层 - 使用 relative z-10 确保在上层 */}
11  <span className="relative z-10">按钮文字</span>
12</motion.button>

4. 配合 AnimatePresence 使用

如果元素需要完全移除（而不是隐藏），使用 AnimatePresence 包裹：

1import { AnimatePresence } from "motion/react";
2
3<AnimatePresence>
4  {isOpen && (
5    <motion.div
6      layoutId="modal"
7      initial={{ opacity: 0 }}
8      animate={{ opacity: 1 }}
9      exit={{ opacity: 0 }}
10    >
11      模态框内容
12    </motion.div>
13  )}
14</AnimatePresence>

性能优化

使用 will-change

对于频繁动画的元素，添加 CSS will-change 属性：

1<motion.div
2  layoutId="indicator"
3  style={{ willChange: "transform" }}
4/>

避免昂贵的重绘

尽量让 layoutId 动画只影响 transform 和 opacity，避免触发重排：

1// ✅ 只改变 transform
2<motion.div
3  layoutId="box"
4  className="absolute inset-0"
5/>
6
7// ❌ 改变尺寸和位置会触发重排
8<motion.div
9  layoutId="box"
10  animate={{ width: 100, height: 100 }}
11/>

调试技巧

Framer Motion 提供了可视化调试工具：

1import { MotionConfig } from "motion/react";
2
3<MotionConfig isValidProp={() => true}>
4  {/* 在开发模式下显示动画边界 */}
5  <YourComponent />
6</MotionConfig>

在浏览器中，你可以在 React DevTools 中检查 motion 元素的 layoutId 属性。

实际应用场景

layoutId 特别适合以下场景：

1. 选项卡导航：活动指示器的平滑移动
2. 目录导航：当前章节的高亮跟随
3. 卡片展开：从列表视图到详情视图的过渡
4. 图片画廊：缩略图到全屏的展开动画
5. 搜索框：从收起到展开的动画
6. 通知气泡：从按钮移动到通知列表
7. 拖拽排序：元素位置交换的平滑过渡

总结

Framer Motion 的 layoutId 是实现共享元素动画的强大工具。通过为不同状态下的元素指定相同的 layoutId，我们可以轻松创建出专业级的过渡动画，而无需手动计算位置和尺寸。

核心要点回顾：

1. layoutId 创建单例动画元素，同一时刻只有一个实例
2. 自动处理位置、大小、形状的变化
3. 配合 spring 物理参数实现自然的动画效果
4. 注意层级关系和性能优化
5. 适合交互式 UI 组件的状态切换动画

现在，打开你的项目，尝试用 layoutId 为你的界面添加一些令人愉悦的动画吧！记住，好的动画不应该是花哨的，而应该是自然的、有目的的，能够引导用户的注意力并增强界面的易用性。

---

如果你想了解更多关于 Framer Motion 的内容，推荐阅读《深入理解 Framer Motion 弹簧动画的物理原理》，深入理解动画参数的物理意义。