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

视图动画

从北京飞到上海,中间抬起高度再落下,比直线平移更有空间感。 view.animate 接受多段配置,按顺序播放。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

动画配置里的键名与 View 的属性一致: center、zoom、rotation。 每段都要给 duration,毫秒为单位。多段按参数顺序执行, 总时长是各段之和。

缓动函数节奏
ol.easing.inAndOut两端慢、中间快,飞行常用
ol.easing.easeOut开始快、结束缓,适合吸附定位
ol.easing.linear匀速,适合进度明确的场景
不传默认线性

「旋转一圈」用 rotation: 当前角度 + 2π, 转完在 moveend 里归零。如果直接设成 2π, 第二次点击就从终点开始,视觉上不会动。

动画进行中再次调用 animate 会打断上一段并从当前位置继续。 需要排队播放时用 view.animate(..., callback), 在回调里启动下一段。