Configurable Sprite Based Animations - ImageSpritePlay

ImageSpritePlay is a simple yet powerful jQuery sprite animator for creating fancy configurable animations from image sprites you provide.

Features:

• Infinite loop.
• Autoplay.
• Custom range.
• Custom delay.
• Fade transition.
• Callback functions.

How to use it:

1. Place the JavaScript jquery.ImageSpritePlay.js after jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.ImageSpritePlay.js"></script>

2. Create a container in which you want to place the sprite animation.

<div id="example" class="sprite-play"></div>

3. Call the function on the container, specify the path to the sprite image, and set the amount of frames.

$("#example").imageSpritePlay({
  image: 'sprite.png',
  frame_count: 4,
  autoplay: true,
  loop: true
});

4. Full plugin options to customize the sprite animation.

$("#example").imageSpritePlay({
  image          : null,
  frame_count    : 0,
  custom_range   : null,
  next_range     : null,
  loop           : false,
  autoplay       : false,
  delay          : 0,   // Delay on first play
  inverted       : false, // false: forward, true: backward
  velocity       : 500,
  fadeTransition : false,
  randomized     : false,
  inlineStyle    : true
});

5. Callback functions.

$("#example").imageSpritePlay({
  onComplete     : null,
  onFrame        : null,
  beforeStart    : null,
  afterStop      : null,
  onLoop         : null
});

6. API methods.

var myAnimator = $("#example").imageSpritePlay();

myAnimator.first()
myAnimator.previous()
myAnimator.play()
myAnimator.delay_play(p_arg)
myAnimator.pause()
myAnimator.resume()
myAnimator.stop()
myAnimator.justStop()
myAnimator.next()
myAnimator.goto(p_arg)
myAnimator.restart()
myAnimator.refresh()
myAnimator.last()
myAnimator.velocity(p_arg)
myAnimator.loop(p_arg)
myAnimator.invert()
myAnimator.delay(p_arg)
myAnimator.attach(p1, p2)
myAnimator.setRange(p1, p2)
myAnimator.nextRange(p1, p2, p3)

---

This awesome jQuery plugin is developed by marceloxp. For more Advanced Usages, please check the demo page or visit the official website.