HTML5 – Why Were Frames Removed but Not iFrames?

I'd say yes - the UI layer should be decoupled from the rest of the application anyway (in a perfect world, obviously...) so exposing your back-end software logic to a HTML-based front-end (note that I consider the web server to be part of the presentation layer) makes perfect sense.

The difficulty with this is that there are some things are are either not supported or just plain difficult to implement with HTML. This is changing rapidly so I'm not sure (but not 100% convinced either) that this is no longer a problem.

For example, you could only get 'push' to the client using polling-via-AJAX, but today we have websockets. You could only get fancy graphics using a plugin like Flash, but today we have WebGL. Once you had slow networks but today we have very fast and low-latency ones.

I think aspects like validation and responsive-ui without having to front-load a ton of data still requires a lot of design thought, but these are solveable problems.

So I'd go for it. Note that there is some interesting frameworks coming along now - especially Wt which changes the drawing commands of Qt from 'raw pixels' to html components so your 'desktop' Qt code will run on the web without any modification. I think that's pretty damn cool.

Your animation should be calculated even if that calculation is entirely a function of time. And at any given time you should be able to draw() an [animated] image and know that you're getting the right frame. You want something like this, but not necessarily this:

// whatever your "attributes" looks like, the point is you've given enough
// information to the constructor to find ordered frames in the image and know
// the framerate
function SpriteAnimation(image, attributes) {

  // you probably want a SpriteFrame "class" to populate here, based on whatever
  // existing code you use to extract frames from the sprite
  this.frames = [ SpriteFrame, SpriteFrame, ... ];
                         // ... getFramesFromImageAndAttributes(image, attributes)

  // if the animation is running, this is the time it started
  this.startTime = 0;

  // whatever your framerate is ... 
  this.fps = 25;         // getFPSFromAttributes(frame_attributes)

  // whether the animation loops infinitely
  this.loop = true;      // getLoopFlagFromAttributes(frame_attributes)

  // for canceling the animationframe request, if necessary
  this.animationFrameRequestId = null;

  // draw whichever frame should be visible *right now*
  this.draw = function() {

    // unconditionally show the first frame if the animation isn't running
    if (this.startTime == 0) {
      this.frames[0].draw();
      return;
    }

    // there may be a better and more accurate way to compute this ...
    var frame_duration = 1000 / this.fps;
    var now = (new Date()).getTime();
    var elapsed_time = now - this.startTime;
    var visible_frame = Math.floor(elapsed_time / frame_duration);

    if (visible_frame_number > frames.length) {
      if (!this.loop) {
        // we're past the end of the animation and we're not looping.
        // stop the animation.
        this.startTime = 0;
        visible_frame = 0;
      }
    }

    this.frames[visible_frame % frames.length].draw();

    if (this.startTime != 0) {
      var _t = this;
      requestAnimationFrame(_t.draw);
    }

  }

  this.animate = function() {
    this.startTime = (new Date()).getTime();
    var _t = this;
    requestAnimationFrame(_t.draw);
  }

  this.stop = function() {
    this.startTime = 0;
    if (this.animationFrameRequestId) {
      cancelAnimationFrame(this.animationFrameRequestId);
    }
  }

}

var a = new SpriteAnimation("/path/to/image.jpeg", {
  fps: 25,
  frame_width: 100,
  frame_height: 100,
  image_width: 1000,
  image_height: 10000
});
a.animate();

... Or whatever.