Canvas Based Image Sequence Animation Plugin For jQuery - Segment Animator

Canvas Based Image Sequence Animation Plugin For jQuery - Segment Animator
File Size: 16.1 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Segment Animator is a jQuery plugin used for creating a 360° image/product viewer by animating(rotating) through image sequences on an HTML5 canvas element.

See also:

How to use it:

1. Rename your image sequences as this:

product_00.png
product_01.png
product_02.png
...
product_71.png

2. Load the latest version of jQuery library and the jQuery Segment Animator plugin's script at the end of the document:

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="INHANCE_SegmentAnimator.jquery.js"></script>

3. Create an HTML5 canvas element for the image viewer.

<canvas id="myCanvas" width="600" height="450"></canvas>

4. Initialize the Segment Animator with options.

var animator = new INHANCE_SegmentAnimator.Animator('#myCanvas',{
    naming: 'product_##.png',
    frames: 72,
    fps: 60
);

5. Play the image sequence animation.

animator.playAnim()

6. Pause the image sequence animation.

animator.pauseAnim()

Change log:

2017-06-01

  • pause and then play error fixed

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