Krish,
The issue you are having now is that you are setting the animation start and end values the way you were before and I added the "original" property to the animation which mean use the shapes original coords and add the end values to the start original (0,0).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require(["esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/graphic", "dojox/gfx/fx", "dojo/_base/lang", "esri/Color", "dojo/dom", "esri/layers/GraphicsLayer",
"dojo/on", "esri/geometry/ScreenPoint", "esri/geometry/Point", "esri/geometry/Polyline",
"dojo/domReady!"
],
function(Map, SimpleMarkerSymbol, SimpleLineSymbol,
Graphic, fx, lang, Color, dom, GraphicsLayer,
on, ScreenPoint, Point, Polyline) {
var options = {
basemap: "gray",
center: [-29.88, 21.86133],
zoom: 3
};
map = new Map("mapDiv", options);
var linepath = [
[-29.88231249999835, 21.861337104185896],
[-29.706531249998385, 23.64436466438422],
[-26.89403124999913, 29.152009189365007],
[-25.4877812499995, 31.57838706044446],
[-22.85106250000021, 34.08891708698886],
[-19.862781250001014, 36.66827922896022],
[-18.104968750001476, 37.787943753057206],
[-14.765125000002355, 39.300164419151855],
[-12.655750000002914, 39.97698664383719],
[-10.370593750003529, 40.64717142579546],
[-8.085437500004144, 41.178522893330914],
[-4.218250000005169, 41.574231022027256],
[0.7036249999935258, 41.836698107532534],
[4.746593749992446, 41.836698107532534],
[9.316906249991233, 41.836698107532534],
[12.48096874999041, 41.836698107532534],
[12.8325312499903, 41.836698107532534],
];
var sls = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([255, 0, 0]),
3
);
var pl = new Polyline({"paths": [linepath], "spatialReference":{"wkid":4326}});
var vechPath = new Graphic(pl, sls);
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath(
"M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z"
);
markerSymbol.setColor(new Color("#00FFFF"));
var gLayerVehicle = new GraphicsLayer({
"id": "Vehicle"
});
var gLayerVehiclePath = new GraphicsLayer({
"id": "VehiclePath"
});
map.addLayers([gLayerVehiclePath, gLayerVehicle]);
gLayerVehiclePath.add(vechPath);
var myInterval = setInterval(test, 3000);
var counter = 0;
function test() {
gLayerVehicle.clear();
var p1 = new Point(linepath[counter]);
var p2 = new Point(linepath[counter + 1]);
var pt1Graphic = new Graphic(p1, markerSymbol);
gLayerVehicle.add(pt1Graphic);
var shape = pt1Graphic.getShape();
console.info(shape.getTransform());
var sp1 = map.toScreen(p1);
var sp2 = map.toScreen(p2);
var mp1 = map.toMap(new ScreenPoint(sp2.x, sp2.y));
fx.animateTransform({
duration: 1200,
shape: shape,
transform: [{
name: "translate",
start: [0,0],
end: [sp2.x - sp1.x, sp2.y - sp1.y]
},
{name: "original"}
],
onEnd: lang.hitch(this, function() {
pt1Graphic.setGeometry(mp1);
})
}).play();
counter++;
if (counter >= linepath.length - 1) {
clearInterval(myInterval);
}
}
}
);
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
