AnimationViewModel

AnimationViewModel 封装了用于控制 CesiumJS 场景动画的参数和方法。

属性

duration

animationViewModel.duration: Number

动画持续时间，单位秒。

currentTime

animationViewModel.currentTime: Number

当前动画时间，单位秒。

clockRange

animationViewModel.clockRange: ClockRange

动画时钟类型。ClockRange 枚举类型的值可包括 ClockRange.CLAMPED、ClockRange.LOOP_STOP、ClockRange.UNBOUNDED。

clockStep

animationViewModel.clockStep: ClockStep

控制动画时钟的步进类型。ClockStep 枚举类型的值可包括 ClockStep.SYSTEM_CLOCK_MULTIPLIER、ClockStep.TICK_DEPENDENT、ClockStep.SYSTEM_CLOCK。

shouldAnimate

animationViewModel.shouldAnimate: Boolean

应用动画的 boolean 值。

scrubViewModel

animationViewModel.scrubViewModel: ScrubberViewModel

ScrubberViewModel 对象包含用于设置动画时间位置的参数和方法。

clampAnimations

animationViewModel.clampAnimations: Boolean

控制动画是否应该被夹紧在 start 和 stop 时间范围内。

snapToTicks

animationViewModel.snapToTicks: Boolean

控制当前时间是否应该在动画数据的一个预定义时间间隔上“张弛”。

clock

animationViewModel.clock: Clock

动画时钟。

multiplier

animationViewModel.multiplier: Number

时钟速率倍数。

isDestroyed

animationViewModel.isDestroyed: Boolean

类型: Boolean

viewModel是否被销毁。

方法

play()

animationViewModel.play()

播放动画。

pause()

animationViewModel.pause()

暂停动画。

togglePlayPause()

animationViewModel.togglePlayPause()

切换动画的播放暂停状态。

setShuttleRingTicks(ticks:Date[])

animationViewModel.setShuttleRingTicks(ticks: Date[])

设置时间戳数组用于帮助调节当前时间。

destroy()

animationViewModel.destroy() 

销毁 viewModel 以释放内存和事件监听器。执行后，viewModel 将不再可视或可导航。

事件

clockViewModel.startTimeChanged

// 订阅
animationViewModel.clockViewModel.startTimeChanged.addEventListener(onStartTimeChanged);

function onStartTimeChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.clockViewModel.startTimeChanged.removeEventListener(onStartTimeChanged);

在 startTime 发生变化时触发。

clockViewModel.stopTimeChanged

// 订阅
animationViewModel.clockViewModel.stopTimeChanged.addEventListener(onStopTimeChanged);

function onStopTimeChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.clockViewModel.stopTimeChanged.removeEventListener(onStopTimeChanged);

在 stopTime 发生变化时触发。

clockViewModel.clockStepChanged

// 订阅
animationViewModel.clockViewModel.clockStepChanged.addEventListener(onClockStepChanged);

function onClockStepChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.clockViewModel.clockStepChanged.removeEventListener(onClockStepChanged);

在 clockStep 发生变化时触发。

clockViewModel.multiplierChanged

// 订阅
animationViewModel.clockViewModel.multiplierChanged.addEventListener(onMultiplierChanged);

function onMultiplierChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.clockViewModel.multiplierChanged.removeEventListener(onMultiplierChanged);

在 multiplier 发生变化时触发。

scrubViewModel.isDraggingChanged

// 订阅
animationViewModel.scrubViewModel.isDraggingChanged.addEventListener(onIsDraggingChanged);

function onIsDraggingChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.scrubViewModel.isDraggingChanged.removeEventListener(onIsDraggingChanged);

在 isDragging 发生变化时触发。

shouldAnimateChanged

// 订阅
animationViewModel.shouldAnimateChanged.addEventListener(onShouldAnimateChanged);

function onShouldAnimateChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.shouldAnimateChanged.removeEventListener(onShouldAnimateChanged);

在 shouldAnimate 发生变化时触发。

currentTimeIndexChanged

// 订阅
animationViewModel.currentTimeIndexChanged.addEventListener(onCurrentTimeIndexChanged);

function onCurrentTimeIndexChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.currentTimeIndexChanged.removeEventListener(onCurrentTimeIndexChanged);

在 currentTimeIndex 发生变化时触发。

durationChanged

// 订阅
animationViewModel.durationChanged.addEventListener(onDurationChanged);

function onDurationChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.durationChanged.removeEventListener(onDurationChanged);

在 duration 发生变化时触发。

shuttleRingTicksChanged

// 订阅
animationViewModel.shuttleRingTicksChanged.addEventListener(onShuttleRingTicksChanged);

function onShuttleRingTicksChanged(){
    //事件处理程序
}

// 取消订阅
animationViewModel.shuttleRingTicksChanged.removeEventListener(onShuttleRingTicksChanged);

在 shuttleRingTicks 发生变化时触发。

示例

// 创建 AnimationViewModel
var animationViewModel = new Cesium.AnimationViewModel(clockViewModel);

// 订阅 clockViewModel 的 startTimeChanged 事件
animationViewModel.clockViewModel.startTimeChanged.addEventListener(function(){
    console.log('startTimeChanged');
});

// 播放动画
animationViewModel.play();

// 销毁 animationViewModel
animationViewModel.destroy();

参考

Article: Animating the Scene<br> Class: Clock<br> Class: ClockViewModel<br> Class: ScrubberViewModel