# 地图路线（Map Route Animation）

镜语 · 特效与转场 / 标注与数据

- 别名：路线动画、旅行路线、轨迹地图、地图描线
- 口语：「旅行 vlog 里地图上一条线从上海画到杭州」「小车沿着路线开过去，到一个城市落一个点」
- 一句话：路线按行程顺序在地图上画出，图标沿线前进并在站点落针
- 是什么：地图路线动画在地图上按行程顺序画出路线，并让小车、飞机等图标沿线前进，到达站点时落下定位针、显示地名。它把空间移动和时间顺序同时交代清楚
- 缺了就不像：路线按顺序画出；图标沿路线前进；站点依次出现
- 加了更像：未走路段为虚线；定位针弹落；里程或天数同步
- 适合用在：旅行 vlog 交代行程与城市切换；自驾、骑行、徒步视频的路线总结；知识视频讲历史行军、物流运输等路线
- 看哪里：路线线条和小车同步前进，没走到的路段只有淡虚线；每到一个城市才落下红色定位针并出现城市名，右上角里程同步增加
- 注意：示意地图需要说明不精确，不能当作导航依据；路线太长、站点太多时动画会显得冗长；图标朝向不随路线方向变化会显得假
- 描述示例：在浅色简约地图上，橙色路线带白色描边，从上海出发按行程画向杭州再到黄山，未走路段显示为淡虚线；一个圆形车标沿路线前进并朝向行进方向；到达每个城市时红色定位针从上方弹落，城市名淡入；左上角卡片显示「Day 1–3 · 江南自驾」和递增的公里数
- 易混：
  - [沿路径运动](https://idea.ameng.dev/terms/motion-path.md)：沿路径运动只描述物体沿曲线移动；地图路线还包含地图、站点和路线绘制
  - [描边生长](https://idea.ameng.dev/terms/trim-path.md)：描边生长只画出线条，没有地理语境
- 相关：[章节进度条](https://idea.ameng.dev/terms/chapter-progress.md)

## 来源与延伸阅读

- [Mapbox GL JS · 路线动画示例](https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/)
- [GSAP · MotionPath 路径运动](https://gsap.com/docs/v3/Plugins/MotionPathPlugin/)
- [GSAP · DrawSVG 路径显现](https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/)

网页版（含演示）：https://idea.ameng.dev/terms/map-route