首页 / OpenLayers / 使用示例
视图动画
从北京飞到上海,中间抬起高度再落下,比直线平移更有空间感。
view.animate 接受多段配置,按顺序播放。
源码与运行效果
说明
动画配置里的键名与 View 的属性一致:
center、zoom、rotation。
每段都要给 duration,毫秒为单位。多段按参数顺序执行,
总时长是各段之和。
| 缓动函数 | 节奏 |
|---|---|
ol.easing.inAndOut | 两端慢、中间快,飞行常用 |
ol.easing.easeOut | 开始快、结束缓,适合吸附定位 |
ol.easing.linear | 匀速,适合进度明确的场景 |
| 不传 | 默认线性 |
「旋转一圈」用 rotation: 当前角度 + 2π,
转完在 moveend 里归零。如果直接设成 2π,
第二次点击就从终点开始,视觉上不会动。
动画进行中再次调用 animate 会打断上一段并从当前位置继续。
需要排队播放时用 view.animate(..., callback),
在回调里启动下一段。