Animation

new Cesium.Animation(container, viewModel)


Animation widget


Animation小部件提供播放、暂停和反转按钮,以及 当前的时间和日期,由一个“穿梭环”包围,以控制动画的速度。

"shuttle ring"的概念是从视频编辑中借鉴来的 "jog wheel"可以旋转移动过去的个别动画帧非常缓慢,和 周围的穿梭环可以扭曲,以控制方向和速度的快速播放。 铯通常将时间视为连续的(不分解为预定义的动画帧), 所以这个小部件不提供慢跑轮。相反,穿梭环既能快速又能 播放非常慢。点击并拖动穿梭环指针本身(上面的绿色部分), 或单击环区域的其余部分,将指针轻推到该方向的下一个预设速度。

动画小部件还提供了一个“实时”按钮(在左上角) 动画时间与最终用户的系统时钟同步,通常显示 “今天”或“现在”。 此模式在 ClockRange.CLAMPEDClockRange.LOOP_STOP 如果当前时间在 Clock的 startTime和endTime.
Name Type Description
container Element | string 将包含小部件的DOM元素或ID。
viewModel AnimationViewModel 此小部件使用的视图模型。
Throws:
Example:
// In HTML head, include a link to Animation.css stylesheet,
// and in the body, include: <div id="animationContainer"></div>

const clock = new Cesium.Clock();
const clockViewModel = new Cesium.ClockViewModel(clock);
const viewModel = new Cesium.AnimationViewModel(clockViewModel);
const widget = new Cesium.Animation('animationContainer', viewModel);

function tick() {
    clock.tick();
    requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
See:

Members

readonly container : Element

获取父容器。
获取视图模型。

Methods

更新小部件以反映任何修改的CSS主题规则。
Example:
//Switch to the cesium-lighter theme.
document.body.className = 'cesium-lighter';
animation.applyThemeChanges();
销毁动画小部件。如果从布局中永久删除小部件, 则应该调用。

isDestroyed()boolean

Returns:
如果对象已被销毁,则为true,否则为false。
调整小部件的大小以匹配容器大小。 这个函数应该在容器大小改变时调用。
Need help? The fastest way to get answers is from the community and team on the Cesium Forum.