Smooth animation using ESRI Js 4.x Object Symbol 3D

2385
4
Jump to solution
06-30-2020 07:22 PM
Geoguybct
New Contributor II

Hi ,

I am trying to recreate Trip playback of vehicle using trip data. I have achieved to move from one location to another by adding and removing Point Symbol 3D objects. It is taking time for each loop so the object is blinking. It cannot be managed with Graphic update cause the angle,roll and tilt need to addressed. Is there any option to animate smoothly from one location to another in ESRI Js 4.x

Tried using Three.Js by Tweening the object but the location was the matter.

0 Kudos
1 Solution

Accepted Solutions
JohnGrayson
Esri Regular Contributor

There are several different ways we can accomplish this task.  If animating a single object, you can use a Graphic in a GraphicsLayer and just update the 'geometry' and 'symbol' properties of the Graphic (no need to remove and add the Graphic if using a Graphic in a GraphicsLayer). Other things to try out would be to use a FeatureLayer with 'source' Graphics, and use the visualVariables to manipulate the symbol heading, roll, and tilt, and then to update the Graphics you'd use the 'applyEdits()' method.

https://codepen.io/john-grayson/pen/oNbqzEb?editors=0011 

We hope this helps.

View solution in original post

4 Replies
JohnGrayson
Esri Regular Contributor

Do you have a codepen of jsbin showing the issue?

Geoguybct
New Contributor II

Hai John, 

Thanks for your reply.

Please find the Codepen for the use case. Here I am getting the blinking appearance of the vehicle since it is removing and adding on each location. I am looking for the option to smoothly animate between points.

https://codepen.io/hashifk/pen/RwrQWBW 

Thanks.

0 Kudos
JohnGrayson
Esri Regular Contributor

There are several different ways we can accomplish this task.  If animating a single object, you can use a Graphic in a GraphicsLayer and just update the 'geometry' and 'symbol' properties of the Graphic (no need to remove and add the Graphic if using a Graphic in a GraphicsLayer). Other things to try out would be to use a FeatureLayer with 'source' Graphics, and use the visualVariables to manipulate the symbol heading, roll, and tilt, and then to update the Graphics you'd use the 'applyEdits()' method.

https://codepen.io/john-grayson/pen/oNbqzEb?editors=0011 

We hope this helps.

Geoguybct
New Contributor II

Hi John,

It works, Thank you very much for your great help ... We have been looking for this solution for long time. 

Thanks for your time and consideration John Grayson

0 Kudos