AnsweredAssumed Answered

How to animate graphic from one Location to another.

Question asked by krishnavsav on May 9, 2017
Latest reply on May 10, 2017 by krishnavsav

I have tried to animate graphic from one location to another as shown in below code:

 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Animate Graphic</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

    <style>
      #info {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
    </style>


    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
        "esri/graphic", "dojox/gfx/fx","dojo/_base/lang",
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol,
        Graphic, fx, lang,
        Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-25.312, 34.307],
          zoom: 3
        });
        map.on("load", initToolbar);

        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"));
       

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          //map.enableMapNavigation();

        
          var symbol;
          if ( evt.geometry.type === "point") {
            symbol = markerSymbol;
          
                  var g=new Graphic(evt.geometry, symbol);
            map.graphics.add(g);
         
             setTimeout(lang.partial(function(animateMe) {
             var shape = animateMe.getDojoShape();
     
            var sp1 = map.toScreen(evt.geometry);

             fx.animateTransform({
                                  duration: 1200,
                                  shape: shape,
                                  transform: [{ name: "translate", start:[sp1.x,sp1.y], end:[sp1.x+50,sp1.y] }]}).play();
             }, g), 0);     
         }
        }
       
      });
    </script>

  </head>
 
  <body>
   
    <div id="info">
      <div>Select and draw on map to add graphic</div>
      <button id="Point">Point</button>
    </div>

    <div id="mapDiv"></div>

  </body>
</html>

 

Animation function is working but graphic moves to different screen coordinates. Please suggest.

 

Regards,

Krish

Outcomes