The way animations are played in Excalibur is non-intuitive

Currently to play an animation you need to call addDrawing('animationName', anim) setDrawing('animationName') to play an animation, then the animation plays as a side effect.

Problems:

• No way of knowing when the animation is done
• It is ackward to script out an animation sequence
• addDrawing and setDrawing don’t scream “use me to animate”
• No way to have an “invisible” animation

Possible implementation

// internal animations collection
var MyActor extends ex.Actor {
   someMethod() {
      // returns a promise that is resolved when the animation is complete
      this.animations('run').play().then(() => {
          this.animations('jump');
      });
   }
}

actor.addAnimation('key', anim);
//alias
actor.add('key', anim)

// in the case of looping animations, the promise resolves when the animation is switched
var done = actor.animations('looping').play()

// the "done" promise resolved
// additionally the "play" animation can take an optional delay parameter
var newanimdon = actor.animations('explode').play(200)

// to stop the current animation, doing a "freeze frame" on the current animation. 
// Resolving the promise of the current animation
actor.animations.stop()

// to have the drawing be invisible call
actor.animations.none();

[alanag13]

You could consider doing something like an IPlayable interface to keep these sorts of things in check.

[eonarheim]

Closed by #1730