Play a series of images as sprite animation. It can be render into DOM or canvas.

Install

npm install:

npm i image-sprite --save

included in script:

<script src="image-sprite.min.js"></script>

Usage

var imageSprite = new ImageSprite('mountNode', {
  width: 300,
  height: 300,
  images: [], // urls of your images
  mode: 'canvas',
  interval: 16,
  onLoaded: null, // once all images are loaded, will trigger this callback
  onUpdate: null, // will be invoked per frame while playing
  onComplete: null  // will be invoked once playing completed
})

imageSprite.play()  // play, by default is looping play, equals to play({ loop: true })
imageSprite.play({ repeat: 2 }) // play twice
imageSprite.play({ toFrame: 1 }) // play to the frame which index is 1
imageSprite.play({ byFrame: 10 }) // play of next 10 frames

/* you can specify direction and interval of this play */
imageSprite.play({ interval: 1000, direction: 'backward' }) // direction values: 'forward', 'backward', 'alternate'

imageSprite.pause() // pause

imageSprite.next()  // next frame

imageSprite.prev()  // prev frame

imageSprite.jump(frameIndex) // jump to a specified frame

imageSprite.destroy()