Atlaslog
Atlaslog / Cesium / Tutorial / Timeline and animation
Cesium · Tutorial

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.

Last verified 2026-11-03 · CesiumJS 1.121 · Cite this page
Key points
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
Runnable examplesChinese originalAll Tutorials
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Cite this page

Atlaslog (2026). Timeline and animation. https://www.jingweizhi.com/en/cesium/tutorials/time-animation.html (accessed 2026-11-03).