Animation widget
动画小部件提供播放、暂停和后退按钮以及当前时间和日期,周围环绕着用于控制动画速度的"穿梭环"。
"穿梭环"概念借鉴自视频编辑,通常可以旋转"转盘"以非常缓慢地移动单个动画帧,并且可以扭转周围的穿梭环来控制快速播放的方向和速度. Cesium 通常将时间视为连续的(不分解为预定义的动画帧),因此此小部件不提供转盘.相反,穿梭环能够快速和非常慢速播放.单击并拖动穿梭环指针本身(如上图所示,以绿色显示), 或单击环区域的其余部分以将指针轻推到该方向的下一个预设速度.
动画小部件还提供了一个"实时"按钮(位于左上角),可使动画时间与最终用户的系统时钟保持同步,通常显示"今天"或"现在". 如果当前事件超出
Clock的开始时间和结束时间,则此模式在ClockRange.CLAMPED或ClockRange.LOOP_STOP模式下不可用.
| Name | Type | Description |
|---|---|---|
container |
Element | string | 将包含 小部件 的 DOM 元素或 ID. |
viewModel |
AnimationViewModel | 此小部件使用的视图模型. |
Throws:
-
DeveloperError : 文档中不存在 ID 为"container"的元素.
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 viewModel : AnimationViewModel
获取视图模型.
Methods
更新小部件以反映任何已修改的主题css规则.
Example:
//Switch to the cesium-lighter theme.
document.body.className = 'cesium-lighter';
animation.applyThemeChanges();
销毁动画小部件,如果从布局中永久删除小部件,则应调用
Returns:
如果对象已被销毁,则返回 true,否则返回 false.
调整小部件的大小以及匹配容器大小,每当容器大小发生变化时,都应调用此方法.
