---
title: 样式、动画与关键帧
source: https://vjmap.com/guide/map-video/style-animation.html
---

---
group: 功能精讲
video: mv-style-animation
description: 用属性面板给片段换外观、设置入场循环出场动画，并用属性关键帧让参数随时间变化。
---

# 样式、动画与关键帧

在时间轴上选中一个片段后，右侧的属性面板可以先把它变好看，再让它动起来。本篇以一条路线和一段标题文字为例，介绍属性面板中的「样式」和「动画」两页，以及如何用属性关键帧让线宽等参数随时间变化。最后介绍怎样把调好的样式复制给其他片段。

## 样式

在时间轴的「线」轨上单击路线片段（例如「北京天安门 → 西安钟楼」），右侧属性面板顶部会显示这条路线的名称，下方有「样式」「动画」「分段」三页，默认打开的第一页就是「样式」。

![选中路线后，在样式页套用快捷外观](./images/style-animation-presets.webp)

1. **选中的路线**：属性面板顶部显示当前选中的片段名称。
2. **样式页**：属性面板的第一页。
3. **发光光带**：快捷外观之一。快捷外观以缩略图排列，第一行是「默认」「路线生长」「发光光带」。
4. **粒子流**：缩略图是一串圆点。
5. **呼吸发光**：缩略图是一条红色的发光线条。

点一下快捷外观，整套外观立即替换，播放器里的路线马上跟着变化。快捷外观往下拉还有「虚线行进」「细线」等更多选项。

再往下是细项设置，在「线条」分组里逐项调整，想改哪项就单独改哪项：

![样式页的细项设置](./images/style-animation-details.webp)

1. **线类型**：下拉选择线条类型，例如「发光」「实线」。
2. **颜色**：点色块选色，或直接输入色值（如 `#ff3a4e`）。
3. **线宽**：拖动滑块或在右侧输入框里填数值，单位是 px。
4. **不透明度**：调整线条的透明程度，示例中为 1。
5. **发光**：打开开关后，下方可调发光宽、发光色、发光模糊和发光不透明度。再往下还有「描边」开关，打开后可调描边宽和描边色。
6. **菱形按钮**：颜色、线宽、不透明度等属性右侧都有一个菱形，用来打属性关键帧，见下文「属性关键帧」。

线条分组里还有「虚线」「弧线抬升」等设置，按需调整即可。

调好之后，可以把这套样式保存下来：

![把调好的线样式保存到「我的样式」](./images/style-animation-my-style.webp)

1. **保存**：点击「我的样式」右侧的「+ 保存」，把当前这套线样式存起来。
2. **我的样式列表**：还没保存过时显示「还没有保存的线样式」；保存后，以后其他线条也能在这里一键套用这套样式。

::: tip 小技巧
可以先用快捷外观选一个接近的效果，再在细项里微调颜色和线宽，比从零开始调更快。
:::

## 动画

属性面板的第二页是「动画」，分为入场、循环、出场三段：

![动画页：入场、循环、出场](./images/style-animation-anim-tab.webp)

1. **动画页**：属性面板的第二页。
2. **入场 · 循环 · 出场**：三段动画分别设置，点哪个就编辑哪一段。
3. **生长**：路线的入场默认是「生长」。
4. **拖尾**：把入场换成「拖尾」，线头会拖出一条光尾巴。

路线入场可选的效果有「无」「淡入淡出」「闪烁」「生长」「拖尾」「抖动描画」「沿线」。

| 阶段 | 说明 |
|---|---|
| 入场 | 片段出现时的动画。路线的入场默认是「生长」 |
| 循环 | 片段显示期间持续播放的动画 |
| 出场 | 片段消失时的动画 |

选好效果后，往下拉可以调整这段动画的参数，再点「预览」看效果：

![动画参数与预览](./images/style-animation-anim-params.webp)

1. **动画参数**：
   - **时长**：这段动画持续几秒。
   - **开始停留**、**结束停留**：动画开头和结尾各停留多久，单位是秒。
   - **缓动**：动画快慢变化的方式，默认是「线性」，可在下拉框中更换。
2. **预览**：点击「▶ 预览」，播放器会立即按选定的动画演示一遍。

参数下方还有「拖尾长度」滑块和「发光点」开关。

## 属性关键帧

如果想让某个属性随时间变化，比如让线越画越粗，就需要给这个属性打关键帧。以线宽为例：

1. 把播放头放到 1 秒。
2. 点击线宽右侧的菱形，记下当前的粗细，这是第一个关键帧。
3. 把播放头挪到 6 秒，把线宽改成 14，第二个关键帧会自动记上。
4. 播放查看，线会从 1 秒到 6 秒逐渐变粗。

![在 6 秒处把线宽改成 14，自动记下第二个关键帧](./images/style-animation-keyframe.webp)

1. **线宽**：打过关键帧的属性名称会变色。这里在 6 秒处把数值改成 14 px，鼠标停在输入框上会提示取值范围（0.5–60 px）。
2. **菱形**：记下关键帧后菱形变为实心，两侧出现左右箭头。

此时播放器里的线条明显变粗了。打好关键帧后，时间轴上的片段会出现菱形标记；点击片段最前面的小三角，可以展开每个属性单独的关键帧行，方便查看和调整：

![展开片段，查看每个属性的关键帧行](./images/style-animation-keyframe-rows.webp)

1. **小三角**：点击展开或收起属性行。
2. **片段上的菱形**：路线片段上的菱形标记，表示这个片段打了关键帧。
3. **属性行**：每个打过关键帧的属性单独占一行，这里是「线宽」。
4. **关键帧**：这一行上的菱形就是该属性的关键帧，1 秒处一个、6 秒处一个（播放头所在处）。

::: tip 小技巧
某个属性记下第一个关键帧后，把播放头移到其他时刻再修改这个属性的数值，新的关键帧就会自动记上，不需要每次都去点菱形。属性面板顶部的「在播放头添加关键帧」（`Ctrl+K`）旁边也写着同样的提示：之后移动播放头，改数值或在画面里拖动，会自动记下一帧。
:::

## 文字也能动

动画不只用于路线，文字和贴纸同样可以设置入场和出场。以标题「北京 → 西安 · 自驾」为例：

1. 在时间轴的「文本」轨上选中标题，属性面板顶部会显示标题名称。
2. 打开属性面板的「动画」页。
3. 在「入场」中选择「弹入」。
4. 切换到「出场」，选择「淡出」。

![给标题设置入场动画「弹入」](./images/style-animation-text-in.webp)

1. **选中的标题**：属性面板顶部显示当前选中的文字片段。
2. **动画页**：文字的属性面板有「文本」「画面」「动画」「朗读」「调节」「着色器」「跟踪」「AI 编辑」等页，点「动画」打开动画页。
3. **入场**：文字动画分「入场」「出场」「循环」「组合」，右侧还有搜索框。
4. **弹入**：入场效果之一。同一页还有「淡入」「向上滑入」「放大」「模糊聚焦」「由大缩小」「弹跳落下」等。

![切换到出场，选择「淡出」](./images/style-animation-text-out.webp)

1. **出场**：切换到出场动画。
2. **淡出**：出场效果之一。同一页还有「向上滑出」「缩小」「模糊消失」「放大消失」「柔和模糊」等。

这样标题就有了进场和退场的节奏。

如果想给其他文字套用同一套效果，可以复制样式：

![复制样式并粘贴到另一段文字](./images/style-animation-copy-style.webp)

1. 选中已调好的文字，按 `Ctrl+Shift+C` 复制样式，右下角会提示「已复制属性」。
2. 选中另一段文字，按 `Ctrl+Shift+V` 粘贴样式。粘贴成功后，编辑器右下角会提示「已粘贴到 1 个片段」。

| 快捷键 | 作用 |
|---|---|
| `Ctrl+Shift+C` | 复制样式 |
| `Ctrl+Shift+V` | 粘贴样式到选中的片段 |

也可以在时间轴片段的右键菜单里使用「复制样式」和「粘贴样式」，见 [时间轴](./timeline.html)。

## 下一步

接下来可以看 [文字与标注](./text-labels.html)，学习添加文字、花字、地图标注，以及把文字钉在地图上。属性关键帧的更多用法见 [关键帧（二）：地图素材](./keyframes-map.html) 和 [关键帧（三）：叠加素材](./keyframes-overlay.html)。