# Animation of polylines without czml

**URL:** <https://community.cesium.com/t/animation-of-polylines-without-czml/5414>\
**Category:** CesiumJS\
**Created:** [April 17, 2017, 6:39am UTC](https://community.cesium.com/t/animation-of-polylines-without-czml/5414 "2017-04-17T06:39:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sisi\_Liu](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sisi\_Liu](https://community.cesium.com/u/Sisi_Liu)\
**Post date:** [April 17, 2017, 6:39am UTC](https://community.cesium.com/t/animation-of-polylines-without-czml/5414/1 "2017-04-17T06:39:47Z")

</div>

hi,  
I wonder how to animate a polylines when time changes.

For instance, one polyline is consist of a set of points P, when time1, polyline =\> p1 and p2; when time2, polyline =\> p1, p2, p3, …, and finally, polyline will be pn-1, pn. I have tried path with czml, the points of path only can be increased, but decreased. And now, i use Primitives to draw a polyline with texture, but i don’t see any api about updating geometry of Primitives, so i have to clear all Primitives of previous time and draw them all of next time to simulate an animation. The result is, when more polylines appear, polylines will flash seriously…

Therefore, i wonder how to update a Primitive with geometry, or other plans to animate lots of polylines. It would be better with some sample code~

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [April 18, 2017, 5:40pm UTC](https://community.cesium.com/t/animation-of-polylines-without-czml/5414/2 "2017-04-18T17:40:23Z")

</div>

Hi Sisi,

Here’s a sandcastle example that will add to a polyline primitive: [http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=5cb24ba0dc0463ac420cb781ddde5d07](http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=5cb24ba0dc0463ac420cb781ddde5d07)

But unless there’s a strong reason to do so, I recommend you stick with the entity api. Here’s an example that will add more and more positions to a polyline over time.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lon = -120;

var lat = 35;

var positions = Cesium.Cartesian3.fromDegreesArray([lon, 35, -125, 35]);

function getPositions(){

lon += 0.05;

positions.push(Cesium.Cartesian3.fromDegrees(lon, lat));

return positions;

}

var redLine = viewer.entities.add({

polyline : {

positions : new Cesium.CallbackProperty(getPositions, false),

width : 5,

material : Cesium.Color.RED

}

});

``

Hope that helps,

- Rachel

---

<div class="post-metadata">

**Author:** ![Sisi\_Liu](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Sisi\_Liu](https://community.cesium.com/u/Sisi_Liu)\
**Post date:** [July 31, 2017, 8:14am UTC](https://community.cesium.com/t/animation-of-polylines-without-czml/5414/3 "2017-07-31T08:14:46Z")

</div>

hey Rachel, sorry i’m late to say thank you for the response.  
I have tried to animate a polyline with api, it succeeded, while, when i animated more polylines, like 10, or more, they flashed frequently, polylineCollection makes it better, but it cannot use material combined with color and texture. I wonder if you have any suggestion about this?

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [August 8, 2017, 4:29pm UTC](https://community.cesium.com/t/animation-of-polylines-without-czml/5414/4 "2017-08-08T16:29:37Z")

</div>

Hi Sisi,

What do you mean? Can you provide a code example and screenshot?

Best,

- Rachel