Генератор CSS-анимации из sprite sheet
Превратите sprite sheet в готовую к вставке CSS-анимацию на steps() с живым предпросмотром, прямо в вашем браузере.
Ваш sprite sheet читается локально в вашем браузере для построения предпросмотра и генерации CSS; изображение никогда не загружается и остаётся на вашем устройстве.
Приводите вывод в порядок? Попробуйте CSS Formatter.
Об инструменте CSS-анимация из sprite sheet
Этот генератор CSS-анимации из sprite sheet превращает полосу или сетку кадров в готовую к вставке CSS-анимацию, построенную на @keyframes и функции тайминга steps(). Перетащите изображение sprite sheet для живого предпросмотра или просто введите ширину, высоту и число кадров и позвольте инструменту сделать за вас математику background-position. Он обрабатывает как одну горизонтальную строку, так и полную сетку, проходя кадры построчно по столбцам, а затем по строкам, и связывает keyframes с background-size, чтобы каждая ячейка вставала точно. Задайте скорость через FPS или общую длительность, назовите анимацию, выберите бесконечное или фиксированное число повторов и выберите направление. Вы получаете полный CSS — размеры элемента, блок @keyframes и сокращённую запись animation — который можно скопировать или скачать как файл .css. Всё работает на вашем устройстве, поэтому загруженная полоса читается локально и никогда не покидает ваш браузер.
Возможности
- Загрузка sprite sheet перетаскиванием или выбором файла для мгновенного живого предпросмотра, либо работа только по размерам
- Режим одной строки выдаёт компактный keyframe from/to из двух точек, шагающий background-position по полосе
- Режим сетки выдаёт одну явную точку background-position на кадр, построчно по столбцам, затем по строкам
- Добавляет background-size в режиме сетки, чтобы каждая ячейка масштабировалась к вашим точным размерам кадра
- Задание тайминга через кадры в секунду или через общую длительность в миллисекундах
- Выбор бесконечного зацикливания или фиксированного числа повторов, плюс направление normal, reverse или alternate
- Автоматически очищает имя анимации до корректного идентификатора CSS
- Копирование полного CSS или скачивание его как файла .css в один клик
Как использовать CSS-анимация из sprite sheet
- Загрузите sprite sheet или пропустите загрузку и просто введите размеры кадра.
- Выберите одну строку или сетку, затем задайте ширину, высоту и число кадров (плюс столбцы и строки для сетки).
- Задайте скорость через FPS или общую длительность, затем назовите анимацию и выберите повторы и направление.
- Посмотрите, как элемент анимируется в живом предпросмотре, чтобы подтвердить правильность кадрирования.
- Скопируйте сгенерированный CSS или скачайте его как файл .css и вставьте в свой проект.
Пример
Ввод
8 frames, 64×64 each, single row, 12 fps, infinite
Результат
.sprite {
width: 64px;
height: 64px;
background-repeat: no-repeat;
animation: sprite 0.667s steps(8) infinite normal;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -512px 0; }
}
Полоса из одной строки требует только steps(8) и keyframe из двух точек, чтобы проиграть все кадры.
Частые ошибки и устранение неполадок
- Анимация дёргается или показывает край следующего кадра. — Убедитесь, что ширина и высота кадра точно совпадают с полосой. Если ячейки неровные, обрежьте полосу так, чтобы каждый кадр был одного размера.
- Показан только первый кадр, и ничего не движется. — Проверьте, что число кадров не меньше 2 и что background-repeat остаётся no-repeat, чтобы полоса не размножалась мозаикой.
- Полоса-сетка проигрывает неверные кадры или уходит по диагонали. — Подтвердите, что столбцы и строки соответствуют раскладке полосы; инструмент проходит кадры слева направо, затем сверху вниз, поэтому числа должны быть верными.
- Анимация идёт слишком быстро или слишком медленно. — Переключите режим тайминга между FPS и общей длительностью. Общая длительность, делённая на число кадров, даёт время на кадр.
Часто задаваемые вопросы
- Как steps() анимирует sprite sheet?
- steps(n) делит анимацию на n равных отрезков и перескакивает между ними вместо интерполяции, поэтому background-position защёлкивается с одного кадра на следующий. Использование steps(), равного числу ваших кадров, означает, что каждый кадр показывается один шаг без размытых промежуточных позиций.
- Нужно ли мне загружать своё изображение?
- Нет. Загрузка sprite sheet даёт вам живой предпросмотр, но вы можете сгенерировать корректный CSS только по ширине, высоте и числу кадров. Без изображения предпросмотр показывает заполняющую сетку, а математика и вывод остаются точными.
- В чём разница между режимом одной строки и режимом сетки?
- Режим одной строки предполагает, что все кадры лежат на одной горизонтальной полосе, и выдаёт компактный keyframe from/to. Режим сетки обрабатывает многострочные полосы, выдавая одну точку background-position на кадр, двигаясь по столбцам, затем вниз по строкам, и добавляет background-size, чтобы вся полоса масштабировалась правильно.
- Задавать FPS или общую длительность?
- Используйте FPS, когда знаете, сколько кадров должно проигрываться в секунду; инструмент преобразует это в длительность, деля число кадров на FPS. Используйте общую длительность, когда хотите, чтобы весь цикл занимал конкретное число миллисекунд независимо от числа кадров.
- Как зациклить анимацию навсегда или только несколько раз?
- Выберите Infinite для непрерывного цикла, что соответствует animation-iteration-count: infinite. Выберите Count и введите число, чтобы проиграть последовательность фиксированное число раз, и используйте опцию направления для обратного или чередующегося воспроизведения.
- Загружается ли мой sprite sheet куда-либо?
- Нет. Изображение читается локально с помощью FileReader вашего браузера для построения предпросмотра и никогда не покидает ваше устройство; сгенерированный CSS вычисляется полностью на вашей машине.
Связанные инструменты
Все инструменты ArrayKit