Skip to content

Adasha/frame-seq

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

frame-seq

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.

Features

Current

  • playback of any nested elements in sequence
  • playback direction control
  • autoplay
  • looping
  • fps control
  • simple events

TBD before v1:

  • pingpong playback
  • buffering
  • preloading
  • folder-based image sequences
  • size mismatch management
  • finer-grained events

Post v1

  • Onion skinning

Usage

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>

Attributes

  • 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.

Properties

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).

Methods

These methods will almost certainly be thinned out in a future version.

  • play()
  • pause()
  • resume()
  • stop()
  • gotoAndPlay(frame)
  • gotoAndResume(frame)
  • nextFrame()
  • prevFrame()

Events

  • stateChanged - When the playback state has changed or any attribute is modified.
  • enterFrame - At the beginning of each redraw.