Как создать APNG: от кадров PNG к плавной анимации

Как вообще устроена сборка

В основе APNG лежит простая идея: анимация — это просто стопка кадров, которые показывают по очереди. Каждый кадр — отдельная картинка PNG. Конвертер берёт эту стопку, записывает порядок и тайминги в служебные блоки файла и упаковывает всё в один .apng. Никакого видео-кодека, никакого звука — только последовательность статичных изображений.

Из этого следует и главное правило подготовки: все кадры должны быть одного размера. Если первый кадр 400×400, а второй 380×420 — анимация «поедет». Поэтому весь процесс сводится к трём шагам: подготовить ровные кадры, выбрать скорость, нажать «собрать».

Шаг 1. Подготовьте кадры

Кадры можно получить откуда угодно: нарисовать в графическом редакторе, экспортировать из программ для анимации и дизайна (например, After Effects или Figma), выгрузить из 3D-программы. Главное — сохранить каждый кадр как отдельный PNG. Несколько практичных советов:

• Одинаковый размер у всех кадров. Это самое важное условие. Проверьте холст перед экспортом.
• Понятная нумерация: frame_01.png, frame_02.png… — так конвертер расставит кадры в правильном порядке.
• Сохраняйте прозрачность. Если фон должен быть прозрачным, экспортируйте PNG с прозрачностью (в настройках это «альфа-канал» или «PNG-32»), а не на белом фоне.
• Меньше кадров — меньше файл. Для плавности 12–24 кадра в секунду обычно достаточно; не нужно гнаться за 60.

Шаг 2. Задержка и зацикливание

Два параметра управляют тем, как анимация выглядит в итоге: задержка и зацикливание.

Задержка — сколько времени держится каждый кадр на экране, в миллисекундах. Это и есть «скорость» анимации. Простая шпаргалка:

Зацикливание определяет, сколько раз проиграть анимацию. Значение 0 означает «крутить бесконечно» — это вариант по умолчанию для лоадеров и стикеров. Любое другое число — проиграть столько раз и замереть на последнем кадре (удобно для коротких приветствий или эффектов появления).

Шаг 3. Соберите APNG онлайн

Самый быстрый способ без установки программ — собрать APNG прямо в браузере. Загружаете кадры, задаёте задержку и зацикливание — конвертер выдаёт готовый файл.

Другие инструменты: Assembler и ffmpeg

Онлайн-конвертера хватает в 90% случаев, но иногда нужны специальные инструменты:

• APNG Assembler — десктопная программа специально для сборки APNG. Её фишка — автоматическая межкадровая оптимизация: повторяющиеся участки соседних кадров не дублируются, и файл получается ощутимо легче. Полезно для длинных анимаций.
• ffmpeg — бесплатная программа, которая работает через текстовые команды (не кнопками). Пригодится, если анимацию нужно собрать из видео. Команда выглядит так:

ffmpeg -i clip.mp4 -plays 0 -f apng output.apng

Здесь -plays 0 задаёт бесконечный цикл. ffmpeg удобен, когда исходник — это видеоролик, а не набор отдельных картинок.

Частые ошибки новичков

Чтобы первый APNG получился с первого раза, держите в голове эти грабли:

• Разный размер кадров. Самая частая причина «дёрганой» или съезжающей анимации. Сверяйте холст.
• Потеря прозрачности. Если экспортировать кадры на белом фоне, прозрачность пропадёт — а вместе с ней и весь смысл выбора APNG вместо GIF.
• Слишком много кадров. Длинный фотореалистичный ролик в APNG может весить много (формат сжимает только без потерь). Для таких случаев присмотритесь к анимированному WebP.
• Слишком короткая задержка. Задержка меньше ~20 мс на кадр просто не покажется быстрее — браузеры всё равно показывают такие кадры чуть медленнее, чем вы задали.

Как вытащить кадр обратно в PNG

Иногда нужна обратная задача — достать из готовой анимации один статичный кадр (например, для превью или обложки). Это делает конвертация APNG → PNG: она извлекает кадр и сохраняет его как обычный PNG с прозрачностью.

Перетащите .apng в конвертер APNG в PNG — и получите чистый статичный кадр. А если хотите понять, как устроен формат изнутри, начните с обзорной статьи что такое APNG. Все доступные преобразования — на странице всех форматов.