[GIS] Flash a graphic using JSAPI AMD style

arcgis-javascript-apiarcgis-server

This should be simple, but not sure why I'm not getting it. Does anyone have a stub for showing how to flash a graphic? I want to be able to call it from a button in the JSAPI UI. I am using the AMD, hopefully this isn't steering away from it.

function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();

//Performance enhancer - 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 graphic = 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([255, 0, 0]), 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 (graphic.geometry.type === "point" || graphic.geometry.type === "multipoint") {
        symbol = markerSymbol;
    } else if (graphic.geometry.type === "line" || graphic.geometry.type === "polyline") {
        symbol = lineSymbol;
    } else {
        symbol = fillSymbol;
    }
    //g = new esri.Graphic(evt, symbol, null, null);
    //selGraphicsLayer.add(g);

    graphic.setSymbol(symbol);

    //Set the infoTemplate.
    graphic.setInfoTemplate(infoTemplate);

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

    //zoom to graphics 
    var graphicsExtent = esri.graphicsExtent(map.graphics.graphics)
    if (graphicsExtent !== null) {
        map.setExtent(graphicsExtent.expand(5));

        //flashFeature(graphic, 8, symbol);                                               
        }
    }
}

Best Answer

This is how I'm doing it in my application. I'm flashing the row that is clicked in a dGrid. I've added "dojox/gfx/fx" to the require statement

    require(["dojox/gfx/fx", ... ], function(fx, ... ){ ... });

    var graphicFlash;
    var graphicHighlight = findGraphicByAttribute(row.data);

    if (graphicHighlight !== null) {
        switch (graphicHighlight.geometry.type) {
            case "point": case "multipoint":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                break;
            case "polyline":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                break;
            case "polygon": case "extent":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                break;
        }
        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);
    });
Related Question