# 时间轴（Timeline）

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

- 别名：时间线、大事记、发展历程、Milestone Timeline
- 口语：「讲经历时一条线上一个个年份冒出来」「做个大事记时间线」
- 一句话：横线逐步画出，年份节点依次弹出说明
- 是什么：时间轴动画让一条线按时间方向逐步画出，到达每个时间点时弹出节点与说明，用来讲清楚事件的先后顺序和间隔
- 缺了就不像：沿时间方向的线；按顺序出现的节点
- 加了更像：上下交替的标签；当前节点高亮
- 适合用在：个人经历、品牌历程；历史、科普里的事件顺序；项目计划、学习路线
- 看哪里：看横线从左往右画，画到哪个节点哪个节点才弹出，年份上下交替排开；最后一个节点用红色和脉冲表示「现在」
- 注意：节点太多时文字挤在一起，宜分段讲；间距要能反映时间长短，否则容易误解
- 描述示例：做 Timeline 时间轴动画：米色背景上一条黑线从左往右匀速画出，经过四个年份节点时节点弹出，年份和一句说明在线的上下交替出现，最后一个节点为红色并向外扩散脉冲
- 易混：
  - [地图路线](https://idea.ameng.dev/terms/map-route.md)：地图路线按空间画路线；时间轴按时间顺序排事件
  - [章节进度条](https://idea.ameng.dev/terms/chapter-progress.md)：章节进度条表示视频播放到哪；时间轴表示内容里事件的顺序
- 相关：[描边生长](https://idea.ameng.dev/terms/trim-path.md)

## 来源与延伸阅读

- [Wikipedia · Timeline](https://en.wikipedia.org/wiki/Timeline)
- [GSAP · DrawSVGPlugin](https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/)

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