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

RexCammack — Fri, 04 Dec 2015 19:05:46 GMT

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

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

TyroneBiggums — Mon, 07 Dec 2015 12:35:14 GMT

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

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

YannCabon — Sat, 11 Dec 2021 22:32:53 GMT

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!

topic Re: Use Promises to watch for the end of Animations to chain set of AnimateTo calls in ArcGIS JavaScript Maps SDK Questions

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

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

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