- PVSM.RU - https://www.pvsm.ru -
Хочу поделиться с хабросообществом javascript-библиотекой fc.tape [1]. Её назначение — управление анимацией спрайта, представляющего собой склеенные кадры.
Демо [1]
Для использования fc.tape вам понадобятся jQuery [2] (1.6+), jQuery UI [3] (1.8+) Core and Widget.
Создать спрайт из отдельных файлов изображений можно утилитой convert, входящей в пакет ImageMagick [4]:
$ 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>
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');
windTo — перемотать на заданный кадр. Целевой кадр указывается двумя способами — абсолютным и относительным всей анимации:
$('#tape').tape('windTo', 12);
$('#tape').tape('windTo', 0.6, true);
stepInTo — перемотать на заданный кадр, показывая по очереди все промежуточные. В зависимости от текущего кадра и целевого может крутить анимацию как вперёд, так и назад. Также поддерживает абсолютное и относительное задание номера целевого кадра:
$('#tape').tape('stepInTo', 36, false, function(){
console.log('Animation is finished');
});
rotate — крутить спрайт при движении мышью с зажатой левой кнопкой. Это поведение можно использовать, например, в интернет-магазинах для демонстрации товара. По умолчани активной областью для кручения является сам элемент со спрайтом, но можно указать альтернативный. Также доступно указания направление кручения и его скорость:
$('#tape').tape('rotate', {
element: $('#handler'),
deltaX: 3,
direction: -1
});
В дальнейших планах:
— улучшения API,
— добавление дополнительных поведений (high level API) в коробку,
— отказ от зависимостей от jQuery UI.
Автор: piumosso
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/5046
Ссылки в тексте:
[1] fc.tape: http://source.futurecolors.ru/fc.tape/
[2] jQuery: http://jquery.com/
[3] jQuery UI: http://jqueryui.com/
[4] ImageMagick: http://www.imagemagick.org
[5] сайте: http://futurecolors.ru/team/
[6] работах: http://www.tnk-racing.ru/
[7] Страница проекта на гитхабе: http://github.com/futurecolors/fc.tape/
Нажмите здесь для печати.