I'm trying to animate a feature from one point to another based on the example here for version3.20. Source code below. It works fine just pasting it in codepen or jsfiddle. However, my project works with version 4.12 of the API an I'm trying to achieve the same thing.
<!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>
Working my way downward, I attempted modifying the code for version 4.12 until I got to the part that require the graphic's getShape (i.e get the dojo gfx shape) method which according to this link Functionality matrix | ArcGIS API for JavaScript 4.12, it is not a planned feature. My question is, is there another way to implement such animation in 4.12 or is it just not possible for now ?
