CesiumJS 中的 Animation 模块提供了一组可重用的动画功能,它们可以应用于场景中的任意对象,包括相机、实体、几何体等。可以使用 Animation 模块来实现漂亮的视觉效果和交互式动画,从而增强场景的交互性和可视化效果。
本文档将介绍 CesiumJS 中 Animation 模块的使用方法和 API 细节。在开始动手编写代码之前,我们建议您对 CesiumJS 基础知识有一定的了解。
Animation 模块在 CesiumJS 中默认是已经加载和启用的。您只需要在应用程序的初始化代码中使用即可。
下面是一个简单的示例,展示如何为一个实体添加旋转动画:
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 10,
color: Cesium.Color.RED
}
});
var animation = new Cesium.EntityAnimation(viewer.clock, entity);
animation.start({
property: 'orientation',
duration: 10,
easingFunction: Cesium.EasingFunction.LINEAR_NONE,
startValue: Cesium.Quaternion.IDENTITY,
endValue: Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Math.PI / 4)
});
viewer.zoomTo(entity);
在这个示例中,我们首先创建了一个实体,并将其添加到了场景中。然后,我们创建了一个 EntityAnimation 实例,用于处理动画效果。接下来,我们调用 start 方法,设置了动画属性、时长和缓动函数等参数,并使用 viewer.clock 实例来控制动画的时间流逝。最后,我们调用了 viewer.zoomTo 方法,使场景自动缩放到实体的位置,方便观察动画效果。
EntityAnimation 是 Animation 模块中最基本的动画实现类。它可以应用于 CesiumJS 实体对象(Entity 或 Billboard ),并提供了一组常用动画效果的实现接口。具体包括以下方法:
constructor(clock: Clock, entity: Entity | Billboard)
创建一个 EntityAnimation 实例,该实例用于处理指定实体的动画效果。clock 参数是用于控制时间流逝的时钟对象,可以从 Viewer 或 CesiumWidget 实例中获取。entity 参数是要应用动画效果的实体对象。
start(options: StartOptions)
启动动画效果,并根据 options 参数设置动画属性、时长和缓动函数等参数。
stop()
停止当前正在进行的动画效果。
isRunning(): boolean
检查当前是否正在进行动画效果,返回 true 表示正在进行,否则返回 false。
onUpdate: Event<EventData>
动画更新事件,每帧更新时触发。事件参数为 {time: number, frameState: FrameState},其中 time 表示当前时间(相对于启动动画的时间),frameState 是 Viewer 的帧状态对象。
onComplete: Event<void>
动画完成事件,当动画效果完成时触发。事件参数为空。
StartOptions 是用于配置动画效果的选项参数。具体包括以下属性:
property: string
动画属性,可以是实体对象的任意属性名称,如 'position'、'orientation'、'scale'、'show' 等。
duration: number
动画时长,以秒为单位。
easingFunction: EasingFunction
缓动函数类型,指定动画效果的速度曲线。可以使用预定义的 EasingFunction 对象,如 Cesium.EasingFunction.LINEAR_NONE、Cesium.EasingFunction.QUADRACTIC_IN_OUT 等。
startValue: Property
起始值,动画效果开始时属性的初始值。可以是一个值、一个数组或一个 Property 对象。
endValue: Property
结束值,动画效果结束时属性的最终值。可以是一个值、一个数组或一个 Property 对象。
EasingFunction 是缓动函数类型枚举,用于指定动画效果的速度曲线。具体包括以下枚举值:
LINEAR_NONEBACK_INBACK_OUTBACK_IN_OUTBOUNCE_INBOUNCE_OUTBOUNCE_IN_OUTCIRCULAR_INCIRCULAR_OUTCIRCULAR_IN_OUTCUBIC_INCUBIC_OUTCUBIC_IN_OUTELASTIC_INELASTIC_OUTELASTIC_IN_OUTEXPONENTIAL_INEXPONENTIAL_OUTEXPONENTIAL_IN_OUTQUADRACTIC_INQUADRACTIC_OUTQUADRACTIC_IN_OUTQUARTIC_INQUARTIC_OUTQUARTIC_IN_OUTQUINTIC_INQUINTIC_OUTQUINTIC_IN_OUTSINUSOIDAL_INSINUSOIDAL_OUTSINUSOIDAL_IN_OUTProperty 是表示属性值的抽象类,具体包括以下子类:
ConstantPropertySampledPropertyIntervalConstantProperty 表示一个固定的属性值,比如实体的位置。SampledProperty 表示一个采样过的属性值,可以通过传递一组时间和属性值的键值对进行创建,比如实体的位置随时间的变化。Interval 表示一个具有起始值和结束值的属性值,比如相机的视野范围。在使用 Animation 模块时,可以根据需要选择相应的 Property 类型。