9 апреля 2012 в 16:27

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

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

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

$ convert img_* -append sprite.png

Внимание:
API версии 0.2 немного изменилось, актуальная версия.


Настройки


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
карма
132,2
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (10)

  • 0
    К сожалению примеры подключивают малек, особенно когда кликнуть сразу несколько раз быстро.
    • +2
      Да, я в курсе этой баги. Постараюсь поправить в ближайшее время.
  • +2
    Пример с конфетками порадовал.
    Хитро они добились плавности!
    Спасибо за знакомство.
    • 0
      Я так понимаю, что автор поста и автор библиотеки — один человек
      • +1
        Все логично — автор с конфетками :)
      • 0
        Совершенно верно
  • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    jQuery да еще и jQueryUI для анимации с спрайтов? Да ладно ಠ_ಠ

    Я могу признать пользу здесь jQuery, но без jQuery UI потенциальная аудитория библиотеки была бы больше: я хоть и сам активно использую jQuery UI, но никто не хочет таскать с собой постоянно кучу скриптов, а кто-то к примеру предпочитает Sencha и не станет использовать вашу библиотеку только из-за необходимости подключать еще и jQuery UI.

    Вам стоило бы подумать, действительно ли здесь нужно тащить за собой jQuery UI, ведь анимация спрайтов — не такая высокоуровневая задача, как прочие UI контроллы, и обратите внимание, вы реализуете не пользовательский интерфейс по управлению анимацией спрайтов, а программное API и эта штука имеет кучу вариантов применения в тех или иных проектах, которым по каким-то причинам может не подходить jQuery UI.

    Нужно просто всегда находить правильный компромисс. Я уверен, что если исключить jQuery UI из зависимостей, придется не так уж много довелосипедить, но PROFIT вы получите, если конечно не планируете защищаться аргументами «писалось для себя под конкретный проект с jQuery UI». Страничку то вы симпатичную сделали для проекта, статью вот неплохую написали.

    p.s.: Сугубо имхо и ничего не имею против jQuery UI, он хорош
    • +2
      Да, вы правы. И, хотя jQuery UI требуется совсем немного (около 16 кб в несжатом виде), в дальнейшем хочется отказаться от него.
  • 0
    На конфетках хотелось бы фокусировку как тут havve.net/things/focusme

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.