@metagl/metagl-animation

animation lib. It can be render into DOM or canvas.

Install

npm install:

npm i @metagl/metagl-animation --save

included in script:

<script src="index.js"></script>

Usage

ImageSprite:

var imageSprite = new metaglAnimation.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()

MediaSprite

var mediaSprite = metaglAnimation.MediaSprite({
  media: 'path/to/your/media.ogg', // url, HTMLVideoElement or HTMLAudioElement
  mediaType: 'video', // video or audio
  sprites: [[0, 2], [2, 4], [4, 9]], // or an object like: {first: [0, 2], sec: [2, 4], third: [4, 9]}
  onReady: function () {},  // when media is ready (metadata loaded)
  onSpriteEnd: function () {} // will be invoked when each sprite play completed
})

mediaSprite.play(0) // if sprites pass as an object, then invoke like mediaSprite.play('first')
mediaSprite.repeat(0) // if sprites pass as an object, then invoke like mediaSprite.repeat('first')
mediaSprite.pause()