How to make simple animation without using timeline/CZML

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.

Is it possible to put this into a SandCastle app to test out?

You’re close, but you shouldn’t be assigning polylineEntity.polyline.positions inside of your display function. What you want to do is use a callback property inside of the PositionPropertyArray. Change your original position assignment at the very top to something like this:

positions : new Cesium.PositionPropertyArray([

new Cesium.CallbackProperty(function(time){ return startPos; }, false),

new Cesium.CallbackProperty(function(time){ return endPos; }, false)

]);

Now, you can just modify startPos and endPos inside of your delay function and the line should be updated. No need to touch the entity or positions property inside that function.

If you’re still having problem, can you please post a complete Sandcastle example so we can better understand the issue.