This is straightforward to do. You need to create a dynamic positions property that is dependent on wall time and not the simulation time. Whether the pins are moving themselves or not doesn’t matter because our positions property will keep a reference to them. You can use Cartesian3’s lerp function to perform the interpolation. Here’s a simple complete example that you can copy and paste into Sandcastle. It creates 2 entities and when you press the go button, it creates a 3rd entity that is a line that grows from the start to the end over a user specified time (in milliseconds). Let me know if any part of the below code is unclear. createLineAnimation is the important part.
var viewer = new Cesium.Viewer(‘cesiumContainer’, {timeline : false, animation : false});
var pinBuilder = new Cesium.PinBuilder();
var bluePin = viewer.entities.add({
name : ‘Blank blue pin’,
position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard : {
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
var questionPin = viewer.entities.add({
name : ‘Question mark’,
position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),
billboard : {
image : pinBuilder.fromText(’?’, Cesium.Color.BLACK, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
viewer.zoomTo(viewer.entities);
function createLineAnimation(startEntity, endEntity, duration){
var startTime = performance.now();
return new Cesium.CallbackProperty(function(time, result){
if(!Cesium.defined(result)){
result = ;
}
var now = performance.now();
var start = startEntity.position.getValue(time, result[0]);
var end = endEntity.position.getValue(time, result[1]);
var t = Math.min(1.0, (now - startTime) / duration);
Cesium.Cartesian3.lerp(start, end, t, end);
result[0] = start;
result[1] = end;
result.length = 2;
return result;
}, false);
}
Sandcastle.addToolbarButton(‘Go’, function(){
viewer.entities.add({
polyline: {
positions : createLineAnimation(bluePin, questionPin, 2000)
}
});
});
