首页 / OpenLayers / 使用示例
要素位移动画
让点要素沿路线移动,用线要素长度把进度换算成真实距离。
源码与运行效果
说明
沿路线移动用 LineString.getCoordinateAt(fraction) 按比例取点,requestAnimationFrame 每帧推进进度,Point.setCoordinates() 更新位置。
示例按线要素长度与速度换算每帧进度,暂停、调速只改状态变量,几何本身不做插值。
要点
- 进度用「米 / 路线总长」归一化,速度单位才直观。
- 每帧时间差要封顶,切到后台再回来不会瞬移。
- 循环播放时进度取模 1,位置自动回到起点。
大量要素同时移动时改用图层级的 postrender 动画,避免每帧重建样式。