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.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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

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