fc.tape - js-library for simple animation of sprites

I want to share with the habocommunity javascript-library fc.tape . Its purpose is to control the animation of the sprite, which is glued frames.
Demo

To use fc.tape, you will need jQuery (1.6+), jQuery UI (1.8+), Core components and Widget components.
You can create a sprite from individual image files using the convert utility included in the ImageMagick package:

$ convert img_* -append sprite.png 

Attention:
API version 0.2 has changed slightly, the current version .

Settings

gradually - enable smooth frame switching, enabled by default.
image - the path to the background image with the animation sprite, by default - the background image of the element.
frameCount - the number of frames in the animation.
frameHeight is the height of one frame, by default the height of the element.
frameChangeDuration - the duration of switching between frames in milliseconds.
backgroundX - horizontal sprite offset with animation. Used when multiple sprites are enclosed in the same image.
preload - start the animation when the file with the sprite is loaded, enabled by default.
')
These settings can be set during initialization or via data-attributes, for example:

 <div id=”tape” data-frame-count="20" data-frame-height="150"></div> 

API

Low level API

windToNext - rewind to the next frame

 $('#tape').tape('windToNext'); 

windToPrev - rewind to previous frame

 $('#tape').tape('windToPrev'); 

Both methods take into account the size of the animation, and when they go beyond the boundaries, they close the animation, that is, windToNext on the last frame will show the first, and windToPrev on the first frame will show the last.
setPosition - set the position of the sprite to the specified without any animations.

 $('#tape').tape('setPosition', 14); 

setOptions - change settings on the fly:

 $('#tape').tape('setOptions', { frameCount: 37 frameChangeDuration: 70 }); 

getOption - getting the value of the current setting:

 var height = $('#tape').tape('getOption', 'frameHeight'); 

Medium level API

windTo - rewind to the specified frame. The target frame is specified in two ways - absolute and relative to the entire animation:

 $('#tape').tape('windTo', 12); $('#tape').tape('windTo', 0.6, true); 

stepInTo - rewind to the specified frame, showing in turn all the intermediate ones. Depending on the current frame and target, it can turn the animation forward or backward. It also supports the absolute and relative setting of the target frame number:

 $('#tape').tape('stepInTo', 36, false, function(){ console.log('Animation is finished'); }); 

High level API

rotate - rotate the sprite while moving the mouse while holding the left button. This behavior can be used, for example, in online stores to display a product. By default, the active area for torsion is the element itself with a sprite, but you can specify an alternative. Also available are indications of the direction of torsion and its speed:

 $('#tape').tape('rotate', { element: $('#handler'), deltaX: 3, direction: -1 }); 

---

You can look at the work of the widget on the demo-page , on our website or on our works .
Project page on githaba .

Further plans:
- API improvements,
- adding additional behaviors (high level API) to the box,
- rejection of dependencies on jQuery UI.