Custom HTML element to animate nested images.
Early alpha. Preloading not implemented yet so it will stutter through first playthrough.
Not a lot of demo stuff yet, but there is my basic test suite.
- playback of any nested elements in sequence
- playback direction control
- fps control
- simple events
TBD before v1:
- pingpong playback
- folder-based image sequences
- size mismatch management
- finer-grained events
- Onion skinning
To use, embed JS file in
dist and add the
<frame-seq> element to your HTML. Any elements nested inside will be played back in order of the HTML.
<frame-seq><img src="imgseq01.jpg" ... ><img src="imgseq02.jpg" ... ><img src="imgseq03.jpg" ... ><img src="imgseq04.jpg" ... ><img src="imgseq05.jpg" ... ><img src="imgseq06.jpg" ... ><img src="imgseq07.jpg" ... ><img src="imgseq08.jpg" ... ><img src="imgseq09.jpg" ... ><img src="imgseq10.jpg" ... ></frame-seq>
fps- Playback speed (frames-per-second). Default 12.
autoplay- Boolean: Begin playback as soon as element is rendered.
reverse- Boolean: Playback is in opposite direction.
pingpong- Boolean: Doesn't do anything yet.
loop- Boolean: Playback automatically loops (regardless of direction).
width- Doesn't do anything yet.
height- Doesn't do anything yet.
preload- Boolean: Doesn't do anything yet.
All attributes are also expressed as properties. Additional properties are:
currentFrame- The current playhead position (starting at 1).
totalFrames- The total number of frames in the animation (read-only).
duration- The total running time of the animation, based on the current FPS (read-only).
playing- Boolean: Whether the animation is currently playing (read-only).
paused- Boolean: Whether the animation is currently paused (read-only).
stopped- Boolean: Whether the animation is currently stopped (read-only).
These methods will almost certainly be thinned out in a future version.
stateChanged- When the playback state has changed or any attribute is modified.
enterFrame- At the beginning of each redraw.