经纬志
首页 / deck.gl / 使用示例

视图过渡动画

四片点云分别在四座城市,点击按钮后相机在 1.5 秒内完成 平移、缩放与俯仰变化,中途不可拖拽,结束后恢复交互。

deck.gl 9.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

目标点包含 longitude、latitude、 zoom、pitch、bearing 五个字段, 全部参与插值。缓动函数两端慢、中间快,视觉上先加速后收住, 比线性插值更像一次镜头运动。

配置作用
viewState受控视角,每次动画都显式提交
onViewStateChange把用户操作后的视角写回变量
controller: false飞行期间禁用交互,避免与动画争夺视角
easeInOut二次缓动,两端导数为 0
1500 ms跨省飞行时长,短于此会显得突兀

为什么不用 initialViewState

initialViewState 只在实例化时生效,后续修改不会 改变相机。需要动画就必须走受控的 viewState, 并且在 onViewStateChange 里把新状态存下来, 否则用户拖拽一次之后,动画会从旧位置重新开始。

缩放与俯仰一起插值

只插值经纬度会让相机沿地面滑行,看不出高度变化; 同时插值 zoom 与 pitch, 才有从高空俯冲进城市的感觉。示例从全国视角的 4 级俯视,飞到各城市的 10 级、50 度倾斜。

动画期间锁住交互。不锁的话,用户在飞行途中拖拽, 下一帧又被动画覆盖,画面会抖动。把 controller 设成 false,并在动画结束时恢复,是最省事的做法。