首页 / deck.gl / 使用示例
视图过渡动画
四片点云分别在四座城市,点击按钮后相机在 1.5 秒内完成 平移、缩放与俯仰变化,中途不可拖拽,结束后恢复交互。
源码与运行效果
说明
目标点包含 longitude、latitude、
zoom、pitch、bearing 五个字段,
全部参与插值。缓动函数两端慢、中间快,视觉上先加速后收住,
比线性插值更像一次镜头运动。
| 配置 | 作用 |
|---|---|
viewState | 受控视角,每次动画都显式提交 |
onViewStateChange | 把用户操作后的视角写回变量 |
controller: false | 飞行期间禁用交互,避免与动画争夺视角 |
easeInOut | 二次缓动,两端导数为 0 |
| 1500 ms | 跨省飞行时长,短于此会显得突兀 |
为什么不用 initialViewState
initialViewState 只在实例化时生效,后续修改不会
改变相机。需要动画就必须走受控的 viewState,
并且在 onViewStateChange 里把新状态存下来,
否则用户拖拽一次之后,动画会从旧位置重新开始。
缩放与俯仰一起插值
只插值经纬度会让相机沿地面滑行,看不出高度变化;
同时插值 zoom 与 pitch,
才有从高空俯冲进城市的感觉。示例从全国视角的
4 级俯视,飞到各城市的 10 级、50 度倾斜。
动画期间锁住交互。不锁的话,用户在飞行途中拖拽,
下一帧又被动画覆盖,画面会抖动。把 controller
设成 false,并在动画结束时恢复,是最省事的做法。