[GIS] How to flash a graphic in JSAPI using AMD

arcgis-javascript-apiarcgis-serverjavascript

With the code below I was hoping to flash the selected polyline, however no success. 

function flashResults(featureSet) {
alert("flash");
//remove all graphics on the maps graphics layer
map.graphics.clear();

//assign featureSet array to a single variable.
var resultFeatures = featureSet.features;

//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
    //Get the current feature from the featureSet.
    //Feature is a graphic
    var graphicFlash = resultFeatures[i];

    // allow different symbols
    markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 255, 255]), 2),
    new dojo.Color([255, 0, 0, 0.85]));
    lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,
    new dojo.Color([0, 255, 255]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,
    esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);
    fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.85]));

    // figure out which symbol to use                                                                                      
    if (graphicFlash.geometry.type === "point" || graphicFlash.geometry.type === "multipoint") {
        symbol = markerSymbol;
    } else if (graphicFlash.geometry.type === "line" || graphicFlash.geometry.type === "polyline") {
        symbol = lineSymbol;
    } else {
        symbol = fillSymbol;
    }

    graphicFlash.setSymbol(symbol);

    //Add graphic to the map graphics layer.
    map.graphics.add(graphicFlash);

    var shape = graphicFlash.getDojoShape();
    var animStroke = fx.animateStroke({
        shape: shape,
        duration: 500,
        color: {
            end: new dojo.Color([0, 0, 0, 0])
        }
    });
    var animFill = fx.animateFill({
        shape: shape,
        duration: 500,
        color: {
            end: new dojo.Color([0, 0, 0, 0])
        }
    });
    var anim = dojo.fx.combine([animStroke, animFill]).play();
    var animConnect = dojo.connect(anim, "onEnd", function () {
        map.graphics.remove(graphicFlash);
    });
}

}

Best Answer

You're on the right track using dojox/gfx/fx.animatedStroke. Here's a simplified working example showing how you can animate stroke: http://jsbin.com/ujoWejo/1/

Relevant JS:

var map;
require([
  "esri/map",
  "esri/layers/GraphicsLayer",
  "esri/geometry/Polyline", 
  "esri/symbols/SimpleLineSymbol",
  "esri/graphic",
  "dojo/_base/lang",
  "dojox/gfx/fx",
  "dojo/domReady!"
], function(
  Map, GraphicsLayer, Polyline, SimpleLineSymbol, Graphic, lang, fx
) {
  map = new Map("map", { 
    basemap: "oceans",
    center: [-84.977, 59.919],
    zoom: 4,
    slider: false,
    showAttribution: false
  });

  map.addLayer(new GraphicsLayer({ "id": "look" }));
  map.on("click", function (e) {
    var l = map.getLayer("look");
    var distance = (map.extent.getWidth() / map.width) * 50;
    var line = new Polyline(map.spatialReference);
    line.addPath([
      [e.mapPoint.x - distance, e.mapPoint.y],
      [e.mapPoint.x + distance, e.mapPoint.y]
    ]);
    var g = new Graphic(line, new SimpleLineSymbol());
    l.add(g);
    // if you've never used partial, read this:
    // http://dojotoolkit.org/reference-guide/1.9/dojo/_base/lang.html#dojo-base-lang-partial
    setTimeout(lang.partial(function(animateMe) {
      var shape = animateMe.getDojoShape();
      fx.animateStroke({
        shape: shape,
        duration: 1000,
        color: { start: "red", end: shape.strokeStyle.color },
        width: { start: 20, end: shape.strokeStyle.width }
      }).play();
    }, g), 500);
  });
});

You also mentioned AMD in your question title. Whenever you find yourself typing or referencing dojo.something or esri.anything, you're not using AMD. AMD means loading modules using require() and locally scoped references to those modules. If you're referencing things from globals you're still doing things in the older non-AMD legacy style.

Related Question