Cesium 1.63 动画控制详解

需积分: 50 54 下载量 55 浏览量 更新于2024-07-16 1 收藏 4.62MB PDF 举报
"Cesium_1.63_官方文档提供了关于Cesium JavaScript库的详细信息,包括动画(Animation)功能的使用和配置。" 在Cesium 1.63版本的官方文档中,动画(Animation)组件是一个重要的部分,它为用户提供了控制3D场景时间流动的工具。这个组件包含播放、暂停、倒退按钮,以及当前时间和日期的显示,周围有一个被称为“shuttlering”的控制环,用于调整动画的速度。 "shuttlering"的概念来源于视频编辑领域,通常在那里,一个“ Jogwheel”可以旋转来逐帧慢速移动,而周围的“shuttlering”则用来控制快速回放的方向和速度。在Cesium中,时间被视为连续的,而不是预定义的动画帧,因此这个组件没有提供Jogwheel功能。相反,它的shuttlering能够实现快速或非常慢的回放。用户可以通过点击并拖动shuttlering指针(通常是绿色的)或在环的其他区域单击来设定预设速度。 此外,Animation widget还有一个位于左上角的“实时”按钮,该按钮使动画时间与最终用户的系统时钟保持同步,通常显示为“今天”或“现在”。但是,在ClockRange.CLAMPED或ClockRange.LOOP_STOP模式下,如果当前时间超出了Clock的开始时间和结束时间,这个模式将不可用。 Cesium的动画组件还涉及到以下属性和类型: - `Name`: 指示动画组件的名称。 - `Type`: 定义了动画组件的类型,可能是特定的Cesium类或对象。 - `Description`: 对各个属性的详细解释,例如它们的作用、如何使用以及可能的值。 通过这个官方文档,开发者可以深入理解Cesium的动画控制机制,从而创建出更加动态和交互的3D地球场景。无论是想要实现精确的时间同步,还是调整动画播放速度,这份文档都提供了丰富的信息和支持。同时,对于那些需要在特定时间范围内回放或者希望与用户设备时间保持一致的项目来说,Animation widget的特性显得尤为重要。

分析下面代码的作用:/* * @Description: 飞线效果(参考开源代码) * @Version: 1.0 * @Author: Julian * @Date: 2022-03-05 16:13:21 * @LastEditors: Julian * @LastEditTime: 2022-03-05 17:39:38 */ class LineFlowMaterialProperty { constructor(options) { this._definitionChanged = new Cesium.Event(); this._color = undefined; this._speed = undefined; this._percent = undefined; this._gradient = undefined; this.color = options.color; this.speed = options.speed; this.percent = options.percent; this.gradient = options.gradient; }; get isConstant() { return false; } get definitionChanged() { return this._definitionChanged; } getType(time) { return Cesium.Material.LineFlowMaterialType; } getValue(time, result) { if (!Cesium.defined(result)) { result = {}; } result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color); result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 5.0, result.speed); result.percent = Cesium.Property.getValueOrDefault(this._percent, time, 0.1, result.percent); result.gradient = Cesium.Property.getValueOrDefault(this._gradient, time, 0.01, result.gradient); return result } equals(other) { return (this === other || (other instanceof LineFlowMaterialProperty && Cesium.Property.equals(this._color, other._color) && Cesium.Property.equals(this._speed, other._speed) && Cesium.Property.equals(this._percent, other._percent) && Cesium.Property.equals(this._gradient, other._gradient)) ) } } Object.defineProperties(LineFlowMaterialProperty.prototype, { color: Cesium.createPropertyDescriptor('color'), speed: Cesium.createPropertyDescriptor('speed'), percent: Cesium.createPropertyDescriptor('percent'), gradient: Cesium.createPropertyDescriptor('gradient'), }) Cesium.LineFlowMaterialProperty = LineFlowMaterialProperty; Cesium.Material.LineFlowMaterialProperty = 'LineFlowMaterialProperty'; Cesium.Material.LineFlowMaterialType = 'LineFlowMaterialType'; Cesium.Material.LineFlowMaterialSource = ` uniform vec4 color; uniform float speed; uniform float percent; uniform float gradient; czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float t =fract(czm_frameNumber * speed / 1000.0); t *= (1.0 + percent); float alpha = smoothstep(t- percent, t, st.s) * step(-t, -st.s); alpha += gradient; material.diffuse = color.rgb; material.alpha = alpha; return material; } ` Cesium.Material._materialCache.addMaterial(Cesium.Material.LineFlowMaterialType, { fabric: { type: Cesium.Material.LineFlowMaterialType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 1.0), speed: 10.0, percent: 0.1, gradient: 0.01 }, source: Cesium.Material.LineFlowMaterialSource }, translucent: function(material) { return true; } })

2023-03-02 上传