Following on from Creating CSS Animations, I have decided to release the exporter script used to create the animated orange test guy.
As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!
Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.
Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).
For the curious, there are 3 examples:
As for the actual exporter script, it’s available on github.
EDIT: For those of you who for whatever reason want a video demonstration, there’s a video of it in action on youtube.
Recently I incorporated support for creating thumbnails in glgif, the backend gif animation library used in Anim8gif.
Rather than taking the easy route out and attempting to load the gif using UIImage, I decided to take advantage of glgif’s decode routines to create an accurate representation of the current state of the gif playback.
Put simply, I took the palette texture which is generated for display, and decoded it into a new UIImage.
The actual process is triggered by assigning a delegate (thumbDelegate), which will be invoked when the next frame in the gif is decoded. The delegate is then cleared.
More Technical Details
The format of a palette texture in GLES is as follows:
|Palette (16 or 256 entries)
||Indexed Pixels (4bit or 8bit)
The palette can either be 16 or 256 entries long, depending on the format you use. Likewise the pixel data will either use 4 bits or 8 bits. To keep things simple, glgif uses an 8bit palette with 3 8bit entries for the color (
(Note that an 8bit palette can be insufficient as a gif can actually display more than 256 colours across multiple frames, but this is a necessary trade-off for speed)
So in order to decode it:
- Read and decode the palette
- Decode each pixel as an index into the palette
- Using the decoded pixel data, create a new CoreGraphics bitmap context (using
- Convert the bitmap context into a UIImage (using
The resultant UIImage can then easily be used as a base to generate a sized down thumbnail of the gif, as illustrated below.
As always, the code for glgif is hosted on github, so feel free to check it out!