NpmSpriteLite 🎬

Ультралегкий и производительный аниматор спрайтов для веба. Позволяет оживить последовательность кадров из одного изображения (Sprite Sheet) и JSON-атласа.

Основные возможности

• 🚀 Zero Dependencies: Чистый ванильный JavaScript.
• 📐 Responsive: Автоматически подстраивает спрайт под размер контейнера (режимы fit).
• ⏱️ Zero Lag: Использует Web Worker для идеально стабильного FPS даже при нагрузке на основной поток.
• 📦 Modern: Поставляется в форматах ESM и UMD.

Установка

npm install npm-sprite-lite

Быстрый старт

1. Подготовьте контейнер в HTML

<div id="character" style="width: 300px; height: 300px;"></div>

2. Инициализируйте анимацию

import { SpriteLite } from 'npm-sprite-lite';

const container = document.getElementById('character');

const sprite = new SpriteLite(container, {
  image: 'path/to/image.webp',
  json: 'path/to/atlas.json',
  fps: 24,
  fit: 'contain',
  loop: true
});

API Референс

Конструктор

new SpriteLite(container, options)

| Опция | Тип | По умолчанию | Описание | | :--- | :--- | :--- | :--- | | image | string | обязательно | URL к изображению спрайт-листа. | | json | string|object | обязательно | Объект атласа или URL к .json файлу. | | fps | number | 24 | Частота кадров в секунду. | | autoplay | boolean | true | Запускать ли анимацию сразу после загрузки. | | loop | boolean | true | Зацикливать ли воспроизведение. | | fit | string | 'height' | Режим подгонки: height, width, contain, cover, none. | | useWorker | boolean | true | Использовать Web Worker для таймера (рекомендуется). | | onFrame | function | null | Коллбэк, вызываемый на каждом кадре (index) => {}. | | onComplete | function | null | Коллбэк по завершении (если loop: false). |

Методы

| Метод | Описание | | :--- | :--- | | play() | Запустить воспроизведение. | | pause() | Поставить на паузу. | | setSpeed(fps) | Изменить скорость анимации на лету. | | updateFrame(index) | Перейти к конкретному кадру (ручное управление). | | destroy() | Остановить анимацию и полностью очистить DOM-элементы и воркеры. |

Статические методы

Для быстрой инициализации без сохранения ссылки:

SpriteLite.animate(container, options);

Формат JSON атласа

Библиотека ожидает стандартный формат JSON, где каждый кадр описан в массиве sprites:

{
  "sprites": [
    { "x": 0, "y": 0, "width": 100, "height": 100 },
    { "x": 100, "y": 0, "width": 100, "height": 100 }
  ],
  "spriteSheetWidth": 1000,
  "spriteSheetHeight": 1000
}

Лицензия

MIT