关键帧动画“弹”或“顿”的根本原因是插值曲线未调对,而非关键帧数量不足;需手动进入关键帧编辑器,为相机各属性统一设Bezier插值并拖动手柄实现慢入快出及超调,避免属性错位与跳变。

关键帧之间为什么总是“弹”或“顿”
不是关键帧数量不够,而是插值曲线没调对。Composer 默认用线性或简单贝塞尔(比如 Smooth)插值,导致起始速度突变、结束减速过急——人眼立刻感知为“弹”或“顿”。更隐蔽的问题是:相机的 position、heading、pitch、range 四个属性如果用了不同插值类型,动画会错位,比如镜头先转过去、再慢慢拉近,观感割裂。
在 Composer 界面里怎么调出真正平滑的相机路径
必须手动进关键帧编辑器,不能只靠“自动关键帧”或“平滑路径”按钮:
- 选中相机轨道(通常是
Camera或View节点下的Position和Orientation子轨道) - 右键关键帧 → 选
Bezier插值类型(不是Smooth,后者是预设且不可调) - 拖动关键帧两侧手柄:左侧手柄往左上拉(慢入),右侧手柄往右下拉(快出),y 值可超出 [0,1] 实现轻微超调(overshoot),增强自然感
- 按住
Ctrl+Shift滚轮水平缩放时间轴,精细调节两个关键帧间距;按住Alt滚轮垂直平移,看清高/低值区域的坡度变化
为什么不能直接粘贴 cubic-bezier(0.42, 0, 0.58, 1) 参数
Composer 没有数值输入框,所有贝塞尔控制都靠手柄拖拽完成:
- x 坐标被锁死在 [0,1] 区间(防止时间倒流),但 y 坐标可以拖到 1.2 甚至 1.5,这是合法且常用的超调手法
- 你无法输入或导入四参数,只能凭视觉近似:先在 cubic-bezier.com 调好曲线,再在 Composer 里拖出手柄形态
- 多个关键帧选中后拖动下方黑条可整体缩放,但会改变总时长——已配好音效或同步图层的动画慎用
多段相机移动衔接时最常踩的坑
连续调用多个 flyTo() 或堆叠视图关键帧,会导致跳变或卡顿:
- Composer 的 timeline 只控制静态视图快照,不插值;真正平滑飞行必须交由 CesiumJS 的
camera.flyTo()或SampledPositionProperty - 如果你在 Composer 中导出的是
viewer实例,等readyPromise完成后,用 JS 构建带时间戳的坐标序列,绑定到Entity.position,再让相机跟随该 Entity - duration 别设超过 10 秒:
flyTo({ duration: 30 })容易在后期出现缓动失真,分段控制比拉长单次更稳
关键帧动画的“平滑”不在数量,而在每一段插值的意图是否明确——手柄拖歪 5 像素,可能就让镜头从“电影感”变成“PPT 切换”。











