WPF animated GIF and Javascript filmroll

I made a few improvements to my SkinBuilder utility (I’m using it daily and it’s great!).  You can now add these attributes to a <Snapshot>:

  • Top, Left, Right, Bottom – Snapshot position relative to container edges (otherwise defaults to top left).
  • Width, Height – Snapshot width and height (defaults to container size if known).
  • RenderDpi – The DPI (Dots Per Inch) to render at.
  • Dpi – The DPI of the snapshot (this may influence the final width and height; defaults to 96 if omitted).
  • Quality – Compression quality level for JPEGs (0 to 100; defaults to 100).

Additionally the <Group> element supports position attributes (Top, Left, Right, Bottom) and a new OutputPath attribute, which lets you set a relative base path for all contained Snapshots.

The most interesting new attributes are RenderDpi and Dpi.  The following examples show a rotating 3D Kaxaml logo as an animated GIF and a Javascript-driven “filmstrip”, both rendered at 300 dpi and scaled down to 96 dpi (effectively anti-aliasing the result – something WPF 3D can’t otherwise do when rendering to a bitmap):

Javascript-driven filmstrip (and here’s the image it’s using).

Kaxaml_repeat

Note – I passed the animated GIF through a freeware utility called Beneton Movie GIF so I could enable the “repeat forever” flag.  The Javascript example just manipulates the CSS backgroundPosition property on a timer event…

Let me know if you generate any cool WPF 3D animation GIFs or filmstrips! 🙂  If they’re really REALLY cool I’ll post them here!

3 Comments

Leave a comment