经纬志
首页 / MapLibre / 使用示例

线条流动动画

虚线间隔周期性轮换,视觉上形成沿线前进的流动感。这是最省资源的一种线条动画。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

line-dasharray 是绘制属性,可以用 setPaintProperty 逐帧替换。示例准备了一组序列循环播放。

底层先画一条淡色实线,虚线叠上去,流动感更清楚。

配置取值说明
line-dasharray数组实线与空白长度交替
setInterval90ms轮换节拍
line-capbutt虚线端点是平的

动画频率不要高于 60ms,人眼会看成闪烁;性能不足时降到 120ms 并减少虚线复杂度。