Hi,
I’d like to create very simple animation of polyline gradually increasing its length as you can see it in the picture. I don’t want use timeline/CZML because that will be used for different data and when user will go back and forth on timeline i don’t want to modify this polyline. This will be animated just once, no matter what time on timeline is.
I’ve tried to do this by adding it as entity and then updating its position in delayed loop:
Firstly I add polyline entity by calling this function with some valid positions:
function addPolylineEntity(startPos, endPos) {
polylineEntity = viewer.entities.add({
name : ‘timeline’,
polyline : {
positions : [startPos, endPos],
material : Cesium.Color.SPRINGGREEN,
width : 5
}
});
}
``
This is function will go in recursive loop and always increases polyline length by 1 “part” until it reaches desired length
function updatePolyline(i, surfacePosition) {
var parts = 100;
if (i >= parts) {
return;
}
_.delay(function() {
var height = timelineLength / parts * i;
var endPosition = getEndPosition(height);
var positions = new Cesium.PositionPropertyArray([
new Cesium.ConstantPositionProperty(surfacePosition),
new Cesium.ConstantPositionProperty(endPosition)
]);
polylineEntity.polyline.positions = positions;
updatePolyline(i + 1, surfacePosition);
}, 50);
}
``
This sort of works, but result is poor. The polyline is flickering back and forth on its way to desired length.
Does anybody know how to make such simple animation properly in cesium? To be it nice continuous and in the best case with some easing.
