Figma的智能动画具体怎么操作？

一、智能动画（Smart Animate）是什么

Smart Animate 是 Figma 内置的自动补间动画：只要两个 Frame 里图层名完全一致，它就能自动在位置、大小、颜色、透明度、圆角、旋转等属性之间做平滑过渡，不用关键帧、不用插件。

---

二、核心原理（必懂）

• 靠图层名匹配：同名图层 = 同一物体，自动插值动画。
• 只动画变化属性：不变的属性（如背景）不参与动画。
• 图层结构要一致：父子层级尽量相同，否则容易“跳”。
• 不同名/不存在的图层：会淡入淡出，不做位置动画。

---

三、5步完整操作（从0到动）

1）准备两个状态 Frame

• Frame 1：初始状态（如按钮默认、页面A）。
• Frame 2：结束状态（如按钮hover、页面B）。
• 建议：复制Frame 1 → 改状态，保证图层结构一致。

2）图层命名完全一致（最关键）

• 两个 Frame 中，要动画的图层名字必须一模一样（包括大小写、空格、层级）。
  • 正确：Button/Bg → Button/Bg
  • 错误：BtnBg → ButtonBg（不认）

3）修改属性（产生动画）

在 Frame 2 里改这些属性，都会自动动画：

• ✅ 位置（x/y）
• ✅ 大小（宽高）
• ✅ 颜色/渐变
• ✅ 透明度（opacity）
• ✅ 圆角
• ✅ 旋转/缩放
• ✅ 自动布局（间距、对齐）

4）进入原型模式，连接 Frame

• 右侧切到 Prototype 标签。
• 选中 Frame 1 → 右侧出现蓝色小圆点 → 拖到 Frame 2。

5）设置 Smart Animate 参数

在右侧 Interaction Details：

• Trigger：触发方式（On Click / On Hover / After Delay）。
• Animation：选 Smart Animate（核心）。
• Duration：时长（常用 300–500ms）。
• Easing：缓动（常用 Ease In Out，自然）。

---

四、常见实战案例（直接套用）

案例1：按钮缩放+变色

• Frame1：蓝色小按钮 Button。
• Frame2：红色大按钮 Button。
• 连接 → Smart Animate 400ms → 点击平滑缩放变色。

案例2：抽屉/侧边栏滑入

• Frame1：侧边栏在屏幕外（x=-300），Sidebar。
• Frame2：侧边栏在屏幕内（x=0），Sidebar。
• 连接 → Smart Animate → 平滑滑入。

案例3：页面切换（元素延续）

• Frame1：列表项 Item1。
• Frame2：Item1 放大到顶部，详情展开。
• 同名 → Smart Animate → 无缝转场。

---

五、避坑技巧（90%人出错在这里）

1. 命名绝对一致：差一个空格都不行；复制图层最稳。
2. 图层层级不乱：父子关系、顺序尽量相同；嵌套组件要注意。
3. 固定元素用 Fix Position：顶部栏/底部导航勾选 Fix Position when scrolling，动画时不跟着动。
4. 只动画必要元素：减少图层数量，动画更流畅。
5. 预览看细节：右上角 Present 预览；有“跳变”先检查命名和层级。

---

六、和其他动画的区别

• Smart Animate：自动匹配同名图层，平滑过渡（首选）。
• Push / Slide：页面整体平移，无元素延续。
• Dissolve：淡入淡出，无位置动画。