Possible new animation methods

[tigt]

During the last presentation, I noted proposed animation methods, and added a few of my own:

• <canvas>

  • 2D context
  • 3D context (WebGL)

• <video> — just .mp4 is sufficient nowadays

• GIF, animated WebP, Animated PNG — probably all 3 at once using <picture>:

  <picture>
  <source srcset="ball.webp" type="image/apng">
  <source srcset="ball.apng" type="image/webp">
  <img src="ball.gif" alt="Bouncy ball">
  </picture>

• SVG in OpenType — view in Firefox

• <marquee> (I can post my code; it's mostly the derivative of the pure-JS algorithm feeding into the scrollamount attribute)

• application/x-multi-part-mixed-replace — this is how those ancient webcams worked; remember those?

• Flash

• WebVR

• Cromwell once joked about making an HTC file for old IE

[bryanbraun]

@tigt, thanks for getting these down.

One constraint I'd like to keep is that "Any new animation should work on the demo page and be visually indistinguishable from existing animations (except for the color of the ball)" (that's in the contribution guidelines).

I think that eliminates a couple of these options (like WebVR, WebGL 3D context, and sadly marquee 😢).

I'm going to go ahead and split the remaining ones out into separate issues, so they are easy to claim.

[bryanbraun]

Ok @tigt, I've created a bunch of separate issues for your suggestions (https://github.com/sparkbox/bouncy-ball/issues/42, https://github.com/sparkbox/bouncy-ball/issues/41, https://github.com/sparkbox/bouncy-ball/issues/40, https://github.com/sparkbox/bouncy-ball/issues/39, https://github.com/sparkbox/bouncy-ball/issues/38). I'm going to go ahead and close this one. Thanks again. 🙌

[tigt]

Glad it came in handy. WebGL 3D context can be made to look identical, though; it just enables the GPU's 3D processing instead of accelerated raster commands.

[bryanbraun]

Oh cool. I'm open to a WebGL example that looks identical. I added a new issue: https://github.com/sparkbox/bouncy-ball/issues/43