Canvas Based Image Sequence Animation Plugin For jQuery - Segment Animator

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:

• Cyclotron - 360°Panorama Image Display Plugin
• Interactive 360º Product Viewer Plugin With JQuery - Angle View
• Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate
• 360 Degrees Image Rotate & Zoom Plugin with jQuery and Canvas - Tikslus360
• Simple 360 Degrees Image Viewer Plugin For jQuery - Rotateimage
• jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
• jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
• AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
• jQuery Plugin For Draggable 360 Degrees Product Image View - j360
• Super Tiny jQuery 360 Degrees Product Image Viewer

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.