fc.tape — js-библиотека для простой анимации спрайтов

Хочу поделиться с хабросообществом javascript-библиотекой fc.tape. Её назначение — управление анимацией спрайта, представляющего собой склеенные кадры.
Демо

Для использования fc.tape вам понадобятся jQuery (1.6+), jQuery UI (1.8+) Core and Widget.
Создать спрайт из отдельных файлов изображений можно утилитой convert, входящей в пакет ImageMagick:

$ convert img_* -append sprite.png

Настройки

gradually — включить плавность переключения кадров, по умолчанию включена.
image — путь к фоновой картинку со спрайтом анимации, по умолчанию — фоновое изображение элемента.
frameCount — количество кадров в анимации.
frameHeight — высота одного кадра, по умолчанию — высота элемента.
frameChangeDuration — продолжительность переключения между кадрами в милисекундах.
backgroundX — горизонтальное смещение спрайта с анимацией. Используется, если в одном изображении заключено несколько спрайтов.
preload — стартовать анимацию, когда загрузится файл со спрайтом, по умолчанию включена.

Эти настройки могут быть заданы при инициализации или через data-атрибуты, например:

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

API

Low level API

windToNext — перемотать на следуюший кадр

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

windToPrev — перемотать на предыдущий кадр

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

Оба метода учитывают размер анимации и при выходе за границы замыкают анимацию, то есть windToNext на последнем кадре покажет первый, а windToPrev на первом — последний.
setPosition — установить позицию спрайта на заданную безо всяких анимаций.

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

setOptions — изменение настроек на лету:

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

getOption — получение значения текущей настройки:

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

Medium level API

windTo — перемотать на заданный кадр. Целевой кадр указывается двумя способами — абсолютным и относительным всей анимации:

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

stepInTo — перемотать на заданный кадр, показывая по очереди все промежуточные. В зависимости от текущего кадра и целевого может крутить анимацию как вперёд, так и назад. Также поддерживает абсолютное и относительное задание номера целевого кадра:

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

High level API

rotate — крутить спрайт при движении мышью с зажатой левой кнопкой. Это поведение можно использовать, например, в интернет-магазинах для демонстрации товара. По умолчани активной областью для кручения является сам элемент со спрайтом, но можно указать альтернативный. Также доступно указания направление кручения и его скорость:

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

---

Посмотреть на работу виджета можно на demo-странице, на нашем сайте или на наших работах.
Страница проекта на гитхабе.

В дальнейших планах:
— улучшения API,
— добавление дополнительных поведений (high level API) в коробку,
— отказ от зависимостей от jQuery UI.

Автор: piumosso