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_NONE
BACK_IN
BACK_OUT
BACK_IN_OUT
BOUNCE_IN
BOUNCE_OUT
BOUNCE_IN_OUT
CIRCULAR_IN
CIRCULAR_OUT
CIRCULAR_IN_OUT
CUBIC_IN
CUBIC_OUT
CUBIC_IN_OUT
ELASTIC_IN
ELASTIC_OUT
ELASTIC_IN_OUT
EXPONENTIAL_IN
EXPONENTIAL_OUT
EXPONENTIAL_IN_OUT
QUADRACTIC_IN
QUADRACTIC_OUT
QUADRACTIC_IN_OUT
QUARTIC_IN
QUARTIC_OUT
QUARTIC_IN_OUT
QUINTIC_IN
QUINTIC_OUT
QUINTIC_IN_OUT
SINUSOIDAL_IN
SINUSOIDAL_OUT
SINUSOIDAL_IN_OUT
Property
是表示属性值的抽象类,具体包括以下子类:
ConstantProperty
SampledProperty
Interval
ConstantProperty
表示一个固定的属性值,比如实体的位置。SampledProperty
表示一个采样过的属性值,可以通过传递一组时间和属性值的键值对进行创建,比如实体的位置随时间的变化。Interval
表示一个具有起始值和结束值的属性值,比如相机的视野范围。在使用 Animation
模块时,可以根据需要选择相应的 Property
类型。