Timeline and animation
Quick answer
This tutorial explains how viewer.clock drives every time-aware property in CesiumJS and how to configure startTime, stopTime, clockRange and clockStep. It builds a moving trajectory from SampledPositionProperty samples, derives heading with VelocityOrientationProperty, and draws a trailing path with leadTime and trailTime. It also switches colours over intervals using TimeIntervalCollectionProperty and trims the timeline and animation widgets. Readers can author clock-driven playback and scrub it accurately.
Key points
- Use JulianDate.fromIso8601 for all clock values; plain JavaScript Date objects are rejected.
- Add samples in ascending time order to SampledPositionProperty, or interpolation gaps appear.
- Set trailTime in seconds to control trail length, and availability to bound entity visibility.
Example
var clock = viewer.clock;
clock.startTime = Cesium.JulianDate.fromIso8601('2026-10-29T08:00:00Z');
clock.stopTime = Cesium.JulianDate.fromIso8601('2026-10-29T09:00:00Z');
clock.currentTime = clock.startTime.clone();
clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 播到末尾后停住
clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // 用倍速推进
clock.multiplier = 30; // 30 倍速
viewer.timeline.zoomTo(clock.startTime, clock.stopTime);var start = Cesium.JulianDate.fromIso8601('2026-10-29T08:00:00Z');
var waypoints = [
[116.20, 39.80], [116.35, 39.95], [116.50, 39.88],
[116.60, 40.02], [116.45, 40.10]
];
var position = new Cesium.SampledPositionProperty();
position.setInterpolationOptions({
interpolationDegree: 1,
interpolationAlgorithm: Cesium.LinearApproximation
});
waypoints.forEach(function (p, i) {
var t = Cesium.JulianDate.addSeconds(start, i * 60, new Cesium.JulianDate());
position.addSample(t, Cesium.Cartesian3.fromDegrees(p[0], p[1], 1200));
});
viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({ start: start, stop: Cesium.JulianDate.addSeconds(start, 300, new Cesium.JulianDate()) })
]),
position: position,
orientation: new Cesium.VelocityOrientationProperty(position),
model: {
uri: '/models/plane.glb',
minimumPixelSize: 48,
maximumScale: 20000
},
path: {
resolution: 60,
width: 3,
leadTime: 0,
trailTime: 300,
material: Cesium.Color.fromCssColorString('#ffb400')
}
});
Notes
- Linear interpolation between unevenly spaced samples does not produce constant speed.
- With requestRenderMode enabled, advancing the clock does not redraw unless requestRender is called.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Timeline and animation. https://www.jingweizhi.com/en/cesium/tutorials/time-animation.html (accessed 2026-11-03).