Use Promises to watch for the end of Animations to chain set of AnimateTo calls

Question

I'm trying to use

view.watch ("finished", function(){

console.log ("animation finished")

});

once I get something like this working.  I have created an array of cameras to create a series of animateTo animations s to so a multiple part fly through using a loop.

Currently I can't get them to play in sequence as I loop through the camera array

Thanks for any help

YannCabon · Answer

Hi Rex,

you can totally do this. I set up a example here: Chaining animations

var cameras = [
        {
          "position": {
            "x": 860866.9791700585,
            "y": 5776206.000594208,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            },
            "z": 5182.999999999069
          },
          "heading": 270.0000000089171,
          "tilt": 79.9999999867539
        },
        {
          "position": {
            "x": 852082.9255940468,
            "y": 5784990.056948395,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            },
            "z": 5182.999999997206
          },
          "heading": 180,
          "tilt": 79.9999999681663
        },
        {
          "position": {
            "x": 843580.3118266261,
            "y": 5776487.440662808,
            "spatialReference": {
              "wkid": 102100,
              "latestWkid": 3857
            },
            "z": 5182.999999997206
          },
          "heading": 90.00000000865207,
          "tilt": 79.99999998165575
        },
        {
          "position": {
            "x": 852039.3825317192,
            "y": 5767378.401137406,
            "spatialReference": {
              "wkid": 102100
            },
            "z": 5182.999999999069
          },
          "heading": 359.99999914622634,
          "tilt": 79.99999998987897
        }
      ].map(Camera.fromJSON);

var delay = function(delay) {
        var deferred = new Deferred();
        setTimeout(function() {
          deferred.resolve();
        });
        return deferred.promise;
      };

window.animateCamera = function() {
        var timeline = cameras.concat();

var next = function() {
          var camera = timeline.shift();
          if (camera) {
            return view.animateTo(camera).then(next);
          }
        }

var animation = promiseUtils.resolve()
          .then(function() { return delay(500); })
          .then(next);

animation.then(function() {
          console.log("animation finished done");
        });
      };
      
      var logProperty = function(newValue, oldValue, prop) {
        var oldValueString = (oldValue && typeof oldValue === "object") ? "[object]" : oldValue;
        var newValueString = (newValue && typeof newValue === "object") ? "[object]" : newValue;
        console.log(prop + " changed from " + oldValueString + " to " + newValueString);
      };
      view.watch("stationary, animation, interacting", logProperty)

Have fun!

TyroneBiggums · Answer

Probably because they are asynchronous calls. You may call them in order of 1, 2, 3, but 2 could return before 1.